• Canvas: The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.


• WebGL: WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser.
  
  WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering.
  
  WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins. The specification was released as version 1.0 on March 3, 2011.[1] WebGL is managed by the non-profit Khronos Group.

• Written in Java and ported with GWT.
• Uses a library developed called PlayN, which allowed developers to work entirely in Java.
• Physics engine called Web2D
• Find out more in an Interview with Joel Webber...
  http://www.infoq.com/news/2012/01/Angry-Birds-HTML5

First Thing... let's get a context and write to it

$('document').ready(function(){
	var canvas = $('#kickass')[0];
	var ctx = canvas.getContext('2d');
	...
	ctx.textAlign = "center";
	ctx.font  = 'bold 30px sans-serif';
	ctx.strokeText('Code PaLOUsa', canvas.width/2, 50);
});

1. requestAnimationFrame

2. Setup a Game loop

3. Do Some Updates and Draw

//this clear's the last screen
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.translate(x, y);
	            

game.ballSize = 55;
...
ctx.save();
ctx.translate(x, y);
game.ctx.drawImage(imageObject, step*game.ballSize, 0, 

     game.ballSize, game.ballSize, -game.ballSize/2, -game.ballSize/2, 

     game.ballSize, game.ballSize);
ctx.restore();

//advances the step
if (step<=MAX_STEP){
	step = step +1;
}else{
	step = MAX_STEP;
}
return step;
            

Kick Ass Technique 2: Let's make something explode

Kick Ass Technique 2:

• I found I had to use a modulus to skip a few frames to slowdown the animation.
• I made my graphics way too big. The drawImage() method has a scale parameter. Make your images smaller and scale if needed.

Seth Ladd

ASSET_MANAGER.queueSound('falling', theme.sounds.FALLING);

ASSET_MANAGER.queueDownload(theme.images.CHARACTER);
          

ASSET_MANAGER.getSound(theme.sounds.START).play();

ASSET_MANAGER.getAsset(theme.images.SPECIAL);
           

this.cache[path] = soundManager.createSound({
     id: id,
     autoLoad: true,
     url: path,
     onload: function() {
         that.successCount += 1;
         if (that.isDone()) {
             soundsCallback();
         }
     }
 });	          
	          

if(Math.floor(Math.random() * 10)===5){
	b.ballType = ASSET_MANAGER.getAsset(theme.images.SPECIAL);
	ASSET_MANAGER.getAsset(theme.sounds.FALLING).play({volume: 50});
	b.BASE_VALUE = 10;
}else{
	b.BASE_VALUE = 1;
	b.ballType = ASSET_MANAGER.getAsset(theme.images.BALL);
}	          
	          
	          

Technique 3/4 Observations:

• <3 <3 <3
• Really like Sound Manager 2

Overall Observations:

• Debugging/logging at 50 FPS is a totally different experience
• Cacheing... Browser, webserver
• Javascript processing on mobile devices REALLY are slower

• web worker (threads) Not Implemented

var worker = new Worker('my_task.js');  
worker.onmessage = function(event) {  
 console.log("Called back by the worker!\n");  
}; 

self.onmessage = function(event) {  
  self.postMessage('Hi there!');  
}; 

• Seth Ladd, Developer Advocate Google
• Sounds, http://www.freesound.org
• Graphics, http://depositphotos.com
• Google for Slide deck and, sheer Awesome-ness!