Intro to HTML5 Game Programming
-
date post
18-Oct-2014 -
Category
Technology
-
view
11.007 -
download
6
description
Transcript of Intro to HTML5 Game Programming
![Page 1: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/1.jpg)
Intro to HTML5 Game Programming
James Williams
Wednesday, November 16, 2011
![Page 2: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/2.jpg)
About Me• Author of Learning HTML5 Game Programming• Google+: +jameswilliams• Twitter: @ecspike• StartupBus Alum
2
Wednesday, November 16, 2011
![Page 3: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/3.jpg)
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
Wednesday, November 16, 2011
![Page 4: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/4.jpg)
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
Wednesday, November 16, 2011
![Page 5: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/5.jpg)
Agenda• HTML5 Basics• Canvas• SVG• WebGL• Deployment
5
Wednesday, November 16, 2011
![Page 6: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/6.jpg)
HTML5 Basics
Wednesday, November 16, 2011
![Page 7: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/7.jpg)
What is HTML5?• Evolution of the HTML spec• New APIs and features dealing with
–audio and video–canvas–storage–workers–web sockets
7
Wednesday, November 16, 2011
![Page 8: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/8.jpg)
Application Cache• Permits applications to run offline• Caching strategies:
–NETWORK–FALLBACK–CACHE
• Manifest file must be changed to update cache.
8
Wednesday, November 16, 2011
![Page 9: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/9.jpg)
Sample AppCache FileCACHE MANIFEST
# version 1
CACHE:
/images/*
FALLBACK:/ /offline.html
NETWORK:
*
9
Wednesday, November 16, 2011
![Page 10: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/10.jpg)
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
Wednesday, November 16, 2011
![Page 11: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/11.jpg)
WebSockets• Similar to TCP sockets• Permit bi-directional communication• Data can take any form• Functions/Handlers:
–onopen–onmessage–onerror–onclose–send
11
Wednesday, November 16, 2011
![Page 12: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/12.jpg)
Storage• WebStorage
–LocalStorage–SessionStorage
• WebSQL• IndexedDB
12
Wednesday, November 16, 2011
![Page 13: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/13.jpg)
WebSQL• Not supported by Firefox or IE• Uses a SQLite-like language for DB access• Not formally supported by the W3C
13
Wednesday, November 16, 2011
![Page 14: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/14.jpg)
IndexedDB• Endorsed by the W3C• Uses a NoSQL-like language for DB access• Transactional• Reminiscent of MongoDB and CouchDB
14
Wednesday, November 16, 2011
![Page 15: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/15.jpg)
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
Wednesday, November 16, 2011
![Page 16: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/16.jpg)
Notifications API• Surfaces Growl-like notifications• Implemented in Chrome onlywindow.webkitNotifications.requestPermission();
• window.webkitNotifications.checkPermission();
– 0 allowed– 1 denied
• Notification types–Simple–HTML
16
Wednesday, November 16, 2011
![Page 17: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/17.jpg)
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
Wednesday, November 16, 2011
![Page 18: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/18.jpg)
WebAudio API• API for processing and synthesizing sound• Allows playing multiple sounds• Overcomes shortcomings of the audio tag
18
Wednesday, November 16, 2011
![Page 19: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/19.jpg)
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
Wednesday, November 16, 2011
![Page 20: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/20.jpg)
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
Wednesday, November 16, 2011
![Page 21: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/21.jpg)
Canvas2DJames Williams
Wednesday, November 16, 2011
![Page 22: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/22.jpg)
Agenda - Canvas• What is Canvas2D?• Drawing Shapes• Paths• Fonts• Pixel Manipulation• Working with Video• Creating a Tic-Tac-Toe Game
22
Wednesday, November 16, 2011
![Page 23: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/23.jpg)
What is Canvas 2D?• Immediate mode drawing API• Capable of using images and video• Scriptable with JavaScript
23
Wednesday, November 16, 2011
![Page 24: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/24.jpg)
Drawing a Canvas<html> <head></head>
<body> <canvas id=’c’ width=”400” height=”400"/>
</body>
</html>
24
Wednesday, November 16, 2011
![Page 25: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/25.jpg)
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
Wednesday, November 16, 2011
![Page 26: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/26.jpg)
Drawing Objects• beginPath• arc / arcTo / bezierCurveTo / quadracticCurveTo• moveTo• lineTo• lineWidth• rect• closePath• stroke
26
Wednesday, November 16, 2011
![Page 27: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/27.jpg)
Transformations• scale( x, y)• rotate (radians)• translate (x, y)• transform (a, b, c, d, e, f)
27
Wednesday, November 16, 2011
![Page 28: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/28.jpg)
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
Wednesday, November 16, 2011
![Page 29: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/29.jpg)
Pixel Manipulation•createImageData(sw, sh)
•createImageData(imagedata)
•getImageData(sx,sy,sw,sh)
•putImageData(imagedata, dx, dy, [...])
29
Wednesday, November 16, 2011
![Page 30: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/30.jpg)
Demo
Wednesday, November 16, 2011
![Page 31: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/31.jpg)
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
Wednesday, November 16, 2011
![Page 32: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/32.jpg)
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
Wednesday, November 16, 2011
![Page 33: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/33.jpg)
Drawing O’sself.drawOSprite = 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.arc(100,100, 90, 0, 2*Math.PI);
ctx.stroke();
// Restore canvas state
ctx.restore();
}
33
Wednesday, November 16, 2011
![Page 34: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/34.jpg)
Drawing the Game Boardself.drawGameBoard = function() {
var ctx = self.context;
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
Wednesday, November 16, 2011
![Page 35: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/35.jpg)
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
Wednesday, November 16, 2011
![Page 36: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/36.jpg)
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
Wednesday, November 16, 2011
![Page 37: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/37.jpg)
Demo
Wednesday, November 16, 2011
![Page 38: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/38.jpg)
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
Wednesday, November 16, 2011
![Page 39: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/39.jpg)
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
Wednesday, November 16, 2011
![Page 40: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/40.jpg)
CopyMe - Drawing Squaresself.drawSquares = function() {
var ctx = self.context;
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
Wednesday, November 16, 2011
![Page 41: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/41.jpg)
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
Wednesday, November 16, 2011
![Page 42: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/42.jpg)
CopyMe - Drawing Text• In CSS file@font-face {
font-family:'ReenieBeanie';
src: url('../ttf/ReenieBeanie.ttf') format("TrueType");
}
• In JS fileself.drawGameText = function() {
var ctx = self.context;
ctx.font="36px ReenieBeanie, serif";
ctx.fillText("Copy Me", 250,250);
ctx.fillText("Round " + self.currentRound, 250,300);
}
42
Wednesday, November 16, 2011
![Page 43: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/43.jpg)
Demo
Wednesday, November 16, 2011
![Page 44: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/44.jpg)
SVGJames Williams
Wednesday, November 16, 2011
![Page 45: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/45.jpg)
Agenda - SVG• What is SVG?• Components• Painting and Compositing• Animation• Raphael.js• Creating a Video Poker Game
45
Wednesday, November 16, 2011
![Page 46: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/46.jpg)
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
Wednesday, November 16, 2011
![Page 47: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/47.jpg)
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
Wednesday, November 16, 2011
![Page 48: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/48.jpg)
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
Wednesday, November 16, 2011
![Page 49: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/49.jpg)
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
Wednesday, November 16, 2011
![Page 50: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/50.jpg)
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
Wednesday, November 16, 2011
![Page 51: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/51.jpg)
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
Wednesday, November 16, 2011
![Page 52: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/52.jpg)
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
Wednesday, November 16, 2011
![Page 53: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/53.jpg)
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
Wednesday, November 16, 2011
![Page 54: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/54.jpg)
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
Wednesday, November 16, 2011
![Page 55: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/55.jpg)
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
Wednesday, November 16, 2011
![Page 56: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/56.jpg)
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
Wednesday, November 16, 2011
![Page 57: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/57.jpg)
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
Wednesday, November 16, 2011
![Page 58: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/58.jpg)
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
Wednesday, November 16, 2011
![Page 59: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/59.jpg)
Evaluating Poker Hands• The Card “class” has built-in properties for:
–ordinal value–suit
• groupBy (underscore)• pluck (underscore)
59
Wednesday, November 16, 2011
![Page 60: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/60.jpg)
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
Wednesday, November 16, 2011
![Page 61: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/61.jpg)
Demo
Wednesday, November 16, 2011
![Page 62: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/62.jpg)
WebGL
Wednesday, November 16, 2011
![Page 63: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/63.jpg)
Agenda - WebGL• What is WebGL?• What is Three.js?• Lighting, Shaders, and Materials• Creating Meshes• GLSL• Exporters• Animation• Debugging
63
Wednesday, November 16, 2011
![Page 64: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/64.jpg)
What is WebGL?• Low-level 3D graphics context• Hardware accelerated• Supported by most modern browsers• Syntax is based on OpenGL ES 2.0
64
Wednesday, November 16, 2011
![Page 65: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/65.jpg)
Getting a WebGLContext• Hook to draw on the canvasvar canvas = document.getElementById(“c”);var ctx = c.getContext(“experimental-webgl”);
65
Wednesday, November 16, 2011
![Page 66: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/66.jpg)
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
Wednesday, November 16, 2011
![Page 67: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/67.jpg)
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
Wednesday, November 16, 2011
![Page 68: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/68.jpg)
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
Wednesday, November 16, 2011
![Page 69: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/69.jpg)
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
Wednesday, November 16, 2011
![Page 70: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/70.jpg)
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
Wednesday, November 16, 2011
![Page 71: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/71.jpg)
Creating Meshesplane = new THREE.Mesh( new THREE.Plane( 200, 200 ),
new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } )
);
scene.add( plane );scene.add(triangle);
71
Wednesday, November 16, 2011
![Page 72: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/72.jpg)
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
Wednesday, November 16, 2011
![Page 73: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/73.jpg)
Shading• Flat• Lambertian• Gouraud• Phong
73
Wednesday, November 16, 2011
![Page 74: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/74.jpg)
Materials• MeshBasicMaterial• MeshLambertMaterial• MeshPhongMaterial• MeshShaderMaterial• Common Properties
–color / ambient–specular–shininess–opacity–mappings–blending
74
Wednesday, November 16, 2011
![Page 75: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/75.jpg)
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
Wednesday, November 16, 2011
![Page 76: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/76.jpg)
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
Wednesday, November 16, 2011
![Page 77: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/77.jpg)
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
Wednesday, November 16, 2011
![Page 78: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/78.jpg)
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
Wednesday, November 16, 2011
![Page 79: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/79.jpg)
Shader Variables• uniform• varying• attribute• Types:
–bool–int–float–vec2 / vec3 / vec4–mat2 / mat3 / mat4–sampler2D, etc
79
Wednesday, November 16, 2011
![Page 80: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/80.jpg)
Constructing New Shader Typesstruct MyMaterial {
vec4 ambient;
vec4 diffuse;
vec4 specular; float shininess;
};
80
Wednesday, November 16, 2011
![Page 81: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/81.jpg)
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
Wednesday, November 16, 2011
![Page 82: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/82.jpg)
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
Wednesday, November 16, 2011
![Page 83: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/83.jpg)
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
Wednesday, November 16, 2011
![Page 84: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/84.jpg)
2D Texture Coordinates
84
(1,1)
(0,0) (1,0)
(0,1)
Wednesday, November 16, 2011
![Page 85: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/85.jpg)
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
Wednesday, November 16, 2011
![Page 86: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/86.jpg)
Demo
Wednesday, November 16, 2011
![Page 87: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/87.jpg)
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
Wednesday, November 16, 2011
![Page 88: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/88.jpg)
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
Wednesday, November 16, 2011
![Page 89: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/89.jpg)
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
Wednesday, November 16, 2011
![Page 90: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/90.jpg)
Demo
Wednesday, November 16, 2011
![Page 91: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/91.jpg)
AnimationArmature - 3D representation of bones, ligaments, and tendons
• Forward kinematics• Inverse kinematics• Keyframes/Morph targets
91
Wednesday, November 16, 2011
![Page 92: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/92.jpg)
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
Wednesday, November 16, 2011
![Page 93: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/93.jpg)
MorphTargetsmesh.morphTargetInfluences[ keyframe ] = ( time % interpol ) / interpolation;
mesh.morphTargetInfluences[ lastFrame ] = 1 - mesh.morphTargetInfluences[keyframe];
93
Wednesday, November 16, 2011
![Page 94: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/94.jpg)
Demo
Wednesday, November 16, 2011
![Page 95: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/95.jpg)
Creating Conway’s Game of Life• Zero-player game• Cellular automation• Our version is 3D• Ported from Java with Prototype
95
Wednesday, November 16, 2011
![Page 96: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/96.jpg)
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
Wednesday, November 16, 2011
![Page 97: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/97.jpg)
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
Wednesday, November 16, 2011
![Page 98: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/98.jpg)
Demo
Wednesday, November 16, 2011
![Page 99: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/99.jpg)
Circle Visualizer • Extension to Google+• Presents shared circles in a new way• Other contributor: +JustinOrmont• Code is barely two days old
99
Wednesday, November 16, 2011
![Page 100: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/100.jpg)
Creating the Texturesfor url in @imageURLs
img = new Image()
img.onload = () ->
count += 1 #truncated
self.generateTexture(this, verticleOffset)
100
Wednesday, November 16, 2011
![Page 101: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/101.jpg)
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
Wednesday, November 16, 2011
![Page 102: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/102.jpg)
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
Wednesday, November 16, 2011
![Page 103: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/103.jpg)
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
Wednesday, November 16, 2011
![Page 104: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/104.jpg)
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
Wednesday, November 16, 2011
![Page 105: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/105.jpg)
Demo
Wednesday, November 16, 2011
![Page 106: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/106.jpg)
DeploymentJames Williams
Wednesday, November 16, 2011
![Page 107: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/107.jpg)
Agenda - Deployment• Chrome WebStore• TapJS• MacAppStore / Bodega• PhoneGap• Ubuntu Software Center
107
Wednesday, November 16, 2011
![Page 108: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/108.jpg)
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
Wednesday, November 16, 2011
![Page 109: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/109.jpg)
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
Wednesday, November 16, 2011
![Page 110: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/110.jpg)
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
Wednesday, November 16, 2011
![Page 111: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/111.jpg)
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
Wednesday, November 16, 2011
![Page 112: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/112.jpg)
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
Wednesday, November 16, 2011
![Page 113: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/113.jpg)
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
Wednesday, November 16, 2011
![Page 114: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/114.jpg)
Thanks for coming• Blog: http://jameswilliams.be/blog• Google+: +jameswilliams• Twitter: @ecspike• http://github.com/jwill
114
Wednesday, November 16, 2011
![Page 115: Intro to HTML5 Game Programming](https://reader033.fdocuments.in/reader033/viewer/2022051012/54431618afaf9ff3098b4868/html5/thumbnails/115.jpg)
Thanks for coming!
Wednesday, November 16, 2011