Tutorials

Firefox OS

Publishing to Firefox OS

Firefox OS is the new mobile operating system from Mozilla. And currently, PlayCanvas is the only 3D game engine targeting Firefox OS. If you publish your PlayCanvas game to PlayCanvas, you can play it quite happily via Firefox OS's bundled Firefox browser app. But what if your users want to install the game to their home screen and play offline without having to access it via the browser? Achieving this is easy with PlayCanvas and involves converting your exported game into a 'packaged app'.

Creating a Packaged App

A packaged app is essentially a ZIP file containing all the resources that make up your game. But wait, that's exactly what PlayCanvas generates when you export your game. But to create a valid packaged app for Firefox OS, you will need to include some additional files:

Create the Manifest

This file must be called manifest.webapp and be created in the root folder of your extracted and exported PlayCanvas game. An example manifest (taken from the Dungeon Fury game) is shown below:

{
    "name": "Dungeon Fury",
    "version": "1.0.2",
    "size": 4885341,
    "release_notes": "First release",
    "developer": {
        "name": "PlayCanvas",
        "url": "http://playcanvas.com"
    },
    "description": "Swipe your way to freedom in Dungeon Fury, the fun new 3D game from PlayCanvas that will test your reflexes to the limit! Knock down doors and counter attacks from brutish Orcs to escape!",
    "launch_path": "/game.html",
    "icons": {
        "128": "/icons/icon_128.png",
        "60": "/icons/icon_60.png"
    },
    "default_locale": "en",
    "fullscreen": true,
    "orientation": "portrait-primary"
}

A reference that fully documents this manifest format can be found on MDN.

Create App Icons

In the icons description in the manifest reference, it states you must include a 128x128 icon for inclusion in the Firefox Marketplace and a 60x60 icon to represent your app on the device. Place these images somewhere in your extracted PlayCanvas app folder and set the 'icons' property accordingly in your webapp.manifest.

Embed External Resources

There are potentially three files that must be copied into your app folder that are normally externally referenced by a PlayCanvas app:

The PlayCanvas Engine

The PlayCanvas Engine is referenced in your exported game's index.html. Search for a line of this form (bearing in mind your engine version may well be different):

    <script src="https://code.playcanvas.com/playcanvas-0.141.1.min.js"></script>

And convert it to this:

    <script src="playcanvas-0.141.1.min.js"></script>

And download the file to the root of your extracted PlayCanvas app.

The PlayCanvas Loading Screen Image

The PlayCanvas loading screen image is referenced in your exported game's index.html. Search for the following line:

    <a href="http://playcanvas.com" target="_blank"><img src="https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/images/logo/PLAY_FLAT_ORANGE3.png"/></a>

And convert it to this:

    <img src="PLAY_FLAT_ORANGE3.png"/>

And download the file to the root of your extracted PlayCanvas app.

The PlayCanvas Physics Engine

In your extracted app folder, locate and open data.js. Search for a line of the form:

    "libraries": ["https://code.playcanvas.com/ammo.3c2cc63.js"]

And convert it to:

    "libraries": ["ammo.3c2cc63.js"]

And download the file to the root of your extracted PlayCanvas app.

Re-zip Your Packaged App

You should now have a valid packaged app. Simply re-zip the files back into a file called package.zip and copy to a web location of your choice.

This site is translated by the community. If you want to get involved visit this page