HTML5 Game Creation and

Construct 2

By Ash Blue / @ashbluewd
and Harald Kirschner / @digitarald

First... Why HTML5 games?

Every problem now has a solution

Compile/Wrap Solutions

Packaging apps is simple and usually straightforward

Insanely flexible prototyping

Prototype, build, test, patch, then repeat

Lots of solutions to move your games forward

Code Driven Solutions

Complex games with architecture


Positives

A Dragon Named Coal custom animation tool written in less than two weeks (view online)

  • Complex tools
  • Online server integration
  • Complex task running

Negatives

CrossCode is a great game, but custom rolled

  • Previous experience
  • Massive investment
  • Huge risk and reward

Recommendations

Personally recommended code engine solutions

GUI Driven Solutions

No programming required


Positives

ReVeN was built with Construct 2
(successful Kickstarter)

  • Focus on game design
  • Avoid technical installation
  • Instant compiling

Negatives

Complex games in a GUI is like running the Death Star

  • Complex development = hell
  • Folds under complexity
  • Asset management
  • No HTML / CSS

Recommendations

Personally recommended GUI game solutions

GUI Creation Demo

Here we go!

Compiling Native to the Web

Hand-written JavaScript is great, but has it's limits.

The Toolchain

Made by Mozilla, adopted by the web.

asm.js

Strict subset of JavaScript, easy to optimize that allows JS engines to Ahead-of-time-compile asm.js code into very performant native code

Emscripten

  • Open source compiler toolchain
  • Cross-compiles C/C++ into JavaScript/asm.js

The Promise

Emscripten + asm.js let you run your C/C++ code in web browsers, approaching native speed

Sounds great, how can I use it?

It is just another export setting for game developers!

Libraries

Showcases

Actual games!

Bananabread

Monster Madness by Trendy

When would you still write JavaScript?

Intro Firefox Apps Ecosystem

From Firefox OS to Marketplace

Firefox OS

App Development

Tools

    {Your Tools} + Firefox DevTools + App Manager

Skills

HTML, CSS, and JavaScript

Good practices

  • Mobile first
  • Offline first
  • Feature detection
  • Localize

Firefox Marketplace

Monetization

Developers Making Money

=

A Healthy Ecosystem

Choose your business model

  • Paid Apps
  • Freemium
  • In-app payments
  • Planned: Subscriptions

marketplace.firefox.com

Submit your Game!

THE END

By Ash Blue / @ashbluewd
and Harald Kirschner / @digitarald