#pointer lock

[clye]

[josdirksen]

[louisstow-blog]

Pointer Lock for building an FPS

Now that Pointer Lock (formerly known as Mouse Lock) is semi-available in Chrome I decided to have a play with it.

My friend Andrew Baker has a very easy to use 2.5D renderer and a first person demo to go with it. I went about adding mouse support for the demo.

Firstly you need to enable Pointer Lock in about:flags. Put that in the address bar then scroll down to "Enable Pointer Lock" and relaunch Chrome.

While reading the Pointer Lock API on MDN I noticed that Chrome requires the page to be in the fullscreen state. This is simple enough (note that element is a DOMElement such as a canvas node):

element.webkitRequestFullScreen()

This revealed a problem. None of the keyboard events worked and the docs never mentioned this. After searching for a while I came across Brandon's blog post on the subject. To allow the keyboard events to work in fullscreen mode, you have to pass in the ALLOW_KEYBOARD_INPUT constant:

element.webkitRequestFullScreen(element.ALLOW_KEYBOARD_INPUT)

To request a pointer lock on an element, you must use navigator.pointer.lock. In Chrome this is under the namespace navigator.webkitPointer. To normalise this you will want to add the following:

navigator.pointer = navigator.pointer || navigator.webkitPointer;

So after the request for fullscreen mode has been called we can request the pointer lock.

navigator.pointer.lock(element, function() { console.log("Request Succeeded") }, function() { console.log("Request Failed") } );

In my version of Chrome (17.0.963.79 on Windows 7) I noticed that neither of these callbacks were called. The second thing I noticed was a. the cursor wasn't hidden and b. the cursor wasn't actually locked and it could move out of the bounds of the element. The only feature that actually worked were the mouse events (movementX/Y). To make use of this, just bind the element to the mousemove event and the movementX/Y values will be in the event object:

var sensitivity = 0.4; //the lower the less sensitive element.addEventListener("mousemove", function(e) { var pos = { movementX: e.movementX || e.webkitMovementX, movementY: e.movementY || e.webkitMovementY, }; if(pos.movementX < 0) { Mars.turnLeft((-pos.movementX) * sensitivity); } else { Mars.turnRight(pos.movementX * sensitivity); } }, false);

If the movementX value was negative then the mouse was moved to the left. The values are actually the change in position since it was moved or the delta. By adding a sensitivity multiplier you can manipulate how much of an effect the movement values have on the view.

These new event values are great but isn't useful if the mouse isn't actually locked. I will have a play with non-stable versions of Chrome to see if it has been implemented but for now it's not very helpful.

Checkout the latest demo from this article and tell me if it works on your browser or not.

Edit: I installed Chrome Beta (18.0.1025.56) and I can confirm it works perfectly :) The cursor is hidden and locked. Should be in the next release very soon! I look forward to the opportunities this creates for HTML5 games.