Controlling character rotation with mouse movement

19 November 2015 23:51
I've got something I'd like to try that I haven't been able to find in a tutorial or on the forum. I would like to set up controls that work - for example - like the "Minecraft" interface: ASDW controls movement, and the mouse controls the view and direction. How do I do this?
20 November 2015 05:33
Hi Dallas,

I am a blend4web noob but was just experimenting with this so maybe I can help.

I am assuming you don't mean first person but 3rd person like minecraft? There is a good tute here for first person:

I have tried to adapt this to a 3rd person perspective but get some strange issues on the camera object. At certain points in moving around, it seems when you rotate it, the object "jitters". I have added a screencast you can almost see the issue. This is just moving the mouse/rotating the camera, the camera object jitters left and right.

I have attached the js file I am using, the blend is just a plane, a cube, and a cylinder is the camera object.

I also tried to integrate/adapt the mobile controls from the making a game p4 tutorial. This seems to work quite well.
20 November 2015 07:51
Hi ben!

I took a somewhat different approach, but I also have the jittering issue. Learning this on the fly, as I've been doing, has been challenging at times. I expect one of the dev team will show up and let us know what that's about. Thanks for the file sample.
20 November 2015 10:56

"Jittering" is another side of the medal when we speak about physics acting in a separate worker. That's what we pay for rendering performance. So, we have to use different approach for controls here. You can check how this can be done in this tutorial.

The main difference here is how camera is bounded to the character:
function setup_camera() {
    var camera = m_scs.get_active_camera();
    m_cons.append_semi_soft_cam(camera, _character, CAMERA_OFFSET);
Blend4Web developer
20 November 2015 11:49
So, in other words, when the camera is attached to a character jitter will always result if semi soft cam (or some more complex workaround) isn't used?

Also, does this have any impact on using mouse x-y movement instead of keys? For what I want to do, I need to have that mouse control. Thanks.
20 November 2015 12:33
When I use a semi soft cam, the keyboard input for movement results in a difference in the angle between the view and the actual camera object.

Tweaking the softness parameter can reduce this, but the lower it is, the slower the mouse moves the view. This is why I tried to use the other camera mode.

The input on the stiff camera feels good, and how it should respond, but the jitter is probably not worth the compromise. The soft camera results in a lag in the camera following the camera object which to me doesnt feel as nice to control. It also causes the camera object to move left and right in a slight angle to the camera view since the movement is relative to the camera, but the camera is slightly off angle due to the soft constraint.

Is there perhaps an alternative or a better way to use the mouse to look around while controlling a character in 3rd person?
20 November 2015 14:25
I investigated the problem. You should use the following constraint:
m_cons.append_semi_stiff_cam(camobj, character, OFFSET);

but with the current mouse.js addon it will result in strange behavior. If you use SDK, you need to correct it a bit for this method to work perfectly. Open sdk/src/addons/mouse.js file. And change two lines there:
This line:
m_cam.eye_rotate(camera, -rot_x * FPS_MOUSE_MULT, -rot_y * FPS_MOUSE_MULT);

Should look like this:
m_cam.eye_rotate(camera, 0, -rot_y * FPS_MOUSE_MULT);

And these two lines:
var angles = m_cam.get_camera_angles_char(camera, _vec2_tmp);
m_phy.set_character_rotation(character, angles[0], angles[1]);

Should be replaced with the following one:
m_phy.character_rotation_inc(character, -rot_x * FPS_MOUSE_MULT, 0);

We'll change it in the original addon as well. So. Thank you for revealing the problem.

Actually, this is not a perfect solution for several other cases, so we'll think of some customization here.
And btw. We are going to release developers preview today. So you can check it soon.
Blend4Web developer
21 November 2015 02:50
Evgeny - glad I helped with a fix!

After tweaking my code based on ben's example, I am still having issues with mouse-controlled rotation. I'm sure I'm missing something. I've attached my .js file so that I can finally get this resolved.

Also, I guess the above mouse.js fix gets applied when you compile the engine - is there a way to do this with the existing b4w engine file(s)? If not, what's the easiest way to tie my existing project in with the new management system? I tend to want to get stuff done fast, and up to now it's been convenient to do things the old way. Thanks.
21 November 2015 13:19
You are right,
Jittering with third person can be removed only after changing the mouse.js addon and thus compiling the engine, because this addon was created keeping in mind only firstperson controls.

So, after you made the described correction you need to follow this short compilation instruction.
Blend4Web developer
Please register or log in to leave a reply.