Intro to HTML5 Game Programming James Williams Wednesday, November 16, 2011
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
Wednesday, November 16, 2011
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
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
Agenda• HTML5 Basics• Canvas• SVG• WebGL• Deployment
5
Wednesday, November 16, 2011
HTML5 Basics
Wednesday, November 16, 2011
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
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
Sample AppCache FileCACHE MANIFEST
# version 1
CACHE:
/images/*
FALLBACK:/ /offline.html
NETWORK:
*
9
Wednesday, November 16, 2011
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
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
Storage• WebStorage
–LocalStorage–SessionStorage
• WebSQL• IndexedDB
12
Wednesday, November 16, 2011
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
IndexedDB• Endorsed by the W3C• Uses a NoSQL-like language for DB access• Transactional• Reminiscent of MongoDB and CouchDB
14
Wednesday, November 16, 2011
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
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
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
WebAudio API• API for processing and synthesizing sound• Allows playing multiple sounds• Overcomes shortcomings of the audio tag
18
Wednesday, November 16, 2011
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
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
Canvas2DJames Williams
Wednesday, November 16, 2011
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
What is Canvas 2D?• Immediate mode drawing API• Capable of using images and video• Scriptable with JavaScript
23
Wednesday, November 16, 2011
Drawing a Canvas<html> <head></head>
<body> <canvas id=’c’ width=”400” height=”400"/>
</body>
</html>
24
Wednesday, November 16, 2011
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
Drawing Objects• beginPath• arc / arcTo / bezierCurveTo / quadracticCurveTo• moveTo• lineTo• lineWidth• rect• closePath• stroke
26
Wednesday, November 16, 2011
Transformations• scale( x, y)• rotate (radians)• translate (x, y)• transform (a, b, c, d, e, f)
27
Wednesday, November 16, 2011
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
Pixel Manipulation•createImageData(sw, sh)
•createImageData(imagedata)
•getImageData(sx,sy,sw,sh)
•putImageData(imagedata, dx, dy, [...])
29
Wednesday, November 16, 2011
Demo
Wednesday, November 16, 2011
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
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
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
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
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
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
Demo
Wednesday, November 16, 2011
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
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
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
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
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
Demo
Wednesday, November 16, 2011
SVGJames Williams
Wednesday, November 16, 2011
Agenda - SVG• What is SVG?• Components• Painting and Compositing• Animation• Raphael.js• Creating a Video Poker Game
45
Wednesday, November 16, 2011
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
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
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
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
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
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
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
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
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
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
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
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
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
Evaluating Poker Hands• The Card “class” has built-in properties for:
–ordinal value–suit
• groupBy (underscore)• pluck (underscore)
59
Wednesday, November 16, 2011
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
Demo
Wednesday, November 16, 2011
WebGL
Wednesday, November 16, 2011
Agenda - WebGL• What is WebGL?• What is Three.js?• Lighting, Shaders, and Materials• Creating Meshes• GLSL• Exporters• Animation• Debugging
63
Wednesday, November 16, 2011
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
Getting a WebGLContext• Hook to draw on the canvasvar canvas = document.getElementById(“c”);var ctx = c.getContext(“experimental-webgl”);
65
Wednesday, November 16, 2011
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
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
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
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
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
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
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
Shading• Flat• Lambertian• Gouraud• Phong
73
Wednesday, November 16, 2011
Materials• MeshBasicMaterial• MeshLambertMaterial• MeshPhongMaterial• MeshShaderMaterial• Common Properties
–color / ambient–specular–shininess–opacity–mappings–blending
74
Wednesday, November 16, 2011
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
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
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
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
Shader Variables• uniform• varying• attribute• Types:
–bool–int–float–vec2 / vec3 / vec4–mat2 / mat3 / mat4–sampler2D, etc
79
Wednesday, November 16, 2011
Constructing New Shader Typesstruct MyMaterial {
vec4 ambient;
vec4 diffuse;
vec4 specular; float shininess;
};
80
Wednesday, November 16, 2011
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
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
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
2D Texture Coordinates
84
(1,1)
(0,0) (1,0)
(0,1)
Wednesday, November 16, 2011
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
Demo
Wednesday, November 16, 2011
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
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
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
Demo
Wednesday, November 16, 2011
AnimationArmature - 3D representation of bones, ligaments, and tendons
• Forward kinematics• Inverse kinematics• Keyframes/Morph targets
91
Wednesday, November 16, 2011
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
MorphTargetsmesh.morphTargetInfluences[ keyframe ] = ( time % interpol ) / interpolation;
mesh.morphTargetInfluences[ lastFrame ] = 1 - mesh.morphTargetInfluences[keyframe];
93
Wednesday, November 16, 2011
Demo
Wednesday, November 16, 2011
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
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
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
Demo
Wednesday, November 16, 2011
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
Creating the Texturesfor url in @imageURLs
img = new Image()
img.onload = () ->
count += 1 #truncated
self.generateTexture(this, verticleOffset)
100
Wednesday, November 16, 2011
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
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
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
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
Demo
Wednesday, November 16, 2011
DeploymentJames Williams
Wednesday, November 16, 2011
Agenda - Deployment• Chrome WebStore• TapJS• MacAppStore / Bodega• PhoneGap• Ubuntu Software Center
107
Wednesday, November 16, 2011
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
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
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
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
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
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
Thanks for coming• Blog: http://jameswilliams.be/blog• Google+: +jameswilliams• Twitter: @ecspike• http://github.com/jwill
114
Wednesday, November 16, 2011
Thanks for coming!
Wednesday, November 16, 2011