First... Why HTML5 games?

Every problem now has a solution

• Web Audio API
• Tons of creator apps available
• Debugging and unit testing tools available
• Majority of cross browser issues are solved
• Security available with compiling
• Write once deploy everywhere (in theory)

Compile/Wrap Solutions

Packaging apps is simple and usually straightforward

• Several solutions form Intel
• Practically native performance on mobile
• Solves almost all cross-platform issues
• There are ways to get to almost any platform (XBox, PS, WII)

Insanely flexible prototyping

Prototype, build, test, patch, then repeat

• Grunt allows for complex tasking
• Bower for package management
• No plugins required
• Little extra effort to get people testing

Lots of solutions to move your games forward

• Tons of open source solutions
• Its not going away anytime soon
• HTML5 support is rapidly growing, will only improve

Code Driven Solutions

Complex games with architecture

Data driven games (RPGs, strategy, ect)

Positives

• Complex tools
• Online server integration
• Complex task running

• Working well for us on ADNC (animator, DB, editor)
• Multiplayer games (Don from Wizarding Academy, Francis procedurally generated server component)
• ADNC can build to mobile, web, and other platforms differently

Negatives

• Previous experience
• Massive investment
• Huge risk and reward

• Computer science background, AI, game engine architecture
• Can take months to years to complete a game's toolset, just like building a separate complex app

Recommendations

Personally recommended code engine solutions

• ImpactJS widely used, solid eninge, horrible tools (buy in price)
• Phaser is great, requires tile map editor and some heavy lifting, wraps pixi.js, keep your on eye on it
• Three.js is one of the few good libraries for rolling a 3d game (not much for 3d)
• Tangent: Don't make AAA 3D games with HTML5

GUI Driven Solutions

No programming required

• Prototypes
• Simple games
• Not a programmer

Positives

• Focus on game design
• Avoid technical installation
• Instant compiling

• Abstracts tool development away for most games (plugins available)
• Click install done
• Avoid task setup headaches

Negatives

• Complex development = hell
• Folds under complexity
• Asset management
• No HTML / CSS

• Data management, source code denied, crappy API docs
• As complexity grows you have to hack the GUI more
• Loading in custom data, slow parsing, difficult to get things cached in memory
• Incompatible with some compilers, insanely complex for a HTML/CSS gui

Recommendations

Personally recommended GUI game solutions

• Game Maker Pro is a great 2D solution, uses a plugin (working on HTML/CSS tools)
• Goo Engine is the best 3D tool I've use (Unity like). Playcanvas worth noting
• Construct2 is probably the leading GUI solution for 2d HTML5 games

Compiling Native to the Web

Hand-written JavaScript is great, but has it's limits.

The Toolchain

Made by Mozilla, adopted by the web.

asm.js

Strict subset of JavaScript, easy to optimize that allows JS engines to Ahead-of-time-compile asm.js code into very performant native code

Emscripten

• Open source compiler toolchain
• Cross-compiles C/C++ into JavaScript/asm.js

• Graphics: OpenGL ES2 - WebGL
• Audio: OpenSL/SDL - Web Audio
• Networking: WebSockets, WebRTC for P2P
• Storage: In-memory, IndexedDB, cross-compiled SqlLite

The Promise

Emscripten + asm.js let you run your C/C++ code in web browsers, approaching native speed

Sounds great, how can I use it?

It is just another export setting for game developers!

Libraries

• Box2DWeb – Port of Box2D
• Ammo.js - Port of Bullet Physics
• Both used by PlayCanvas
• … many more

• More: Webkit.js just announced; Ruby, LUA, Python; SQLLite, Poppler (PDF) …

Showcases

Actual games!

Bananabread

• Multiplayer via WebRTC

Monster Madness by Trendy

When would you still write JavaScript?

Intro Firefox Apps Ecosystem

From Firefox OS to Marketplace

Firefox OS

App Development

Tools

• {Your Tools} + Firefox DevTools + App Manager

Skills

HTML, CSS, and JavaScript

Good practices

• Mobile first
• Offline first
• Feature detection
• Localize

Firefox Marketplace

Monetization

Developers Making Money

=

A Healthy Ecosystem

Choose your business model

• Paid Apps
• Freemium
• In-app payments
• Planned: Subscriptions

marketplace.firefox.com

Submit your Game!