Developing Games

for Firefox OS

Hungarian Web Conference 2014

Andrzej Mazur@end3rEnclave Games
Hungarian Web Conference — Budapest, Hungary — November 8th 2014

HTML5 Game Developer

Andrzej Mazur

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

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

Firefox OS
  • 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


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": {
  "contacts": {
    "description": "Required for autocompletion in the share screen",
    "access": "readcreate"
  "alarms": {
    "description": "Required to schedule notifications"


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”);

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); = "0 0"; //scale from top left = "scale(" + scaleToFit + ")";

Multiple canvases for layers


Optimize for HTML5 games,
Firefox OS support will come along the way

Testing the game

App Manager



Adding new game


Firefox OS Simulator


Pushing to the device


Remote debugging


App distribution



Firefox Marketplace

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 for more info"

Dynamic search

App 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": ""
    "default_locale": "en"

Submit form

Marketplace Form

Wrapping up

Craigen in the Marketplace

  • Easy to build for
  • Easy to publish
  • Hardware platform for the Web
  • Create, test, publish, monetize!


Thanks! Questions?






Andrzej Mazur@end3rEnclave Games

Ender Efka @end3r