First Person Key Controls

21 October 2015 18:09

#4525

posts: 14

Hello everyone, i've been working on a fantomatic city in which you can walk around at the first person.
(right now the city is only 3 buildings as i'm testing the interactiv possibilities before building it all)

To do so i've followed this tutorial:
https://www.blend4web.com/en/article/103/

And the view is now related to the mouse movement, it works fine on Firefox smiling-open-mouth

but it doesn't work on safari, any idea why? open-mouth

My main problem though is that the Key controls are not functioning, is there something I might have missed in the code or in the scene set up?

Thank you so much for your help! Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="b4w.min.js"></script>
    <script type="text/javascript" src="ville.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #canvas3d {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
        <div id="canvas3d"></div>
</body>
</html>

"use strict";

b4w.register("ville_main", function(exports, require) {

var m_app   = require("app");
var m_data  = require("data");
var m_main  = require("main");
var m_scs   = require("scenes");
var m_cons  = require("constraints");
var m_ctl   = require("controls");
var m_mouse = require("mouse");
var m_phy   = require("physics");
var m_trans = require("transform");

exports.init = function() {
    m_app.init({
        canvas_container_id: "canvas3d", 
        callback: init_cb,
        physics_enabled: false,
        alpha: false,
        autoresize: true
    });
}

function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }
    m_app.enable_controls(canvas_elem);
    
    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load("ville.json", load_cb);
}

/**
 * callback executed when the scene is loaded
 */
function load_cb(data_id) {
    // make camera follow the character
    var camobj = m_scs.get_active_camera();
    var character = m_scs.get_first_character();
    m_cons.append_stiff_trans(camobj, character, [0, 0.7, 0]);

    // enable rotation with mouse
    var canvas_elem = m_main.get_canvas_elem();
    canvas_elem.addEventListener("mouseup", function(e) {
        m_mouse.request_pointerlock(canvas_elem);
    }, false);

    setup_movement()
}

function setup_movement() {

    var key_a = m_ctl.create_keyboard_sensor(m_ctl.KEY_A);
    var key_s = m_ctl.create_keyboard_sensor(m_ctl.KEY_S);
    var key_d = m_ctl.create_keyboard_sensor(m_ctl.KEY_D);
    var key_w = m_ctl.create_keyboard_sensor(m_ctl.KEY_W);
    var key_space = m_ctl.create_keyboard_sensor(m_ctl.KEY_SPACE);
    var key_shift = m_ctl.create_keyboard_sensor(m_ctl.KEY_SHIFT);

    var move_state = {
        left_right: 0,
        forw_back: 0
    }

    var move_array = [key_w, key_s, key_a, key_d, key_shift];
    var character = m_scs.get_first_character();

    var move_cb = function(obj, id, pulse) {
        if (pulse == 1) {
            switch (id) {
            case "FORWARD":
                move_state.forw_back = 1;
                break;
            case "BACKWARD":
                move_state.forw_back = -1;
                break;
            case "LEFT":
                move_state.left_right = 1;
                break;
            case "RIGHT":
                move_state.left_right = -1;
                break;
            case "RUNNING":
                m_phy.set_character_move_type(obj, m_phy.CM_RUN);
                break;
            }
        } else {
            switch (id) {
            case "FORWARD":
            case "BACKWARD":
                move_state.forw_back = 0;
                break;
            case "LEFT":
            case "RIGHT":
                move_state.left_right = 0;
                break;
            case "RUNNING":
                m_phy.set_character_move_type(obj, m_phy.CM_WALK);
                break;
            }
        }

        m_phy.set_character_move_dir(obj, move_state.forw_back,
                                          move_state.left_right);
    };

    m_ctl.create_sensor_manifold(character, "FORWARD", m_ctl.CT_TRIGGER,
            move_array, function(s) {return s[0]}, move_cb);
    m_ctl.create_sensor_manifold(character, "BACKWARD", m_ctl.CT_TRIGGER,
            move_array, function(s) {return s[1]}, move_cb);
    m_ctl.create_sensor_manifold(character, "LEFT", m_ctl.CT_TRIGGER,
            move_array, function(s) {return s[2]}, move_cb);
    m_ctl.create_sensor_manifold(character, "RIGHT", m_ctl.CT_TRIGGER,
            move_array, function(s) {return s[3]}, move_cb);

    var running_logic = function(s) {
        return (s[0] || s[1] || s[2] || s[3]) && s[4];
    }
    m_ctl.create_sensor_manifold(character, "RUNNING", m_ctl.CT_TRIGGER,
            move_array, running_logic, move_cb);

    var jump_cb = function(obj, id, pulse) {
        m_phy.character_jump(obj);
    }
    m_ctl.create_sensor_manifold(character, "JUMP", m_ctl.CT_SHOT,
            [key_space], null, jump_cb);
}

});

b4w.require("ville_main").init();

22 October 2015 09:04

#4528

Evgeny Rodygin

posts: 644

Hello!

And the view is now related to the mouse movement, it works fine on Firefox
but it doesn't work on safari, any idea why?

This is because Safari (as well as IE and Opera) still doesn't support PointerLock API. We can only wait for them to add this feature.

My main problem though is that the Key controls are not functioning, is there something I might have missed in the code or in the scene set up?

The code looks ok for me.
Several reasons can cause such an issue:
1) If you try to use keyboard inside an iframe, you need to set focus to it before. Here is a similar thread.

2) Maybe, your physics setup for the character or the scene is wrong. Please check if all settings look similar to what we have in tutorial. There should be some console output if this is the reason.
If you won't be able to find something suspicious, then it is better to make screenshots with scene and character setup.

22 October 2015 13:17

#4535

LuneBrain

posts: 14

Thank you so much for your answer! Although I haven't found a solution yet !

Ответ на сообщение пользователя Evgeny Rodygin
1) If you try to use keyboard inside an iframe, you need to set focus to it before. Here is a similar thread.

I wasn't using an iframe, I tried that method though without success.

2) Maybe, your physics setup for the character or the scene is wrong. Please check if all settings look similar to what we have in tutorial. There should be some console output if this is the reason.
If you won't be able to find something suspicious, then it is better to make screenshots with scene and character setup.

So I checked things, and i don't have the exact same interface as the one in the tutorial so I'm starting to wonder if the setups I'm doing are the right one (i'm in the blend4web workspace so i'm not sure why it wouldn't but could it be that) ?
So here are some screenshots, i hope you'll be able to tell me where I messed up grinning-smiling-eyes

By the way: the collision thing is not important to me for the buildings because the "character" is allowed and invited to pass through things.
So I did it on the scene floor but no set up for the buildings.

24 October 2015 00:10

#4559

Evgeny Rodygin

posts: 644

Well. The settings look perfectly ok for me. The only thing we left to do is to check your scene. Could you please provide us a small example which doesn't work for you? (without actual buildings, just a character and some sample collision plane)

24 October 2015 17:18

#4562

LuneBrain

posts: 14

https://www.dropbox.com/s/k0rm11s0cxt2jsw/ville.blend?dl=0

Here's the link to my scene file, thank you so much for helping me out!

26 October 2015 11:45

#4571

Evgeny Rodygin

posts: 644

Thank you for the example.
I haven't noticed one simple thing. You have a line in the app initialization:

        physics_enabled: false

It should be set to true. Console says that the character has no physics but actually the whole scene has no physics.
We'll add more evident warning for such cases.

After enabling physics you need to put uranium.js and uranium.js.mem inside your app folder (they can be found in sdk/deploy/apps/common).
And also you need to apply scale for the physics plane because bullet doesn't know a thing about scale. And it is always better to apply scale for anything related to physics.

26 October 2015 14:21

#4574

LuneBrain

posts: 14

Ответ на сообщение пользователя Evgeny Rodygin
Thank you for the example.

THANK YOU, you're my hero, it works!!!!! smiling-eyes

26 October 2015 14:42

#4575

Evgeny Rodygin

posts: 644

You have accidentally put the "x" symbol in the begining of the ville.js file smiling

And you'd better apply scale by selecting the whole plane and character (he is also a physics object) and pressing crtl+A -> Scale. It works fine this way.

[EDIT]
Ah. You resolved it yourself few seconds before.

26 October 2015 15:01

#4576

LuneBrain

posts: 14

Ah. You resolved it yourself few seconds before.

I'll post a link to the final app when i'm done smiling

Thanks again, i'm so happy!!!

26 October 2015 15:26

#4578

Evgeny Rodygin

posts: 644

Ответ на сообщение пользователя LuneBrain
I'll post a link to the final app when i'm done Thanks again, i'm so happy!!!

We'll be following your progress smiling

Forum

First Person Key Controls

Please register or log in to leave a reply.