Issue with 3d first-person camera movement using the mouse

Post reply
0 favourites
  • 14 posts
From the Asset Store
Customised Input Template - Gamepad, Keyboard and Mouse Support
$14.95 USD
Total customisation of the input! You can combine inputs from all peripherals. Make your game accessible for everyone!
Biim Games's avatar
Biim Games

  • Hi, guys. Hope you're all doing well :)

    I'm developing a first person 3D game in JS, and while testing it, some friends referred to some issues with the mouse cursor. They said it was "flickering" and losing direction, like they couldn't control it. Do you have any idea what may be causing it?

    Here's the code I'm using (it's the same code Construct uses in Exfiltration Template, Collect The Pages, etc) 

    function onMouseMove(e) {
 // Process mouse movement
 
 // Set camera's spherical coordinates according to mouse movement
 camLookTheta += e.movementX * MOUSESENSITIVITY;
 camLookPhi = Math.max(
 Math.min(
 camLookPhi - e.movementY * MOUSESENSITIVITY, Math.PI - 0.1
 ), 0.1
 );
}

    Watch the video of the issue:

    Tagged:

  • Ashley R0J0hound newt dop2000

    Hey guys, could you please help us? I didn't want to bother you, but it turns out that we no longer know what to do, and I think you are the best people to assist us in this difficult moment hehe This code is recommended by default in Construct 3 and it didn't work properly for 50% of the users who tested it. Do you have any idea what might be causing this?

  • Well I’m not familiar with those examples and i don’t have access to a mouse so I can’t test for myself.

    Does the issue you’re encountering happen in those examples or just in your game?

    If it’s just happening in yours then somehow you’re not doing it the same. You’ll need to double check to look for any differences.

    If it happens in the examples too then I guess it’s flawed somehow? No idea where. You only posted a partial of how the camera is rotated from moving the mouse.

  • I have used the Collect the pages example as a foundation for a serial killer forest game project and I haven't had any problems with the camera, but I am not using any javascript and only the base construct 3 integrated actions. I do like to apply an extremely fast lerp for camera smoothing sometimes though, so possibly you can try using that technique to counter any jittering. It even works well in unity/VR projects for eliminating the overly precise oculus inputs.

  • I have used the Collect the pages example as a foundation for a serial killer forest game project and I haven't had any problems with the camera, but I am not using any javascript and only the base construct 3 integrated actions. I do like to apply an extremely fast lerp for camera smoothing sometimes though, so possibly you can try using that technique to counter any jittering. It even works well in unity/VR projects for eliminating the overly precise oculus inputs.

    I didn't change anything, I simply use the default example code from Construct. In fact, the same issue occurs even when it's done via events, not just through JS. I tested it with all the 3D third-person examples, and the issue persists in all of them.

  • Well I’m not familiar with those examples and i don’t have access to a mouse so I can’t test for myself.

    Does the issue you’re encountering happen in those examples or just in your game?

    If it’s just happening in yours then somehow you’re not doing it the same. You’ll need to double check to look for any differences.

    If it happens in the examples too then I guess it’s flawed somehow? No idea where. You only posted a partial of how the camera is rotated from moving the mouse.

    This occurs in all examples of 3D third-person in Construct, whether through events or via JavaScript.

  • const MOUSESENSITIVITY = 0.0015;

function onMouseMove(e) {
 // Process mouse movement
 
 // Set camera's spherical coordinates according to mouse movement
 camLookTheta += e.movementX * MOUSESENSITIVITY;
 camLookPhi = Math.max(
 Math.min(
 camLookPhi - e.movementY * MOUSESENSITIVITY, Math.PI - 0.1
 ), 0.1
 );
}


function setCamera3D() {
 // Set camera position and rotation to follow the player
 
 const camX = player.x; // Camera X
 const camY = player.y; // Camera Y
 
 // Use terrain function to get correct camera height at any given point
 const zxratio = terrain.width/MESHRESX;
 const zyratio = terrain.width/MESHRESY;
 const camZ = 24 + player.zElevation + terrainElevation(
 player.x/zxratio - MESHRESX/2, player.y/zyratio - MESHRESY/2
 )
 
 // Spherical coordinates converted to cartesian coordinates
 camLookX = Math.cos(camLookTheta) * Math.sin(camLookPhi);
 camLookY = Math.sin(camLookTheta) * Math.sin(camLookPhi);
 camLookZ = -Math.cos(camLookPhi);
 
 // Apply camera settings
 camera.lookAtPosition(
 camX, camY, camZ,
 camX + camLookX,camY + camLookY, camZ + camLookZ,
 0, 0, 1
 );
}

  • Nothing looks amiss. You use the mouse movement to change the angles. You clamp the up and down angle a bit, it then gets a direction vector from the two angles and uses that for a look at.

    The video doesn’t show much. Do you get the runaway too or just some users?

    If it only happens on some machines then it’s an issue with the mouse movement values perhaps? Hard to debug if you don’t get the issue too.

    I guess you could make a test to log or graph the movement values along with the time. Then maybe nail down down what movements cause the runaway, and record that on both machines and see if there’s anything drastically different between the two.

    Overall if it’s a browser bug with the mouse movement callback then I’m not sure how to correct it. Maybe there’s some creative way to deal with it.

    Nothing else looks amiss otherwise.

  • > Well I’m not familiar with those examples and i don’t have access to a mouse so I can’t test for myself.

    > Does the issue you’re encountering happen in those examples or just in your game?

    > If it’s just happening in yours then somehow you’re not doing it the same. You’ll need to double check to look for any differences.

    > If it happens in the examples too then I guess it’s flawed somehow? No idea where. You only posted a partial of how the camera is rotated from moving the mouse.

    This occurs in all examples of 3D third-person in Construct, whether through events or via JavaScript.

    All the examples work good for me in both of my computers.

  • I think I may be having similar issues with the mouse camera. It starts off okay but in less than a minute or so into the game as you navigate with your mouse, it will suddenly snap to a particular random angle when the mouse is scrolled past a certain angle.

    Funny thing is for me, this problem never arise while playing in C3 mode, it only happens after exporting to nw.js format. I tried using different modes while exporting, eg. kiosk mode, resizeable windows, window frame, etc but to no avail, as problem still persists. Again, the problem happens only after it is exported. No such issue when playing in C3 browser mode.

    Judging from the number of people having similar issues with this, I think C3 people should seriously find a solution to this problem.

    I have attached the camera event action as follows.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Maybe a nw.js issue then? If you can reproduce it reliably then filing a bug with scirra is your best bet. As an alternate to nwjs they have that webview2 export which seems to have less issues. Maybe that's a solution.

  • I think I may be having similar issues with the mouse camera. It starts off okay but in less than a minute or so into the game as you navigate with your mouse, it will suddenly snap to a particular random angle when the mouse is scrolled past a certain angle.

    Funny thing is for me, this problem never arise while playing in C3 mode, it only happens after exporting to nw.js format. I tried using different modes while exporting, eg. kiosk mode, resizeable windows, window frame, etc but to no avail, as problem still persists. Again, the problem happens only after it is exported. No such issue when playing in C3 browser mode.

    Judging from the number of people having similar issues with this, I think C3 people should seriously find a solution to this problem.

    I have attached the camera event action as follows.

    I have the same issue, both in the Construct preview and in the NW.js export.

  • Maybe a nw.js issue then? If you can reproduce it reliably then filing a bug with scirra is your best bet. As an alternate to nwjs they have that webview2 export which seems to have less issues. Maybe that's a solution.

    I made a video to demonstrate it better. If you notice, out of nowhere, the camera goes all Exorcist, as if it's twisting the player's 'neck' upwards or sideways. THIS HAPPENS WITH ANY CONSTRUCT EXAMPLE, and the funniest thing is that it only occurs on one of my computers, not the other.

    Subscribe to Construct videos now

  • > Maybe a nw.js issue then? If you can reproduce it reliably then filing a bug with scirra is your best bet. As an alternate to nwjs they have that webview2 export which seems to have less issues. Maybe that's a solution.

    I made a video to demonstrate it better. If you notice, out of nowhere, the camera goes all Exorcist, as if it's twisting the player's 'neck' upwards or sideways. THIS HAPPENS WITH ANY CONSTRUCT EXAMPLE, and the funniest thing is that it only occurs on one of my computers, not the other.

    Subscribe to Construct videos now

    Go in the discord bro. There are people doing 3d there. Its hard to know what's happening if this doesn't happen to anyone else.

Post reply
  • 14 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)