Preparing for Firefox OS

Firefox OS is an entire mobile operating system built around open web technologies! The OS has been built from the ground up to allow HTML5 and Javascript to unleash the full potential of the device hardware. Read on to learn more about Firefox OS and how you can start porting your existing web apps to the platform today!

Firefox OS

Firefox OS is a mobile operating system created from scratch by Mozilla. It evolved from an empty GitHub repository into a fully-blown open sourced system in more than a year, which alone is quite impressive. Built from the bare idea to the final product, shipped by the companies worldwide. Let's see why this is so special and why should you even care.

The most important thing about Firefox OS is the technology used - it's just the Web! All the front-end developers and JavaScript programmers can now easily create HTML5 applications directly for the platform. The mobile web now has the technologies and hardware access it deserves. Web APIs allow you to "talk" directly to the device hardware using JavaScript, making it possible to take photos, send messages, or initiate calls.

Let's be clear about the target audience - it's not that Firefox OS will directly battle high-end devices with iOS and Android on board in highly developed countries. The main target is to provide smartphone experience to those who normally wouldn't have the chance to buy such a device. Phones with Firefox OS will be a cheap alternative to those who would like to switch from feature phones and dive into the web using modern browsers. There's a huge demand for this and Mozilla want to fill the gap!

It's the "new old" ecosystem as the web technologies are already well-known for thousands of JavaScript programmers and front-end developers. You don't have to learn a new language or development environment. Everything you know about the web can be used to create stunning Firefox OS applications. Porting your game is very simple and requires minimum efforts to achieve.

In this article I'll walk you through the whole process from having just a regular mobile HTML5 game, optimizing it for the Firefox OS device, and publishing the outcome in the Firefox Marketplace - I'll use Captain Rogers as an example.

Testing Firefox OS

There are two ways to test your game for Firefox OS - using a software simulator or by plugging in the actual device. Both are useful and you should start with the Simulator to see if the game is working. After that, pushing the game onto the device will ultimately battle-test it and help you get rid of all the bugs. Then you can focus on the publishing process.

Simulator

There is a way to test your game or application without the need of having an actual device in your hand. It's the Firefox OS Simulator and you can simply install it as a plugin in your Firefox browser. You won't be able to test touch controls, but at least you can see if the game works and behaves as it should. Using the simulator you can also push your application directly to the device.

Available Devices

If you really need your own device you can get it from Geeksphone. They are providing two developer preview phones - Keon and Peak. Those two devices are very similar to the final products which will be sold worldwide. First commercial devices are already announced: ZTE Open and Alcatel OneTouch Fire are offered by Movistar in Spain for a low price of 69 Euro (no contract, with 4 GB microSD card and 30 Euro for calls). Next on the list are Poland, Columbia, and Venezuela with more countries coming soon.

Firefox Marketplace

When you have an operating system on your device already it would be nice to install some apps on it. This is where the Firefox Marketplace comes in - Mozilla's store providing everything you need. The difference between iOS or Android stores and the Firefox Marketplace is that the last one is open and free. Everybody can run his own marketplace, you're not limited to the one and only place for distributing apps and games. You don't even have to direct people to the marketplace itself if you want them to install your game on their device - there's an API for that! Using the Open Web App API you can create a simple "install this app" button using an HTML button calling a few lines of JavaScript. End users will then be able to install the game directly on their device.

Marketplaces for Everybody

Mobile operators will provide marketplaces for their own clients with the apps targeted especially for them. This will also give them an opportunity to start earning money again and stop being just the data providers. It is important to understand that all players in the Firefox OS space can benefit from supporting the system.

Discoverability

There is a huge potential in the way web applications are built - you can search for content inside of them without the need to download them. As it's just HTML, CSS, and JavaScript you can look for anything you're interested in and you won't be limited to the title or description - it is indexable and searchable just like any web site is now.

Already Available

The best thing is you can add your apps and games already - the Marketplace is coming out of the beta stage and opening for customers, but it was available for developers for some time now. Both sides had the time to adjust accordingly to the environment and prepare themselves for the platform. There is almost no competition - I've found around 500 games in the Marketplace. It's hard even trying to compare it to the Apple's App Store where you can find hundreds of thousands of apps. Now is the best time to seize the opportunity, the Firefox Marketplace is awaiting your content!

Case Study - Captain Rogers

As I mentioned earlier I will show you the whole process of converting your regular HTML5 game to the fully working one optimized for the Firefox OS device and available for free in the Firefox Marketplace. The game Captain Rogers was built using ImpactJS and is very simple - you are the brave Captain Rogers and have to fly through an asteroid field to escape from the evil Kershan fleet. It was created as a collaboration between Enclave Games (Andrzej Mazur - coding) and Blackmoon Design (Robert Podgórski - graphics). The main focus was on making it small and simple yet fully functional and polished.

Optimize Your Game for Firefox OS

There are plenty of ways to optimize your game for the Firefox OS platform and most of them can be also applied to regular HTML5 games - it's web technology after all, right? Below you'll see some of the basic techniques that will quickly speed up the performance, make the game more flexible, or just make it look better.

Moz-opaque

The easiest way to speed up canvas rendering of the game on Firefox OS is to add the moz-opaque attribute to it:

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

If your canvas is not transparent or you don't have to show anything behind it, just set this attribute and it will automatically improve rendering times.

CSS Transform Scaling

Scaling canvas is important when you don't know the resolution of the target device. It would look weird if the game would take only one third of the screen, or worse when you'll see just half of it. This method is not for every type of game - if you want to preserve a pixel art you have to manage the scale differently, but for most games it should work. Here's the code responsible for scaling:

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

This will ensure that your game is filling the whole available space, but will preserve scale so the game won't be distorted. On large devices the game will look a bit blurry though, so remember to watch out for this.

Nearest-neighbour Rendering

If you're working on a pixel art game it's very important to have crisp pixels instead of a blurry ones - turn off smoothing using JavaScript and you're ready to go!

    
    var context = canvas.getContext(‘2d’);
    context.webkitImageSmoothingEnabled = false;
    context.mozImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;

Thanks to this you'll have your pixels as sharp as possible, so the players can fully enjoy the pixel art in your game.

Other Techniques

There are many more techniques to explore like using offscreen canvas, whole-pixel rendering, multiple canvases for layers, and other cool tricks - check out this incredibly useful article on Mozilla Hacks written by Louis Stowasser and Harald Kirschner. Some of the techniques covered in that article are used in the ImpactJS game engine, so you don't even have to implement it by yourself.

Prepare it for the Firefox Marketplace

There are two types of applications in the Marketplace - packaged and self hosted. The first type is just a .zip package containing all of the assets that will be uploaded to the Marketplace. The second type, self hosted, is a direct link to the game that you host on your own server. Packaged apps are allowed to get more access to the hardware, as they are delivered from a secure, Mozilla-known server, whereas self-hosted apps are easier to deploy and change.

Manifest File

For both types of apps the most important file is the
manifest.webapp containing all the needed information. A manifest file is just a simple JSON object from which all the data will be provided for the initial Firefox Marketplace settings:

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

You just have to provide very basic information like the name of the application, it's decription, provide icons to be shown in the Marketplace, basic information about yourself like developer name, and developer url, and at the end the default locale (i.e. the application default language version). You can validate the manifest file to be sure it's bug-free.

Permissions

The main difference between packaged and self hosted apps are the permissions - packaged apps can be privileged or certified. When you need access to the device's hardware like the camera or the contacts list you have to list everything in the permissions section.

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

Priviledged apps have access to Web APIs that have more permissions to access the hardware and user data on the device and are higher in the hierarchy than the usual web apps. There is also the highest rank called certified apps which have control over critical system functions like for example the default dialer - only Mozilla and partners provide those kind of apps.

Self Hosted Manifests

When you don't need access to the WebAPIs on the device and want to have easy and instant updates you can decide to host the game yourself. There are some things that you have to keep in mind to deliver your game without any problems.

Cache all your files to allow users to play the game offline and to save on traffic on your server. Do not cache the manifest file though as this could lead to issues when you want to update the game. The manifest file must have an extension .webapp and have to be served from the same origin. The Content-Type have to be set to application/x-web-app-manifest+json, UTF-8 encoding is recommended.

When using Apache just drop that line in your .htaccess file:

AddType application/x-web-app-manifest+json .webapp

On Nginix you have to edit the mime.types file and add similar line:

types {
    // ...
    application/x-web-app-manifest+json webapp;
}

For testing your app you can also use GitHub Pages for hosting. Mozilla worked with GitHub to have all the settings in place, just remember to have your manifest file's file name end in .webapp.

Uploading Your Game to the Marketplace

Time to add our game to the marketplace so people can find it easily on Firefox OS. We have our game ready to be submitted to the Firefox Marketplace - head over to the Developer Hub and login (or register) to get access. Look for the "Submit a new app" button - this will lead you to the submit form.

You'll have various options to choose from - whether your app is free or paid, the game is hosted or packaged, you'll also have a list of supported platforms. At the bottom there is a manifest validator that will ensure the manifest file is 100% correct. Another step is just filling the details like screenshots, other media, support information and app details. After that you're done - the game was submitted!

All you have to do now is wait to have your game accepted - it should't take longer than a few days. After that your game is published and available for everybody to see and play!

Looking through the admin panel you'll notice the statistics page where you'll find all the info about installs. Other options include editing an already submitted game, managing team members, compatibility, payments, status and versions. Keep an eye on user reviews as they are a great source of feedback!

Lessons Learned

As you can see it's very easy to adapt your game to Firefox OS and publish it in the Marketplace. The documentation is ready, all the needed information is there waiting for you. Is was a lot of fun working on Captain Rogers with Firefox OS in mind. I'm very curious how Enclave Games will be perceived in the Marketplace compared to other developers. If you have any opinions on the game itself (or want to test it on your device and give feedback), Firefox OS or the Marketplace feel free to discuss it in the comments!

Conclusion

You're on the edge of the fast growing mobile market with huge potential where publishers are learning fast that HTML5 is the technology of the future. There are endless possibilities, you just have to grab the chance, use the opportunity and outrun the competition!

It's unknown how it will work - I truly believe in the idea of having an HTML5 mobile operating system, but the future depends on the reaction of the market along with customers. One way or another we will have exciting times for HTML5 mobile development. Nothing here is wasted effort, as the games are running on all platforms and get special access on Firefox OS. Even if Firefox OS fails, you work is still compatible with the web rather than just one platform.

HIGHLIGHTS OF THE DAY