Mobile HTML5 games

Mobile Warsaw #3

Mobile Warsaw #3

Andrzej Mazur / @end3r / Enclave Games

About me

Andrzej Mazur

What is HTML5?

  • Theoretically... a W3C specification.

What is "HTML5"?

  • JavaScript
  • CSS3
  • HTML5 APIs
  • WebGL
  • ...and all the cool stuff in the browser!

Is HTML5 ready?

Is HTML5 ready for gaming?

The weak spots

HTML5 weak spots

  • Audio API
  • Performance?
  • Monetisation?
  • Offline?
  • Development environment?
  • Limited availability?

Audio API

No sound - Audio API broken

...is still broken on mobile.

Performance

Performance
  • Limited hardware access
  • HTML5 != Native
  • Multiplatform vs one platform

Monetisation

Monetisation
  • Publishers
  • Distribution platforms
  • Licensing
  • Advertisements
  • Client work
  • Native marketplaces

Working Offline

Offline
  • LocalStorage
  • Cookies
  • Web SQL Database
  • AppCache
  • IndexedDB

Development Environment

Development environment
  • Browser!
  • Text editor (or IDE)
  • Web development tools (like Firebug)
  • Engine specific tools

Availability

Devices: phones, tablets, laptops, desktop PCs, Smart TVs, handheld devices, consoles, fridges, microwaves...

Operating systems: iOS, Android, Blackberry, Windows Phone, Tizen, Firefox OS... Windows, Mac, Linux...

...a browser is all you need!

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

Avoid mistakes

Avoid mistakes

  • Mobile first
  • Don't code for one browser only
  • Feature detection, not browser sniffing
  • Build finished products, not demos
  • Not iOS and Android killer, but new alternative
  • Not a silver bullet, just a tool

Is HTML5 ready for gaming?

All the tools are already here

HTML5 APIs

Bananabread
  • Gamepad
  • Pointer Lock
  • Fullscreen
  • Storage
  • Geolocation

Technology demos

Quake 4

Quake 4, Bananabread, Epic Citadel...

Full-blown games

Save The Day

Save The Day, HexGL, Fieldrunners, Emberwind, Cut The Rope, Angry Birds...

Game engines

Weltmeister
  • ImpactJS
  • Turbulenz
  • Construct 2
  • EaselJS
  • Crafty
  • Game Maker
  • Codos2D-HTML5
  • MelonJS
  • Unreal Engine
  • Delight

Community

Competitions, conferences, websites

The future of HTML5 game dev is bright

Future

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

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.

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!

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 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 the 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

  • Fast growing market
  • Publishers are learning
  • Huge potential
  • Grab the chance
  • Outrun the competition

Thanks! Questions?

Andrzej Mazur / @end3r / Enclave Games

Ender Efka