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

Popular posts from this blog

Lists and arrays in Dart

(This is Part 3 in a series about Dart. Check out Part 2, Function in Dart .) Warning : We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2011-12-22. Intro Dart is a "batteries included" effort to help app developers build modern web apps. An important "battery" is the bundled core Dart libraries, providing common and rich functionality. Dart is building a solution for large, complex web apps, and providing well tested, integrated, and common libraries is key to helping a web app developer be more productive out of the box. The Collection libraries are a crucial set of APIs that Dart developers get for free. Much more than simple arrays and maps, the Collection library includes standard ways to filter, iterate, inspect, compose, and sort your data. This post specifically looks at List<E> , Dart's ordered, indexable collection of objects. Aside: The Dart project is lucky
Read more

Converting Array to List in Scala

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d
Read more

Null-aware operators in Dart

Image
Three new language features just landed in the latest dev channel build of the Dart ! Collectively known as null-aware operators , these new features will help you reduce the code required to work with potentially null objects. I'm excited for these new abilities, because typing less is always a good thing. Read on to learn more, and be sure to try these new features on Dart Pad . ?? Use ?? when you want to evaluate and return an expression IFF another expression resolves to null. exp ?? otherExp is similar to ((x) => x == null ? otherExp : x)(exp) ??= Use ??= when you want to assign a value to an object IFF that object is null. Otherwise, return the object. obj ??= value is similar to ((x) => x == null ? obj = value : x)(obj) ?. Use ?. when you want to call a method/getter on an object IFF that object is not null (otherwise, return null). obj?.method() is similar to ((x) => x == null ? null : x.method())(obj) Yo
Read more