Abusing Firefox OS

and HTML5 games

for fun and profit

meet.js Summit 2013

Andrzej Mazur / @end3r / Enclave Games
Gdańsk, October 19th 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.

Debug

Firefox OS App Manager

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

Optimize

[firefox ap == the web, so advices re for html5 games, not firefox os games]

Whole-pixel rendering

ctx.drawImage(myImage, 0.3, 0.5);

Cache drawing in an offscreen canvas

myEntity.offscreenCanvas = document.createElement(“canvas”);
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext(“2d”);
 
myEntity.render(myEntity.offscreenContext);

Use moz-opaque on the canvas tag

<canvas id="mycanvas" moz-opaque></canvas>

Scale canvas using CSS3 Transforms

var scaleX = canvas.width / window.innerWidth;
var scaleY = canvas.height / window.innerHeight;
 
var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);
 
stage.style.transformOrigin = "0 0"; //scale from top left
stage.style.transform = "scale(" + scaleToFit + ")";

Multiple canvases for layers

More

Optimize for HTML5 games, not Firefox OS

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

Resources

Thanks! Questions?

 

http://end3r.com/slides/summit13

 

Andrzej Mazur / @end3r / Enclave Games

Ender Efka @end3r