Lock, Stock & Pointer - the PointerLock API
Fashionably late entrance, thanks for sticking around! So, a mouse cursor and a chicken drumstick walk into a bar...wait wait wait, that's not right. Wrong show.
Did you know your mouse has a lot more to offer than being "just" a cursor? Think about FPS games, and you'll know what we mean. Until recently, we could not really properly take advantage of the mouse in that way, but with the new Pointer Lock API we can.
Start the show!
These examples will only work in Chrome and Firefox.
How does it work?
To activate PointerLock on an element. you call element.requestPointerLock()
. The pointerlockchange
event will be
triggered on the document
element, if the pointer gets locked. If it fails the pointerlockerror
will be triggered.
Once we've got the pointer locked, the cursor will disappear. As we want to do stuff with the actual mouse movement, we attach a mousemove
eventlisterener to the document
element. The screenX
, screenY
, clientX
, and clientY
components of the mousemove event will all be constants
now, as there is no more pointer to move around a defined grid. Instead we get the movementX
and movementY
values which are deltas of the X
and Y movement of your mouse. Note: these values are not constrained by anything, this means that the mouse movement isn't constrained
by the browser window. Depending on mouse acceleration curve of the system, the deltas are bigger when you move your mouse faster
Useful?
If you're building games or other 3D-stuff that requires different mouse handling, this is a must have. The examples above are just some of the things you can do with this. But in general, if you'd wanted to build a game like Quake, you couldn't have done it without the Pointer Lock API.
Great, but can I use it today?
The Pointer Lock API is currently only supported in Chrome and Firefox. In Firefox it only works in fullscreen mode. It also somehow crashes Firefox Aurora when requesting fullscreen mode. So we're quite some time away from actually using it (safely).
What's behind the curtain?
Feel free to snoop around the different source files we used for this example.