Mouse Lock for HTML5 FPS games

Sponsor: Register today for New Game, the conference for HTML5 game developers. Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now!

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. 

    // 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.


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!

Popular posts from this blog

  • Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! This is the second article in a Box2D series, following the Box2D Orientation article. The Box2DWeb port of Box2D contains a nice example to show off the basics of integrating physics simulations into your web app. This post will provide a walkthrough of the example, explaining the high level concepts and code. First, let's see the example in action. The code for the above is open source and available on GitHub. It was adapted from Box2DWeb's example . Animating Before we look at Box2D, it's important to understand how the above simulation is animated. You might think setInterval or setTimeout is
    Keep reading
  • In which I port a snazzy little JavaScript audio web app to Dart , discover a bug, and high-five type annotations. Here's what I learned. [As it says in the header of this blog, I'm a seasoned Dart developer. However, I certainly don't write Dart every day (I wish!). Don't interpret this post as "Hi, I'm new to Dart". Instead, interpret this post as "I'm applying what I've been documenting."] This post analyzes two versions of the same app, both the original (JavaScript) version and the Dart version. The original version is a proxy for any small JavaScript app, there's nothing particularly special about the original version, which is why it made for a good example. This post discusses the differences between the two implementations: file organization, dependencies and modules, shims, classes, type annotations, event handling, calling multiple methods, asynchronous programming, animation, and interop with JavaScript libraries. F
    Keep reading
  • Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes components, Then comes elements, Then comes the interop with the node dot bind. Angular , a super heroic MVC framework, and Polymer , polyfills and enhancements for custom elements built on top of Web Components, can live harmoniously in the same app. This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart . Angular and Polymer I get asked "Should I use Angular or Polymer?" a lot. My answer is, "Yes". That is, both libraries have distinct strengths, and you can use both in the same app. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services. Here are som
    Keep reading