Abusing Firefox OS

and HTML5 games

for fun and profit

Mozilla Festival 2013

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

Andrzej Mazur

Andrzej Mazur

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

Case study: Monster Wants Candy

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
Phaser
  • 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

Marketplace

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

Prepare your game

for the Firefox OS platform

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

Marketplace Form

Let's start with the Fox already

What does the fox say?

Get the game

Monster Wants Candy

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

Validate the manifest file

Validate the manifest file

Test App Validator

Test in the browser

Firefox OS Simulator

Firefox OS Simulator as a plugin in the browser

Grab your device

Geeksphone

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

Debug

Firefox OS App Manager

Firefox OS App Manager (Firefox 26+), Dev tools + Simulator

Submit the game

Submit Form

Submit form

Case study v2: Captain Rogers

Captain Rogers

In the Marketplace

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

On the actual device

Captain Rogers on Firefox OS Keon

Lessons learned

  • Very easy to adapt your game
  • Documentation is ready
  • Attend events to gain experience
  • Ask questions, give feedback

Monetisation

Monetisation
  • Mozilla Marketplace
  • In-app purchases
  • Advertisements
  • Licensing

The fun part vs the profit part

  • Work for fun for yourself
  • Work for clients to earn money
  • Balance those two
  • ...
  • PROFIT

Promote yourself and your games

Promote yourself

Distribution platforms

News sites

Articles

Competitions

Events

Wrapping up

  • Easy to build for
  • Easy to publish
  • No limitations by the platform
  • You build for the Web, not for Firefox OS
  • Firefox OS App == Web App

Resources

Thanks!

 

http://end3r.com/slides/mozfest13

 

Andrzej Mazur / @end3r / Enclave Games

Ender Efka @end3r