GDC Sessions for HTML5 games on web and mobile

GDC sessions that caught my eye related to building games on web tech:

Native Apps? With HTML5? Yes You Can! (Presented by Google)
Joe Marini  |  Developer Advocate, Google
... Chrome Packaged Apps platform allows the creation of native app experiences using HTML5 technologies that work offline by default, have access to native platform features, and can run across a variety of operating systems.

Fast and Awesome HTML5 Games (Presented by Mozilla)

Vladimir Vukicevic  |  Engineering Director, Mozilla Corporation
Alon Zakai  |  Senior Researcher, Mozilla Corporation

... JavaScript tooling and execution allow near-native-code speeds. Combined with standards such as WebGL, Web Audio, and the rest of the HTML5 stack, the modern web is emerging as a platform for high-quality games ...

Multiplatform C++ on The Web with Emscripten
Chad Austin  |  Technical Director, IMVU
Emscripten is a compiler of LLVM bitcode into JavaScript. With Emscripten, programs written in C++ can run straight from your web browser, and no plug-ins are required. ... why IMVU has chosen Emscripten as part of its multi-platform engine strategy ...
(Tragically, a time conflict with 'Fast and Awesome HTML5 Games' by Mozilla, which overlaps content wise)!

Nintendo Wii U Application Development with HTML and JavaScript

Ryan Lynd  |  Senior Software Engineer (NST), Nintendo Software Technology
Kevin McCullough  |  Software Engineer, Nintendo of America
Takeshi Shimada  |  Deputy General Manager, Software Environment Development 
... HTML and JavaScript have empowered a whole new wave of developers that have previously been excluded from Nintendo console development - until now! This session will introduce a new way of rapidly developing Wii U applications that takes full advantage of unique Wii U features while reducing development times significantly.


Game Development with Google Cloud Platform (Presented by Google)

Yanick Belanger  |  Server Architecture Lead, Electronic Arts

Ryan Boyd  |  Developer Advocate, Google

Chris Elliott  |  Solutions Architect, Google

Dan Holevoet  |  Developer Programs Engineer, Google

Momchil Kyurkchiev  |  CEO, Leanplum

Michael Manoochehri  |  Developer Programs Engineer, Google

Luca Martinetti  |  Founder and CTO, Staq Inc.

Google Cloud Platform provides everything you need to build, run, and scale social, mobile, and online games. Already, tens of thousands of popular applications like SongPop, Angry Birds, SnapChat, and Legend of Monsters ...

Supercharge Your Game With YouTube (Presented by YouTube)

Satyajeet Salgar  |  Product Manager, YouTube Live & Sports
Ibrahim Ulukaya  |  Developer Programs Engineer, YouTube
Jarek Wilkiewicz  |  Developer Advocate, YouTube
... By integrating your game with YouTube, you can share rich and authentic game experiences that are more likely to convert viewers into gamers than any other medium. In this session, we will highlight integration examples and best practices with special focus on mobile. We will also give you a sneak peek at our latest live streaming platform APIs. ...

HTML5 Cross-Platform Game Development: The Future is Today (Presented by Ludei)
Ibon Tolosana  |  CTO, Ludei
HTML5 is finally ready for cross-platform game development. We'll explain best practices for HTML5 game development, case studies and how to overcome issues to make HTML5 games work.

Rapid Development of High Performance Games for Mobile and Web
Ricardo Quesada  |  Software Architect, Zynga
This talk will be about the cocos2d JS, a complete toolchain for developing multi-platform games for both the Web and Mobile, which goes all the way from rapid prototyping to a finished high performing game. There are three main components: a game engine (cocos2d), a physics engine (Chipmunk), and a visual editor (CocosBuilder). For the web, no plugins are required. For mobile, it uses JavaScript bindings for the C/C++ version of cocos2d and Chipmunk, and achieves a performance 10 times faster than other JS engines/JS accelerators. ...

HTML5 Audio: Coming to a Mobile Game Near You!
Jory Prum  |  Sound Guy, studio.jory.org
... possibilities the new Web Audio API enables audio developers when building games for the web. ... With the adoption of the new W3C's new Web Audio API (available in Chrome, Safari, and iOS 6), tremendous possibilities exist, ranging from simple audio playback to object- and event-triggered audio. There are advanced filtering and reverb capabilities built in, 3D positional panning, and all available with extremely low latency. ...

Have fun at GDC!

Chrome's FPS Histogram

Eberhard Gräther has improved the FPS meter in Chrome. I particularly like the histogram added on the right hand side. It allows you to easily see how long your frames are taking, and if your frame rate is bouncing around between different values.

You can check it out by

1. Opening up Chrome's developer tools (3 bar menu in upper right, Tools, Developer Tools)
2. Opening up the options (gear menu in bottom right)
3. Enabling 'Show FPS Meter' in the rendering section.

Or, in about:flags you can enable it always.

It's handy to see, e.g. when you are missing some frames and oscillating between 30 and 60fps:

State charts

Thanks to Bill Budge for pointing me to State Charts.

I've been carefully sussing out the logic of Chrome's Fullscreen controller into a finite state machine, mainly so that we can get a group to agree on exactly what we think it should be doing. Chrome can go fullscreen in numerous ways: users entering and exiting via a menu or button, web pages making the transition (e.g. when you make a video fullscreen by clicking on it in a page), extensions, a special mode on Mac, and Windows 8 Metro Snap. Most of these include asynchronous transitions, and all API initiated transitions must be serviced (even if we're 'in the middle' of another transition).

Initially the diagram resembled a flying spaghetti monster, I've been winnowing it down discarding states we can design out of the naive total possibility space. But, it's also much simpler to notate using clustering and history offered in state charts.

BTW, state charts are also included in UML state machines.

Pointer Lock (Mouse Lock) shipped in Chrome

Pointer lock has shipped with Chrome 22, it's out of Beta and releasing on time! Fancy demo first, check out Mozilla's First Person Shooter Demo.

Pointer lock offers the ability to hide the mouse cursor and use movement for controlling the camera without bumping into the edge of the screen or moving off the browser window. I've been working on it for some time, including writing the Pointer Lock specification.

It's been a long path. Things started with early prototypes and discussions of mouse lock in standards lists (and more, as it was renamed to pointer lock). Not everyone in the browser community was ready to just jump on board. It took some explaining, and still there were the those who think "Browsers are for looking at static documents, not web applications! This API is too powerful for the web." Also, people who wanted more, to the point of impracticality.

One challenge of specification was that I limited the resolution to be the same as mouse movement events without pointer lock. A direct connection to a high resolution mouse offers higher precision unaltered by an operating systems acceleration, or 'ballistic' algorithms. Sounds great, but how can this be specified, calibrated, and offered across browser vendors and operating systems? I stuck with keeping it simple and producing the exact same mouse movements received today, but without the limits of screen boarders or moving out of an application's focus area. More details in the spec FAQ.

I was pleased when David Humphrey jumped onto the Mozilla Issue. He is a professor at Seneca College and implemented Pointer Lock in Mozilla as a class project. They did great work, and eventually shipped to Firefox 14 a bit before Chrome.

One of the differences is that Firefox only allows pointer lock when pages have made an element full screen. This provides good security shelter, as Fullscreen had already been rigorously designed, implemented, and tested due to a real security threat (tricking a user to enter data into a website pretending to be another application). It was important to me to ship Chrome with non-fullscreen support on day 1, as I believe it to be a real need and wanted to discover security issues up front. The security policy in Chrome is split between the Chromium and WebKit open source projects, adding to that complexity.

On the topic of Fullscreen, there was a significant Pointer Lock API re-write in order to be as consistent as possible with the Fullscreen API. They do have many similarities, and are likely to be used at the same time by developers. However, I do lament using the Fullscreen style pointerlockchange and pointerlockerror events to notify a developer of success or failure. In my original specification I used callbacks. The advantage of callbacks is a guaranteed 1 to 1 correspondence of request and response. The events allow for cross talk between different bits code using the API, and are more fragile. On every event, code must validate if the event was due to a related request it had made (which it must keep track of).

With the help of Yuzhu Shen and others, we shipped an early version of Mouse Lock to Pepper plugins much earlier, including Native Client games. There security concerns were somewhat more relaxed as content using the API had to be published in the Chrome Web Store, as opposed to the open web. Via the store, we could have more control to remove content if it were misbehaving.

I'm looking forward to seeing new classes of applications implemented on the web using this API. ;)

What!? I had kids?

I started a new blog, What!? I had kids?, because the world needed another blog. And though I love my job I've had less ideas and/or motivation to write them up on Beautiful Pixels recently. I've been spending more time planning on how to have fun with the kids.

The current article, Strollers on Steps? is proper geekery of a topic at the levels you've come to expect from Beautiful Pixels. If you're more into color, try Colored Rice, or Food Colors in the Bathtub.

Perhaps some day there will be a magical post about both children and pixels.

Game Developers Conference 2012 presentation: The Bleeding Edge of Open Web Tech

I presented at GDC last week, and it went well. Here is a pre-recorded version of the talk. You can also check out the notes for the presentation.

JavaScript Pointer Lock (Mouse Lock) in Chrome Developer Preview

Mouse Lock is the canonical term for when a game (or other application) removes the mouse cursor from view and interprets mouse motion for something else, e.g. looking around in a 3D world. To date this has not been possible for web applications without a plugin, which makes many game genres and other applications just terrible to use. (e.g. forcing users to drag the mouse button to pan the view, while a native application would use the mouse button for something else, e.g. interacting with the world.).

Good news: I've been working on a w3c specification to address this. The feature is available for developers to experiment with now in Chrome (details below). And, a FireFox implementation is on it's way too, thanks primarily to David Humphrey using it as a class project.

Today the first Chrome Canary build is available to try the feature out:

• Get a build.
• Chrome Canary builds auto-update daily and install without interfering with your normal installation of Chrome, they're the way to go since they're so easy. Unless your on Linux, where you need to just get a recent Linux Build.
• Enable pointer lock.
• Navigate to about:flags, find Enable Pointer Lock, and restart (there's a button below).
• Try a demo.
• http://media.tojicode.com/q3bsp/ is a nice one from Brandon Jones and what you see in the screenshot above. It's a quake 3 BSP viewer.
• Others are sure to show up soon, minutes after landing the keystone WebKit patch I received a few IMs and emails from excited developers. 
• Go Fullscreen. (more on that later)
• In Brandon's demo find the fullscreen button in the bottom right corner. (It has to be JavaScript initiated fullscreen, not chrome's "presentation mode".)
• Allow the site to disable your mouse cursor.
• This setting is remembered for each site, and can be forgotten in Chrome's preferences / content settings.
• Read some doc https://developer.mozilla.org/en/API/Mouse_Lock_API.

There's a lot that will be changing with this. First, I have several issues still to deal with in the WebKit implementation, a security review will certainly find more, and oh yeah we're going to overhaul the spec to be as identical as possible to the Fullscreen spec.

Some have asked if pointer lock will be forever restricted to fullscreen mode. No, in fact by the time the JavaScript bindings ship without developer flags I'm hoping to have removed the restriction, and if not then soon after. The only real requirement is that the user not suffer from a poorly behaving website. At the moment that means if a site spams lock requests that we require a user-gesture (e.g. clicking on the web page content, or pressing a key). Fullscreen currently requires the same, so we hide in it's shadow, but I'll implement the check even in windowed mode.

Chrome 19 is the earliest JavaScript pointer lock could ship without a developer flag, but it's predicated on many things coming into place. However, Native Client apps have been able to use it since Chrome 16.

Developers interested in the nitty gritty implementation details can see the chromium bug http://code.google.com/p/chromium/issues/detail?id=72754. To follow along, please only star the issue (top left). If  you've made awesome demos and add this feature, drop a comment here. ;)

Happy locking.