Jump to content

Pointer lock


Recommended Posts

I am able to lock the pointer using the "requestPointerLock()" method.

However, all mouse events stops working.

As soon as I press Esc (exit pointer lock) the events start working again.


This is best tested with "game.debug.pointer(game.input.activePointer);"

The only thing that apparently works is detecting mouse down/up, but this is not sufficient.

Link to comment
Share on other sites

After reading this I understand what is happening.



The normal fields are static when pointerlock is enabled. What is needed is to get the movementX and movementY fields from the mousemove-event.

I edited the pointer class to take this into consideration, also I added it to the debug input. And it works, I'm getting movement-data.


Perhaps this should be implemented in a future version of Phaser?



Current changes I've made to make this work for me.


"rawMovementX" and "rawMovementY" contains the raw data from the browser event. This contains a relative number how much the mouse has moved since the last browserevent. If the mouse was at x:10 first event and x:22 the second time, the rawMovementX variable will have the value 12. This is for debug purposes, not to be used in game.


"movementX" and "movementY" contains the "processed" data. Since the game is not updated in realtime, but usually 60fps, using "rawMovementX" would only use the last mouse event. This would be fine if a mousevent was emitted ONLY once each frame, but that is almost never the case. This is why we use "movementX" to aggregate (sum) all the raw data. This makes it possible to get accurate relative data for each frame of the game. These variables are being reset each frame also for obvious reason.



Add this to the Pointer class.

	/**    * @property {number} rawMovementX - The vertical raw relative movement of pointer in pixels since last event.    * @default    */	this.rawMovementX = -1;		/**    * @property {number} rawMovementY - The horizontal raw relative movement of pointer in pixels since last event.    * @default    */	this.rawMovementY = -1;		/**    * @property {number} movementX - The vertical processed relative movement of pointer in pixels since last event.    * @default    */	this.movementX = -1;		/**    * @property {number} movementY - The horizontal processed relative movement of pointer in pixels since last event.    * @default    */	this.movementY = -1;

Here you can see the collection of the raw data and aggregation into a variables that are useful in the game.


Add this to the "move" function of Pointer.

if (!fromClick){    this.rawMovementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;    this.rawMovementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;    this.movementX += this.rawMovementX ;    this.movementY += this.rawMovementY ;}

As I said, we need to reset the processed data.


Add this function to the Pointer class

resetMovement: function() {	this.movementX = 0;	this.movementY = 0;}

This will rotate the world by 0.01 radians per pixel. Also, we reset the movement data immediately. It would be possible to add this to the main loop right after update or render is called. The downside of that is the possibility of a rawMovementX-event being lost between update and the reset. Thus, a manual reset is a way to minimize any lost mouse events.


This can then be used in the game like this:

game.world.rotation += game.input.activePointer.movementX * 0.01;game.input.activePointer.resetMovement();

This is only a rough solution. To make this better the mouse event should perhaps only capture the movement-data if pointer lock is enabled (pointer already has the ability to detect this) and if it is in fact a mouse (not touch) as the pointer (this is also detectable).

Also, it is possible to add the relative data to the clientX and clientY coordinates, making it possible to have a custom cursor in the game and keeping button events, hover events, etc.


Well, that's all for now. I hope someone finds this useful.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...