Abusing Firefox OS

and HTML5 games

for fun and profit

Andrzej Mazur / @end3r / Enclave Games
London, October 26th 2013

Andrzej Mazur

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

What will You learn here?

Porting your HTML5 game to Firefox OS
Testing in the simulator
Testing on the device
Publishing in the Marketplace
How to earn money from HTML5 games

Slides online: end3r.com/slides/mozfest13
Slides download: end3r.com/slides/mozfest13.zip

Case study: Monster Wants Candy

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

Monster story

Very simple, but polished game
Built with Phaser game engine
Regular HTML5 game
Targeted for Firefox OS devices
Submitted to the Marketplace

HTML5 mobile game framework
Free, Open Sourced on GitHub
Renders using pixi.js (Canvas & WebGL)
Created by Richard Davey
Version 1.1 released yesterday (25.10.2013)

Firefox OS recap

Firefox OS

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

Firefox OS == mobile Web

Good parts of HTML5 enhanced by the technology
Hardware for your HTML5 apps
Every HTML5 website is a potential Firefox OS App

Firefox Marketplace

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

Prepare your game

for the Firefox 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"
}

The submit form

Let's start with the Fox already

Get the game

github.com/EnclaveGames/Monster-Wants-Candy

enclavegames.com/dl/candy.zip

Create the manifest

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"
}