Abusing Firefox OS

and HTML5 games

for fun and profit

Andrzej Mazur / @end3r / Enclave Games
Warsaw, September 20th 2013

About me

Andrzej Mazur

Enclave Games
js13kGames compo
Gamedev.js meetups
dev.end3r.com blog
twitter: @end3r
github: end3r

Case study - Captain Rogers

https://marketplace.firefox.com/app/captain-rogers Captain Rogers

Andrzej Mazur (coding, Enclave Games)
Robert Podgórski (graphics, Blackmoon Design)

Rogers story

Very simple, but polished game
Built with ImpactJS game engine
Prepared and optimized for Firefox OS devices
Submitted to the Marketplace in minutes

Firefox OS

Mobile operating system
Developed by Mozilla
Pure HTML5 and JavaScript
Open sourced
Freely customizable
Targeted for low-end devices
"New old" ecosystem

Is HTML5 ready for gaming?

HTML5: The good parts

Good parts

Free
One code base
Thousands of developers already
True cross platform
For every device with a browser
Distribution through URLs
Ease of use, plugin-free
Open source code, easy to learn
Instant updates
Store independent

Firefox OS

The good parts of HTML5 enhanced by the technology

Firefox OS == mobile Web

The weak spots

HTML5 weak spots

Audio API
Performance
Monetisation
Offline

Web Audio API

Performance

Hardware access

Monetisation

Mozilla Marketplace
In-app purchases
Advertisements
Licensing

Offline

Packaged app
Hosted with storage

Let's start with the Fox

Test in the browser

Firefox OS Simulator as a plugin in the browser

Grab your device

Geeksphone Keon and Peak, ZTE Open, Alcatel OneTouch Fire, LG Leo, more coming soon.

Optimize

Whole-pixel rendering
Cache drawing in an offscreen canvas
Use moz-opaque on the canvas tag (Firefox only)
Scale canvas using CSS3 Transforms
CSS for large background images
Multiple canvases for layers

Source: Mozilla Hacks

Firefox Marketplace

Market for your apps
Packaged or self hosted
Instant install button
Almost no competition

Prepare your game

for the Fifefox OS platform

It's just HTML5!
Nothing new to learn
Manifest file and a submit process

The manifest file

manifest.webapp

{
    "name": "My App",
    "description": "My description goes here",
    "launch_path": "/",
    "icons": {
        "128": "/img/icon-128.png"
    },
    "developer": {
        "name": "Your name or organization",
        "url": "http://your-homepage-here.org"
    },
    "default_locale": "en"
}