Create games using HTML5

Created by Aaron McLeod

Twitter: @agmcleod


  • Benefits
  • Downsides
  • Canvas or WebGL?
  • Audio
  • Performance Tips
  • Tooling
  • Getting started




Users tend to play most web games for free.


Canvas or WebGL?

Performance differences between the two

Canvas WebGL

Sprite batching

Reasons to use the canvas

  • Super easy drawing API
  • Really easy to scale your drawings, and have it look amazing
  • Better support across devices. As WebGL doesnt run in mobile safari

Benefits of WebGL

  • Faster
  • More advanced features
  • GL SL
  • Your best and almost only option for 3d

To Scale (canvas)

Up Scaled 4x (canvas)

Up Scaled 4x(WebGL)


  • Web Audio API
  • Mobile
  • Position Audio

Dealing with JS Performance

Aaron, make javascript go faster!

The little things add up

Be smart with your garbage collection

Apply traditional game dev optimizations

  • Draw only what is on the screen
  • Where possible, only update objects on the screen
  • Limit heavy calculations


ASM.js & Emscripten

“The asm.js programming model is built around integer and floating-point arithmetic and a virtual heap represented as a typed array”
- ASM.js spec

            // HEAP32 is a Int32Array
            HEAP32[p >> 2]|0

Emscripten is an LLVM to JavaScript compiler.

Low Level Javascript

            struct Point {
              int x, y;

            let Point p;
            p.x = 10;
            p.y = 50;

            let Point *a = &p;
            a->x = 20;
            const $M = require('memory');
            const $I4 = $M.I4, $U4 = $M.U4;
            const $SP = $U4[1] -= 2;
            $I4[$SP] = 10;
            $I4[$SP + 1] = 50;
            var a = $SP;
            $I4[a] = 20;
            $U4[1] += 2;

My thoughts on Emscripten

Cocoon JS

  • Device Motion
  • Supports Controller/Gamepad API
  • Ads
  • InApp Purchases


  • Phaser - Canvas & WebGL
  • Turbulenz - Canvas & WebGL
  • MelonJS - Canvas
  • Animation Support
  • Object pooling
  • Physics & Math support
  • Texture packing
  • Tiled map editor
  • Screens/game states (Title screen, play screen, pause)
  • Simplistic camera, can have it follow an entity as it moves around
  • Spine (skeletal animation). Though the implementation is very early.

So how to get into games?


Aaron McLeod

Twitter: @agmcleod