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


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 File
CACHE 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
page
var 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 only
window.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


Canvas2D
James 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 canvas
var 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’s
self.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’s
self.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 Board
self.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


MiniMax
function(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


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


CopyMe - Drawing Squares
self.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 - Timelines
self.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 file
self.drawGameText = function() {
ctx.font="36px ReenieBeanie, serif";
ctx.fillText("Copy Me", 250,250);
ctx.fillText("Round " + self.currentRound, 250,300);
}

42


SVG
James 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 DOM
var 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
• Rectangles
var rect = paper.rect(x, y, width, height,
[radius]);
• Circles
var circ = paper.circle(x, y, radius);
• Ellipses
var ellipse = paper.ellipse(x, y, rx, ry);
• Images
var image = paper.image(filename, x, y,
width, height);
• Arbitrary data can be attached with
data(key, val)
50


Raphaël.js - Text
• Text
var text = paper.text(x, y, textString);
• Formatted Text
var txt = r.print(x, y, textString,
font, fontSize);
• Cufón packages TrueType/Freetype fonts for use
with Raphael
• http://cufon.shoqolate.com/generate/

51


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” version
Example: 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,90
var 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 Buttons
class 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 Card
self.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


Evaluator
checkStraight: (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


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 canvas
var 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


Initializing Three.js
function 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 vector
camera = new THREE.PerspectiveCamera(
FOV, ASPECT, NEAR, FAR, [target]
);
• Advanced Camera types

68


Creating Meshes
• Geometry
• Mesh
• Built-in geometries
• Vertex
new THREE.Vertex(
new Three.Vector3(0.0, 1.0, 0.0)
);
• Face
new THREE.Face3(0,1,2);

69


Creating Meshes
geometry = new THREE.Geometry();
geometry.vertices.push(vertex1);
geometry.faces.push(face1);
var triangle = new THREE.Mesh(geometry,
new THREE.MeshBasicMaterial( {
color: 0x00ff00 }
)
);

70


Creating Meshes
plane = new THREE.Mesh(
new THREE.Plane( 200, 200 ),
new THREE.MeshBasicMaterial( { color:
0xe0e0e0 }
)
);
scene.add( plane );
scene.add(triangle);

71


Lighting
• Ambient
• Point
• Directional
• SpotLight
new 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 Types
struct MyMaterial {
vec4 ambient;
vec4 diffuse;
vec4 specular;
float shininess;
};

80


Communicating with Shaders
var 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 Shader
uniform 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
(0,1) (1,1)

(0,0) (1,0)

84


Texturing Example
var 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


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 Models
function 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


Animation
Armature - 3D representation of bones,
ligaments, and tendons
• Forward kinematics
• Inverse kinematics
• Keyframes/Morph targets

91


MorphTargets
var 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


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

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

93


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 Model
function 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 Cell
initialize: 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


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

99


Creating the Textures
for url in @imageURLs
img = new Image()
img.onload = () ->
count += 1
#truncated
self.generateTexture(this,
verticleOffset)

100


canvas = document.createElement("canvas")
ctx = canvas.getContext("2d")

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

101


processedImg.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


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


Deployment
James 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


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


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


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


Thanks for
coming!


Intro to HTML5 Game Programming

Recommended

More Related Content

Similar to Intro to HTML5 Game Programming (20)

More from James Williams (14)

Recently uploaded (20)

Intro to HTML5 Game Programming