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.
Modern html, including <audio>
, <video>
and <canvas>
elements.
Fast JavaScript runtimes - V8, Ion Monkey.
Loads of open and free code.
No body writes anything serious in it.
JavaScript is a bad language
It's too slow.
var foo = [0];
console.log((foo == foo) + ',' + (foo == !foo));
console.log("foo is " + foo);
true,true
foo is 0
int bar[] = {1};
cout << (bar == bar) + ',' + (bar == !bar) + '\n';
cout << "bar is: " + bar[0];
55ar is:
Nobody is perfect :)
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
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
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
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
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.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
Rabbit Sprite © 2005-2013 Julien Jorge <julien.jorge@stuff-o-matic.com>
Cat Model © Animium www.animium.com