Abusing Firefox OS

and HTML5 games

for fun and profit

Reject.JS

Andrzej Mazur / @end3r / Enclave Games
Berlin, September 12th 2013

About me

Andrzej Mazur

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

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?

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

Web Audio API

Performance

Performance
  • Hardware access

Monetisation

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

Offline

Offline
  • Packaged app
  • Hosted with storage

Let's start with the Fox

What does the fox say?

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

Marketplace

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

Prepare your game

for the Fifefox 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

Rogers revisited

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

Wrapping up

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

onGameStart 2013

HTML5 game dev conference - onGameStart.com

18-20th September - Warsaw, Poland

onGameStart 2013

First 5 to tweet this will get the tickets:

"#RejectJS I want to go to @onGameStart!"

Thanks!

Andrzej Mazur / @end3r / Enclave Games

Ender Efka @end3r