Case study: Craigen

marketplace.firefox.com/app/craigen

Craigen's 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

• Mobile operating system written in JavaScript
• Created and maintained by Mozilla
• Open source, available on GitHub
• Hardware platform for the mobile web

Firefox OS facts

• Growing markets
• Alternative for feature phones
• Affordable devices
• Simple development
• Build for the Web, not only Firefox OS

List of APIs

WebTelephony, Vibration API, WebSMS, Idle API, Screen Orientation, Settings API, Power Management API, Mobile Connection API, TCP Socket API, Geolocation API, WiFi Information API, Device Storage API, Contacts API, Mouse Lock API, Open WebApps, WebBluetooth, Network Information API, Battery Status API, Alarm API, Browser API, Time⁄Clock API, Web Activities, Push Notifications API, Permissions API, WebFM API, FileHandle API, Network Stats API, WebPayment, IndexedDB, Archive API, Ambient light sensor, Proximity sensor, SystemXHR, ...

Wibration API

window.navigator.vibrate(200);

Screen orientation

checkOrientation = function() {
	if(window.orientation == 0 || window.orientation == 180) {
		// "rotate your device"
	}
	else {
		// "keep playing"
	}
}

Page visibility

document.addEventListener("visibilitychange", function() {
	if(document.hidden) {
		// "app is not visible"
	}
	else {
		// "app is visible"
	}
})

Permissions

"permissions": {
  "contacts": {
    "description": "Required for autocompletion in the share screen",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}

Optimize

Firefox OS game == HTML5 game

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,
Firefox OS support will come along the way

Testing the game

App Manager

about:app-manager

App distribution

Freedom

Install from the Web

var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
	// "App was installed"
};
installapp.onerror = function() {
	// "App was NOT installed,
	// check the installapp.error.name for more info"
}

Dynamic search

Prepare your game
for Firefox Marketplace

Manifest file and submit form

Manifest file

{
    "name": "Name of the app",
    "description": "Description of the app",
    "launch_path": "/",
    "icons": {
        "128": "/img/icon-128.png"
    },
    "developer": {
        "name": "Enclave Games",
        "url": "http://enclavegames.com"
    },
    "default_locale": "en"
}							

Submit form

marketplace.firefox.com/developers/submit/