First Person Key Controls
21 October 2015 18:09
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
but it doesn't work on safari, any idea why?
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
Hello!
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.
And the view is now related to the mouse movement, it works fine on FirefoxThis 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.
but it doesn't work on safari, any idea why?
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
Thank you so much for your answer! Although I haven't found a solution yet !
I wasn't using an iframe, I tried that method though without success.
So here are some screenshots, i hope you'll be able to tell me where I messed up
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.
Ответ на сообщение пользователя 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.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) ?
If you won't be able to find something suspicious, then it is better to make screenshots with scene and character setup.
So here are some screenshots, i hope you'll be able to tell me where I messed up
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
24 October 2015 17:18
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!
Here's the link to my scene file, thank you so much for helping me out!
26 October 2015 11:45
Thank you for the example.
I haven't noticed one simple thing. You have a line in the app initialization:
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.
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
26 October 2015 14:42
26 October 2015 15:01
26 October 2015 15:26