1 of 15

How I learned

to stop worrying

and love the browser

as a gaming platform.

2 of 15

About me

Jay Oster <jay@kodewerx.org>

@kodewerx

  • Platform Engineer @ PubNub
  • melonJS contributor
  • HTML5 game developer
  • 1GAM participant
  • Console game hacker
  • Open source advocate
  • Top secret cybersecurity ninja
  • Wrote PubNub Access Manager
  • Added WebGL support
  • Completed a few small games
  • GCNrd and N64rd author
  • ~redacted~
  • Interest in ASM and exploits (buffer overflows, ROP, etc.)

3 of 15

HTML5 Games? Really?

  • Write once; run everywhere (finally!)
  • Beautiful 3D rendering with WebGL
  • Use bluetooth and USB GamePads (GamePad API)
  • JavaScript is (can be) fast!
  • Developers are already shipping HTML5 games

4 of 15

melonJS: A lightweight HTML5 game engine

http://www.melonjs.org/

  • 2D sprite-based engine (WebGL with Canvas fallback)
  • Multi-channel audio (WebAudio with HTML5 <audio> fallback)
  • Supports all major browsers (Internet Explorer 9+)
  • Integrates with Tiled map editor and PhysicsEditor
  • Fast multi-phase collision detection with spatial partitioning
  • Convex polygon collision detection (Separating Axis Theorem)
  • Tween and transition effects
  • Particle emitters and Particle Editor
  • Device sensor support (motion, accelerometer, orientation)
  • Mouse and Touch events
  • Sprite and background tile animations using texture atlases

5 of 15

Demo time!

6 of 15

Squeeze the life out of JavaScript

  • Optimize for V8 (trust me)
    • Learn about Hidden Classes
    • Use ES6 features natively
  • Trust the prototype chain
  • Use WebGL
  • Pool all the things!
  • And … Fake it! (srsly)

7 of 15

V8 Hidden Classes

function Point(x, y) {

this.x = x;

this.y = y;

}

var point = new Point(10, 20);

point.z = 15;

8 of 15

V8 Hidden Classes

function Point(x, y) {

this.x = x; // Change the hidden class

this.y = y; // Change the hidden class (again)

}

var point = new Point(10, 20);

point.z = 15; // Don’t do this

9 of 15

Use ES6 Classes (Chrome 42+)

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

}

class ColorPoint extends Point {

constructor(x, y, color) {

super(x, y);

this.color = color;

}

}

10 of 15

No ES6 Classes? Prototype Chain!

function Point(x, y) {

this.x = x;

this.y = y;

}

function ColorPoint(x, y, color) {

Point.prototype.call(this, x, y); // super

this.color = color;

}

11 of 15

Use ES6 Maps (Chrome 38+)

var m = new Map([

[ null, "foo" ],

[ function () {}, "bar" ]

]);

m.has(null); //> true

m.get(null); //> "foo"

m.has(function () {}); //> false

m.get(10); //> undefined

12 of 15

HTML5 Desktop Hosts

  • NW.js (Intel, formerly node-webkit)
  • Electron (Github, formerly atom-shell)
  • brackets-shell (Adobe)
  • MacGap (Mac OS X only, sandboxed)
  • AppJS
  • TideSDK
  • Adobe Air
  • Sencha (commercial)
  • Titanium (Appcelerator, commercial)

13 of 15

HTML Mobile Hosts

  • Cordova (Apache, PhoneGap)
  • CocoonJS
  • Ejecta
  • Crosswalk
  • Trigger.io
  • Titanium (Appcelerator)
  • AppMobi (Intel)

14 of 15

Demo Time!

15 of 15