Create games using HTML5

Created by Aaron McLeod

Twitter: @agmcleod

http://agmprojects.com

Overview

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

Benefits

Downsides

Monetization

Users tend to play most web games for free.

Performance

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)

Audio

  • 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

Tooling

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');
            $M.set_memcheck(false);
            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

Engines

  • 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?

http://html5gameengines.com

Thanks!

Aaron McLeod

Twitter: @agmcleod

http://agmprojects.com