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

HTML5: The 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?

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

Debug

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

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

The submit form

Rogers revisited

In the Marketplace

On the actual device

Lessons learned

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