Mouse Lock for HTML5 FPS games
Good news, everyone! Work is progressing on the Mouse Lock API, a new JavaScript API which will allow for playable "First Person Shooter" (aka FPS) games, and other use cases, for HTML5 games.
Vince Scheib, Chrome engineer and veteran of the games development industry, has kicked off work back in June 2011 with an email to the public-webapps list. A recent update from Vince, sent in Sept 22, 2011, hints at a work in progress implementation for Chrome.
The draft specification for Mouse Lock API is available for review. It is proposed that the Web Events Working Group adopt the Mouse Lock spec.
Tracking progress for the spec is easy, with bugs available at W3C bug tracker, Chromium issue tracker, WebKit bugzilla, and the Mozilla bugzilla.
From the draft spec:
"""
The Mouse Lock API provides for input methods of applications based on the movement of the mouse, not just the absolute position of a cursor. A popular example is that of first person movement controls in three dimensional graphics applications such as games. Movement of the mouse is interpreted for rotation of the view-port, there is no limit to how far movement can go, and no mouse cursor is displayed.
Mouse Lock is related to Mouse Capture. Capture provides continued event delivery to a target element while a mouse is being dragged, but ceases when the mouse button is released. Mouse Lock differs by being persistent, not limited by screen boundaries, sending events regardless of mouse button state, hiding the cursor, and not releasing until an API call or specific release gesture by the user.
"""
Example code
x = document.getElementById("x");
x.addEventListener("click", mouseClick);
x.addEventListener("mousemove", mouseMove);
function mouseClick(e) {
// Request that mouse be locked.
document.lockMouse(x);
// If successful the mouseMove handler will continue
// to be called no matter how the mouse is moved.
// The cursor will be hidden. No other elements or
// system applications will be the target of mouse events.
}
function mouseMove(e) {
// .movementX/Y are valid normally as the mouse hovers
// over an element. But when the mouse is locked the
// mousemove event continues to fire whenever the mouse
// moves.
console.log(e.movementX + ", " + e.movementY);
}
A call to lockMouse may trigger a user agent to prompt the user for permission.
Both movementX and movementY provide the change, or delta, in position of the mouse. For example, movementX would equal eNow.screenX - ePrevious.screenX.
Summary
Adding Mouse Capture to the open web platform will enable first class FPS games. Along with WebGL and Fullscreen APIs, we'll see the emergence of a new class of web connected games.
I encourage you to follow along with the issues in the bug trackers and voice your support for Mouse Capture API!