Abusing Firefox OS

and HTML5 games

for fun and profit

Web-5 Conf

Andrzej Mazur / @end3r / #web5conf / Enclave Games

About me

Andrzej Mazur

Firefox OS

Firefox OS

  • Mobile operating system
  • Developed by Mozilla
  • Pure HTML5 and JavaScript
  • Freely customizable
  • Open sourced
  • Targeted for low-end devices
  • "New old" ecosystem

Test in the browser

Firefox OS Simulator

Firefox OS Simulator as a plugin in the browser

Grab your device

Geeksphone

Geeksphone developer preview, more coming soon.

Optimize

  • Whole-pixel rendering
  • Cache drawing in an offscreen canvas
  • Use moz-opaque on the canvas tag (Firefox only)
  • Scale canvas using CSS3 Transforms
  • CSS for large background images
  • Multiple canvases for layers

Source: Mozilla Hacks

Firefox Marketplace

Marketplace

  • Just before the official launch
  • You can add apps already!
  • Packaged or self hosted apps
  • Open sourced platform
  • Instant install button
  • Almost no competition
  • ...waiting for your content!

Is HTML5 ready for gaming?

Is HTML5 ready for gaming?

The good parts

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

The weak spots

HTML5 weak spots

  • Audio API
  • Performance?
  • Monetisation?
  • Offline?
  • Development environment?
  • Limited trough technology
  • Open source code
  • HTML5 vs native

Avoid mistakes

Avoid mistakes

  • Mobile first
  • Don't code for one browser only
  • Feature detection, not browser sniffing
  • Build finished products, not demos

The future of HTML5 game dev is bright

Future

  • Faster browsers
  • Distribution platforms
  • Better game engines
  • HTML5 APIs (Payment, Audio)

Prepare your game

for the Fifefox OS platform

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

Marketplace Form

Case study - Captain Rogers

Captain Rogers https://marketplace.firefox.com/app/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

In the Marketplace

Captain Rogers in Firefox Marketplace

On an actual device

Captain Rogers on Firefox OS Keon

Lessons learned

  • It's very easy to adapt your game
  • Documentation is ready
  • Attend events to gain experience
  • Ask questions, give feedback
  • Use the opportunity

Wrapping up

  • New possibilities
  • Growing market
  • Huge potential
  • Bright future
  • Fun! Games!
  • Keep calm and keep on building awesome games
  • You can be an early adopter
  • Grab the chance
  • Outrun the competition

Thanks! Questions?

Andrzej Mazur / @end3r / #web5conf / Enclave Games

Ender Efka