HTML 5

A Technical Perspective

 

Joe Bain

An introduction to HTML5 for games.

HTML5 is becoming more popular for games, and is likely to get even more use across all platforms. Here is what you need to know, and why you need to know it.

What is HTML5, really?

Modern html, including <audio>, <video> and <canvas> elements.

Fast JavaScript runtimes - V8, Ion Monkey.

Loads of open and free code.

JavaScript

But

No body writes anything serious in it.

JavaScript is a bad language

It's too slow.

JavaScript


var foo = [0];
console.log((foo == foo) + ',' + (foo == !foo));
console.log("foo is " + foo);
			

true,true
foo is 0
			

C++


int bar[] = {1};
cout << (bar == bar) + ',' + (bar == !bar) + '\n';
cout << "bar is: " + bar[0];
			

55ar is: 
			

Nobody is perfect :)

by Example

Angry Birds The Basics

HexGL 3D and Performance

Run Pixie Run Mobile

Angry Birds

2D Animation

Use <canvas> not the DOM for quicker drawing and more functions

Use sprite sheets to reduce request overheads and get reliable animations

Use requestAnimationFrame() to get smoother framerates

Audio

Most browsers now support the <audio> tag although timing and performance can differ

Flash fallbacks (eg. SoundManager 2) are pretty good for now if you want to cover a lot of platforms

WebAudio is the cats pyjamas, Chrome and Safari have good support and Firefox will do soon, it's already part implemented

HexGL

WebGL

WebGL is based on OpenGLES 2.0 - which is what you get on iPhone and Android

Full access to the GPU with GLSL ES 1.0 shaders - fragment and vertex shaders are available

Supported in Firefox since 2011, Chrome and Safari since 2012, IE now has experimental support and so do some Android browsers

Performance

Typed arrays let the browser optimise memory layout and can offer big speed boosts

Avoid new for stable frameratesgarbage collection still causes noticeable skips

ASM.js & emscripten compile static languages to JavaScript, heavily optimised and within 2x native speed

Run Pixie Run

Mobile HTML5

Mobile browsers support touch gestures - touchstart, touchend and touchmove events are your friends

You can get rotation and screen size info too - deviceorientation events and window.matchMedia()

Make an app out of an HTML5 game - use frameworks like Phonegap and CoocoonJS

Engines

Two Dee

ImpactJS - very popular and longstanding, not free ($99)

Pixi.js and Phaser - widly used and fast, good mobile support, 2d only

Construct2 and GameMaker - GUI driven game making tools with HTML5 export option. Gamemaker costs $200+ for HTML5 export, Construct2 has a limited free version

Three Dee

Three.js - very popular for 3D on the web, although not a fully fledged game engine

playcanvas - sophisticated browser based dev tools, online and 3D ($15/month for private projects)

Turbulenz - another big engine, comes with a social and multiplayer features and can do 3D with fallback plugins when WebGL isn't available

Links

Games and Demos

Engines

Community

Attribution

Rabbit Sprite © 2005-2013 Julien Jorge <julien.jorge@stuff-o-matic.com>

Cat Model © Animium www.animium.com

Joe Bain

@oh_cripes

http://joeba.in/