intro to html5 game programming

Intro to HTML5 Game Programming

James Williams

Wednesday, November 16, 2011

About Me• Author of Learning HTML5 Game Programming• Google+: +jameswilliams• Twitter: @ecspike• StartupBus Alum

2


StartupBus• Originated as an idea to drive from SF to SXSW• Developing a startup idea along the way• Community building and networking• StartupBus is coming to Europe!• http://startupbus.com/europe

3


http://startupbus.com/europe

http://startupbus.com/europe

Other HTML5 Talks• Introduction to SVG

–Filip Van Laenen (Nov 14th @ 9h30)• Cross Platform Game Programming with PlayN

–Lilli Thompson (Nov 14th @ 21h00)• Intro to HTML5 Game Programming - WebGL

–Me (Nov 16th @ 12h00)• Working Off the Grid: HTML5 Offline

–Sam Dutton (Nov 16th @ 14h00)

4


Agenda• HTML5 Basics• Canvas• SVG• WebGL• Deployment

5


HTML5 Basics


What is HTML5?• Evolution of the HTML spec• New APIs and features dealing with

–audio and video–canvas–storage–workers–web sockets

7


Application Cache• Permits applications to run offline• Caching strategies:

–NETWORK–FALLBACK–CACHE

• Manifest file must be changed to update cache.

8


Sample AppCache FileCACHE MANIFEST

# version 1

CACHE:

/images/*

FALLBACK:/ /offline.html

NETWORK:

*

9


Web Workers• Runs abitrary JavaScript on a background thread• Workers can pass messages to/from the host

pagevar worker = new Worker('task.js');

worker.onmessage = function(event) { alert(event.data); };worker.postMessage('data');

/* in task.js */self.onmessage = function(event) {self.postMessage(“Msg: “+event.data)

}10


WebSockets• Similar to TCP sockets• Permit bi-directional communication• Data can take any form• Functions/Handlers:

–onopen–onmessage–onerror–onclose–send

11


Storage• WebStorage

–LocalStorage–SessionStorage

• WebSQL• IndexedDB

12


WebSQL• Not supported by Firefox or IE• Uses a SQLite-like language for DB access• Not formally supported by the W3C

13


IndexedDB• Endorsed by the W3C• Uses a NoSQL-like language for DB access• Transactional• Reminiscent of MongoDB and CouchDB

14


WebStorage• Supported by most browsers• Usually capped at 5MB• Key/value pairs• Setting values:localStorage.setItem(“a”, 42);localStorage[“a”] = 42;localStorage.a = 42;

• Retrieving values:stuff = localStorage.getItem(“a”)stuff = localStorage[“b”]stuff = localStorage.b

15


Notifications API• Surfaces Growl-like notifications• Implemented in Chrome onlywindow.webkitNotifications.requestPermission();

• window.webkitNotifications.checkPermission();

– 0 allowed– 1 denied

• Notification types–Simple–HTML

16


Audio Tag• API to play audio in HTML5 pages• Not well-suited for multiplexed sound• Audio format support is spotty<audio controls>

<source src="s.ogg" type="audio/ogg" /> <source src="s.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

17


WebAudio API• API for processing and synthesizing sound• Allows playing multiple sounds• Overcomes shortcomings of the audio tag

18


Video Tag• Permits video playback without a plugin• Video codec support is not consistent• Can specify multiple files to ensure support• Native controls and scrubbing<video width="320" height="240" controls> <source src="m.mp4" type="video/mp4" />

<source src="m.ogg" type="video/ogg" />

Your browser doesn’t support the video tag.

</video>

19


RequestAnimationFrame• http://paulirish.com/2011/requestanimationframe-

for-smart-animating/window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element){ window.setTimeout(callback, 1000 / 60); };})();

20


Canvas2DJames Williams


Agenda - Canvas• What is Canvas2D?• Drawing Shapes• Paths• Fonts• Pixel Manipulation• Working with Video• Creating a Tic-Tac-Toe Game

22


What is Canvas 2D?• Immediate mode drawing API• Capable of using images and video• Scriptable with JavaScript

23


Drawing a Canvas<html> <head></head>

<body> <canvas id=’c’ width=”400” height=”400"/>

</body>

</html>

24


Getting a Canvas2DContext• Hook to draw on the canvasvar canvas = document.getElementById(“c”);var ctx = c.getContext(“2d”);

• Capable of saving and restoring state• Capable of applying 2D matrix transformations

25


Drawing Objects• beginPath• arc / arcTo / bezierCurveTo / quadracticCurveTo• moveTo• lineTo• lineWidth• rect• closePath• stroke

26


Transformations• scale( x, y)• rotate (radians)• translate (x, y)• transform (a, b, c, d, e, f)

27


Working with Images• Canvases and images are mostly interchangable•drawImage(image, dx, dy)

•drawImage(image, dx, dy, dw, dh)

•drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

28


Pixel Manipulation•createImageData(sw, sh)

•createImageData(imagedata)

•getImageData(sx,sy,sw,sh)

•putImageData(imagedata, dx, dy, [...])

29


Demo


Creating Tic-Tac-Toe• Known in the UK as “Naughts and Crosses”• Played by 2 players on a 3x3 grid• Goal is to get 3 of the same object in a row

31


Drawing X’sself.drawXSprite = function (x, y) {

var ctx = self.context;

// Save the canvas state and translate

ctx.save();

ctx.translate(x,y);

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(10,10);

ctx.lineTo(190,190);

ctx.moveTo(190,10);

ctx.lineTo(10,190);

ctx.stroke();

ctx.restore();

}

32


Drawing O’sself.drawOSprite = function(x, y) {


// Save the canvas state and translate

ctx.save();

ctx.translate(x,y);

ctx.lineWidth = 2;

ctx.beginPath();

ctx.arc(100,100, 90, 0, 2*Math.PI);

ctx.stroke();

// Restore canvas state

ctx.restore();

}

33


Drawing the Game Boardself.drawGameBoard = function() {


ctx.rect(200, 0, 1, 600);

ctx.rect(400, 0, 1, 600);

ctx.rect(0, 200, 600, 1);

ctx.rect(0, 400, 600, 1);

ctx.fill();

}

34


Tic-Tac-Toe AI - MiniMax• Alternates trying to select the best possible move• Recursively runs checking all paths• Depth first search• Can exceed limit in JS memory

35


MiniMaxfunction(board, currentPlayer) {

if (this.currentDepth == this.depthLimit) return 0;

if (TTT.checkForWin(board) == currentPlayer) return 1;

if (TTT.checkForWin(board) == this.getOtherPlayer(currentPlayer))

return -1;

this.currentDepth++;

//truncated

var clone = TTT.cloneGameBoard(board);

var moves = TTT.generateMovesFromBoard(clone, currentPlayer);

// truncated

return bestMove;

}

36


Demo


Creating Copy Me• Inspired by the game Simon• The computer plays a series of tones• The player must play them in the correct order• Uses Trident.js to animate the squares

38


Trident.js• JavaScript timeline animation library• Allows for timelines to be interleaved• Can animate any attribute accessible from JS• Supports a number of easing functions• https://github.com/kirillcool/trident-js

39


https://github.com/kirillcool/trident-js

https://github.com/kirillcool/trident-js

CopyMe - Drawing Squaresself.drawSquares = function() {


ctx.clearRect(0,0,600,600);

self.drawGameText();

ctx.shadowColor = "gray";

ctx.save();

ctx.fillStyle = self.redColor;

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 10;

ctx.beginPath();

ctx.rect(200,0, 200,200);

ctx.fill();

ctx.restore();

/* other squares truncated */

}40


CopyMe - Timelinesself.setupTimelines = function() {

// colors to interpolate

self.redColor = "rgb(200,0,0)";

/* other colors truncated */

self.timelines = new Object();

var redTimeline = new Timeline(this);

redTimeline.addPropertiesToInterpolate([

{ property: "redColor",

goingThrough: { 0:"rgb(200,0,0)", 0.5: "rgb(255,0,0)", 1:"rgb(200,0,0)" }, interpolator: new RGBPropertyInterpolator()}

]);

/* truncated */

}41


CopyMe - Drawing Text• In CSS file@font-face {

font-family:'ReenieBeanie';

src: url('../ttf/ReenieBeanie.ttf') format("TrueType");

}

• In JS fileself.drawGameText = function() {


ctx.font="36px ReenieBeanie, serif";

ctx.fillText("Copy Me", 250,250);

ctx.fillText("Round " + self.currentRound, 250,300);

}

42


Demo


SVGJames Williams


Agenda - SVG• What is SVG?• Components• Painting and Compositing• Animation• Raphael.js• Creating a Video Poker Game

45


What is SVG?• Stands for Scalable Vector Graphics• Very mature API• Uses XML to create objects• Comparable to Canvas2D API• Maintains full scene graph in the DOM• Well suited for low count-low movement games

46


SVG vs Canvas• Canvas requires data structures to track drawing• With SVG, drawing is the data structure• Canvas can draw hundreds of sprites • SVG can get bogged down with the same

number

47


Raphaël.js• JavaScript library to create SVG scenes• Supports all major browsers including IE 6+• Built-in easing functions for animation• Built-in hooks for mouse interaction and gestures• http://raphaeljs.com

48


Raphaël.js - Paper• Comparable to the canvas tag• Anchor for all drawing instructions

//adds a new svg tag to the DOMvar paper = Raphael(10, 50, 320, 200);

//adds a svg tag in the element with id “p”var paper = Raphael("p", 320, 200);

49


Raphaël.js - Elements• Rectanglesvar rect = paper.rect(x, y, width, height, [radius]);

• Circlesvar circ = paper.circle(x, y, radius);

• Ellipsesvar ellipse = paper.ellipse(x, y, rx, ry);

• Imagesvar image = paper.image(filename, x, y, width, height);

• Arbitrary data can be attached with data(key, val)

50


Raphaël.js - Text• Textvar text = paper.text(x, y, textString);

• Formatted Textvar txt = r.print(x, y, textString, font, fontSize);

• Cufón packages TrueType/Freetype fonts for use with Raphael

• http://cufon.shoqolate.com/generate/

51


http://cufon.shoqolate.com/generate/

http://cufon.shoqolate.com/generate/

Color • Can be specified by

–name (“red”, “blue”, “grey”)–shorted hex color (#0F0)–hex color (#00FF00)–rgb/rgba–hsb/hsba–hsl/hsla

• Can be animated

52


Easing and Animation• Any attribute can be animated• Provide functions that define animation• Linear• BackIn / BackOut• Bounce• Acceleration• Deceleration• New easing functions can be created

53


Events• Can take SVG objects as targets• The following are supported

–drag–mouseup / mousedown / mouseover / mousemove–touchstart / touchmove / touchend / touchcancel–mousehover–click / dblclick

• Listeners are removed by calling the “un” versionExample: box.mouseunhover(function)

54


SVG Paths• Text strings that describe how to draw objects• Properly created paths can scale infinitely• Operations

–moveto–lineto (several variants)–curveto (several variants)–arc –closepath

•// Draws a line from 10,10 to 90,90var c = paper.path("M10 10L90 90");

55


Creating Video Poker• Single player casino game• Payout based on the bet * the final hand• Uses a standard 52 card deck (svg-cards)• Uses a mix of Coffeescript and JavaScript• Underscore.js helps with evaluating

56


Creating Buttonsclass Button

constructor: (@options) ->

if @options.dims isnt undefined

@rect = paper.rect(0,0, @opts.dims.x, @opts.dims.y, 10)

else @rect = paper.rect(0, 0, 150, 50, 10)

if (@opts.color isnt undefined)

@rect.attr({fill:@opts.color, stroke:'#000'})

else @rect.attr({fill:'blue', stroke:'#000'})

@text = // truncated @text.attr({fill:'white'})

setText: (text) -> // truncated

setOnClick: (@func) ->

@rect.click(@func)

@text.click(@func)

@rect.attr({"cursor":"pointer"})

@text.attr({"cursor":"pointer"})

window.Button = Button 57


Drawing a Cardself.drawCard = function() {

self.findXPos()

self.findYPos()

if (self.cardBack == undefined)

self.cardBack = paper.image( /* truncated */)

if (self.cardFront == undefined)

self.cardFront = paper.image(/*truncated */)

self.cardFront.attr("opacity", 0.0)

self.flipCard();

self.cardFront.attr({"cursor":"pointer"})

self.cardFront.click(function() {

// toggle state for card

self.state = !self.state;

self.drawHoldButton();

});

self.drawHoldButton();

} 58


Evaluating Poker Hands• The Card “class” has built-in properties for:

–ordinal value–suit

• groupBy (underscore)• pluck (underscore)

59


EvaluatorcheckStraight: (hand) ->

vals = _.pluck(hand.cards, "val")

vals.sort()

startValue = vals[0]

for i in [0...5]

return false if startValue+i isnt vals[i]

return "Straight" if vals is [1, 10, 11, 12, 13]

return "Straight"

checkFourKind: (hand) ->

sorted = _.groupBy hand.cards, @ordinalHandler

quad = @findLength(sorted, 4)

return "FourKind" if quad.length isnt 0

60


Demo


WebGL


Agenda - WebGL• What is WebGL?• What is Three.js?• Lighting, Shaders, and Materials• Creating Meshes• GLSL• Exporters• Animation• Debugging

63


What is WebGL?• Low-level 3D graphics context• Hardware accelerated• Supported by most modern browsers• Syntax is based on OpenGL ES 2.0

64


Getting a WebGLContext• Hook to draw on the canvasvar canvas = document.getElementById(“c”);var ctx = c.getContext(“experimental-webgl”);

65


What is Three.js?• Abstraction layer over WebGL• 3D scenegraph library• Capable of rendering to

–Canvas2D–WebGL–SVG

• Exporters for popular 3D formats• http://github.com/mrdoob/three.js

66


http://github.com/mrdoob/three.js

http://github.com/mrdoob/three.js

Initializing Three.jsfunction init() {

var HEIGHT = 480, WIDTH = 640;

// create a renderer, camera, and scene renderer = new THREE.WebGLRenderer();

renderer.setSize (WIDTH, HEIGHT);

camera = /* truncated */

// create scene

scene = new THREE.Scene(); // add objects to scene elem.appendChild(render.domElement);

}67


Camera• Eye point• Field of vision• Near / Far planes• Target(LookAt) point• Up vectorcamera = new THREE.PerspectiveCamera(

FOV, ASPECT, NEAR, FAR, [target]

);

• Advanced Camera types

68


Creating Meshes• Geometry• Mesh• Built-in geometries• Vertexnew THREE.Vertex( new Three.Vector3(0.0, 1.0, 0.0));

• Facenew THREE.Face3(0,1,2);

69


Creating Meshesgeometry = new THREE.Geometry();

geometry.vertices.push(vertex1);

geometry.vertices.push(vertex2);

geometry.vertices.push(vertex3);geometry.faces.push(face1);

var triangle = new THREE.Mesh(geometry,

new THREE.MeshBasicMaterial( {

color: 0x00ff00 } )

);

70


Creating Meshesplane = new THREE.Mesh( new THREE.Plane( 200, 200 ),

new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } )

);

scene.add( plane );scene.add(triangle);

71


Lighting• Ambient• Point• Directional• SpotLightnew THREE.AmbientLight(hexColor);

new THREE.PointLight(hexColor, [intensity], [distance]);

new THREE.DirectionalLight(hexColor, [intensity], [distance], [castShadow]);

new THREE.SpotLight(hexColor, [intensity], [distance], [castShadow]);

72


Shading• Flat• Lambertian• Gouraud• Phong

73


Materials• MeshBasicMaterial• MeshLambertMaterial• MeshPhongMaterial• MeshShaderMaterial• Common Properties

–color / ambient–specular–shininess–opacity–mappings–blending

74


What is GLSL?• High-level language with C-like syntax• Targets the GPU and graphics pipeline• A GLSL program consists of

–fragment shader–vertex shader

• Content of shaders passed around as strings• Shaders can be generated at run-time

75


Vertex Shaders• Run once per vertex in a mesh• Can alter color, position, texels, etc at that vertex• Example shader:<script id="shader-vs" type="x-shader/x-vertex"> void main(void) {

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

</script>

76


Fragment(Pixel) Shaders• Run once per pixel in a mesh• Can produce effects such as bump and env

mapping• Example shader:<script id="shader-vs" type="x-shader/x-fragment"> void main(void) {

gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );

}

</script>77


Shader Demo Code

function drawTriangle() { var geometry, geoMaterial; shaderMaterial = new THREE.MeshShaderMaterial({ vertexShader: $('#v').get(0).innerHTML, fragmentShader:$('#f').get(0).innerHTML, vertexColors: true }); /* truncated */ var triangle = new THREE.Mesh( geometry, shaderMaterial );

78


Shader Variables• uniform• varying• attribute• Types:

–bool–int–float–vec2 / vec3 / vec4–mat2 / mat3 / mat4–sampler2D, etc

79


Constructing New Shader Typesstruct MyMaterial {

vec4 ambient;

vec4 diffuse;

vec4 specular; float shininess;

};

80


Communicating with Shadersvar uniforms;

uniforms = {

time: {type:"f", value:0.0}

}shaderMaterial = new THREE.MeshShaderMaterial({

uniforms: uniforms,

vertexShader:$('#v').get(0).innerHTML,

fragmentShader:$('#f').get(0).innerHTML,

});

81


Custom Shaderuniform float time;

void main(){

float r = cos(time); float g = sin(time);

float b = tan(time);

gl_FragColor = vec4(r, 1.0 - g , b, 1.0);

}

82


Texturing• Can load from images or use canvas data•var texture = THREE.ImageUtils.loadTexture( "tex.jpg" );

•texture = new THREE.Texture(image)

• Basic shapes precalculate texture coordinates

83


2D Texture Coordinates

84

(1,1)

(0,0) (1,0)

(0,1)


Texturing Examplevar texture = THREE.ImageUtils.loadTexture( "200407-bluemarble.jpg" );

var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, ambient: 0xFFFFFF, map:texture } );

sphere = new THREE.Mesh( new THREE.Sphere(32, 32, 32), material

);

scene.add(sphere);

85


Demo


Vertex Shader for 2D texturing/* Vertex Shader */

attribute vec4 a_position;

attribute vec2 a_texCoord;

varying vec2 v_texCoord;

void main() {

gl_Position = a_position;

v_texCoord = a_texCoord;

}

87


Fragment Shader for 2D texturing/* Fragment Shader */

precision mediump float;

varying vec2 v_texCoord;

uniform sampler2D s_texture;

void main() {

gl_FragColor = texture2D(s_texture, v_texCoord);

}

88


Loading Modelsfunction drawCube() {

var loader = new THREE.JSONLoader();

loader.load( {model: "cube.js", callback: createScene1 });

}

function createScene1(obj) {

obj.materials[0][0].shading = THREE.FlatShading;

mesh = THREE.SceneUtils.addMesh( scene, obj, 250, 400, 0, 0, 0, 0, 0,

obj.materials[0] );} 89


Demo


AnimationArmature - 3D representation of bones, ligaments, and tendons

• Forward kinematics• Inverse kinematics• Keyframes/Morph targets

91


MorphTargetsvar time = new Date().getTime() % duration;

var keyframe = Math.floor(time / interpol ) + offset;

if ( keyframe != currentKeyframe ) { mesh.morphTargetInfluences[lastFrame]=0;

mesh.morphTargetInfluences[currentFrame] =1;

mesh.morphTargetInfluences[keyframe]=0;

lastFrame = currentFrame;

currentFrame = keyframe;}

92


MorphTargetsmesh.morphTargetInfluences[ keyframe ] = ( time % interpol ) / interpolation;

mesh.morphTargetInfluences[ lastFrame ] = 1 - mesh.morphTargetInfluences[keyframe];

93


Demo


Creating Conway’s Game of Life• Zero-player game• Cellular automation• Our version is 3D• Ported from Java with Prototype

95


Game of Life - Loading Modelfunction drawScene(m) {

window.suzanne = m;

grid = new CellsGrid(new LifeProperties("{}"));

}

function loadModel() {

var loader = new THREE.JSONLoader();

loader.load( { model: "suzanne.js",callback:drawScene });

}96


Game of Life - Creating a Cellinitialize: function(x,y,z) {

this.age = 0;

this.alive = (Math.random()<0.1) ? true:false;

this.makeMaterial(); this.mesh = new THREE.Mesh(

window.suzanne, this.material

);

/* Set x, y, z positions this.mesh.position.x = ...

*/

97


Demo


Circle Visualizer • Extension to Google+• Presents shared circles in a new way• Other contributor: +JustinOrmont• Code is barely two days old

99


Creating the Texturesfor url in @imageURLs

img = new Image()

img.onload = () ->

count += 1 #truncated

self.generateTexture(this, verticleOffset)

100


Creating the Texturescanvas = document.createElement("canvas")

ctx = canvas.getContext("2d")

# get image and place it on the canvasctx.drawImage(image, locX, locY, width, height)

101


Creating the TexturesprocessedImg.onload = () ->

texture = new THREE.Texture(processedImg)

texture.needsUpdate = true

self.textures.push(texture) self.imagesLoaded++

if self.imagesLoaded == self.imageURLs.length

self.drawScene()

self.animate()

self.doneLoadingImages = true

102


WebGL Inspector• Allows you to step through render instructions• View texture assets and GLSL programs• Capture individual frames• Can be embedded or installed as Chrome

extension• http://benvanik.github.com/WebGL-Inspector

103


http://benvanik.github.com/WebGL-Inspector

http://benvanik.github.com/WebGL-Inspector

Stats.js• FPS - frames per second• MS - how many millis it took to render the frame• MB - the allocated megabytes

• Github: https://github.com/mrdoob/stats.js

104


https://github.com/mrdoob/stats.js

https://github.com/mrdoob/stats.js

Demo


DeploymentJames Williams


Agenda - Deployment• Chrome WebStore• TapJS• MacAppStore / Bodega• PhoneGap• Ubuntu Software Center

107


Chrome Web Store• $5(~3.60EUR) developer signup fee• 95% of list price goes to the developer• Supports

– in-app payments– one-time purchase– subscriptions (monthly and yearly)

• Payment requires Google Checkout Account• More info: http://code.google.com/chrome/

webstore/docs/index.html

108


http://code.google.com/chrome/webstore/docs/index.html




Web Store Manifest File{

"name": "HTML5 Video Poker",

"description":"A video poker game created with CoffeeScript, HTML5 Audio, and SVG",

"version":"1.0.2",

"icons":{

"16": "HTML5_Badge_16.png",

"32": "HTML5_Badge_32.png",

"128": "HTML5_Badge_128.png"

},

"app":{

"launch": {

"local_path":"index.html"

}

}

}

109


TapJS• Limited Facebook integration• Player Accounts, Leaderboards and badges• Free subdomain to host your app • Simply fill out a (really long) form and zip your

files• Accepts the following file types

–html–css–js–jpg, gif, and png–mp3 and ogg

110


Mac App Store/Bodega• Mac App Store

–Requires OS X 10.6.6 or higher(Snow Leopard)–70/30 revenue split–Restrictions on API access–Sandboxing rules–http://developer.apple.com/programs/mac/

• Bodega, alternate OS X app store–Requires OS X 10.5.8 or higher(Leopard)–93/7 revenue split–http://appbodega.com/Developers.php

111


http://developer.apple.com/programs/mac/

http://developer.apple.com/programs/mac/

http://appbodega.com/Developers.php

http://appbodega.com/Developers.php

Ubuntu Software Center• Very popular Linux distro• Development Options:

–Quickly and PyGTK–Mono–Java–Qt

• Supports both free and commercial apps• 80% (Dev) / 20% (Canonical) split• Requires PayPal for commercial apps• More info: http://developer.ubuntu.com/

112


http://developer.ubuntu.com/

http://developer.ubuntu.com/

PhoneGap• HTML5 App platform with native hooks• Can access native features like:

–geolocation–accelerometer–storage–audio/video/camera

• Nitobi acquired by Adobe• Supports: iOS, Android, BB, WP7, WebOS• PhoneGap Build

113


Thanks for coming• Blog: http://jameswilliams.be/blog• Google+: +jameswilliams• Twitter: @ecspike• http://github.com/jwill

114


http://jameswilliams.be/blog

http://jameswilliams.be/blog

http://github.com/jwill

http://github.com/jwill

Thanks for coming!


intro to html5 game programming

Technology