Windows 8 Game development using HTML5 and JavaScript Martin Beeby Technical Evangelist

Agenda

Why Windows 8

Designed for Discovery Unprecedented reach Flexible business models Transparent terms Best economics

One time Purchase Use Your Existing Commerce Purchases over time Ad Supported

Basics of Canvas

document.addEventListner(“DomContentLoaded”, init, false);

DOMContentLoaded()init() draw() exit

Canvas

(function() { var game = {}; var supportsCanvas, canvasElement, canvasContext; game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d');; console.log('Game Loaded, And canvas support is: ' + supportsCanvas); game.draw(); } game.draw = function () { canvasContext.fillStyle = "rgba(0,0,0,1)"; canvasContext.fillRect(20, 20, 10, 10); } document.addEventListener("DOMContentLoaded", game.init, false); })();

DOMContentLoaded()init() gameLoop() draw() exit

(function() { var game = {}; var supportsCanvas, canvasElement, canvasContext; game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d');; console.log('Game Loaded, And canvas support is: ' + supportsCanvas); game.startGameLoop(); } game.startGameLoop = function () { window.requestAnimationFrame(game.gameLoop); }, game.gameLoop = function () { game.draw(); window.requestAnimationFrame(game.gameLoop); }, game.draw = function () { canvasContext.fillStyle = "rgba(0,0,0,1)"; canvasContext.fillRect(Math.random() * 400, Math.random() * 300, 10, 10); } document.addEventListener("DOMContentLoaded", game.init, false); })();

DOMContentLoaded()init() gameLoop() draw() exit clear()

(function() { var game = {}; var supportsCanvas, canvasElement, canvasContext; game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d'); console.log('Game Loaded, And canvas support is: ' + supportsCanvas); window.requestAnimationFrame(game.gameLoop); } game.gameLoop = function () { game.clear(); game.draw(); window.requestAnimationFrame(game.gameLoop); } game.draw = function () { canvasContext.fillStyle = "rgba(0,0,0,1)"; canvasContext.fillRect(Math.random() * 400, Math.random() * 300, 10, 10); } game.clear = function () { canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height); } document.addEventListener("DOMContentLoaded", game.init, false); })();

(function() { var game = {}; var supportsCanvas, canvasElement, canvasContext; var lilSquareList = []; game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d'); console.log('Game Loaded, And canvas support is: ' + supportsCanvas); window.requestAnimationFrame(game.gameLoop); } game.gameLoop = function () { game.clear(); var square = { w: 10, h: 10, xSpeed: randomXToY(-10, 10), ySpeed: randomXToY(-10, 10), x: canvasContext.canvas.width / 2, y: canvasContext.canvas.height / 2, }; lilSquareList.push(square); game.draw(); window.requestAnimationFrame(game.gameLoop); } game.draw = function () { for (var i = 0; i < lilSquareList.length; i++) { var square = lilSquareList[i]; canvasContext.fillStyle = "rgba(255,3,255,0.5)"; canvasContext.fillRect(square.x, square.y, square.w, square.h); square.x = square.x - square.xSpeed; square.y = square.y + square.ySpeed; square.size = square.size - 0.1; } game.clear = function () { canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height); } function randomXToY(minVal, maxVal, floatVal) { var randVal = minVal + (Math.random() * (maxVal - minVal)); return typeof floatVal == 'undefined' ? Math.round(randVal) : randVal.toFixed(floatVal); } document.addEventListener("DOMContentLoaded", game.init, false); })();

var gravity = -1; game.draw = function () { for (var i = 0; i < lilSquareList.length; i++) { var square = lilSquareList[i]; canvasContext.fillStyle = "rgba(255,3,255,0.5)"; canvasContext.fillRect(square.x, square.y, square.w, square.h); square.x = square.x - square.xSpeed; square.y = (square.y + square.ySpeed) square.ySpeed = square.ySpeed - gravity; square.size = square.size - 0.1; }

game.draw = function () { var square = { w: 10, h: 10, xSpeed: randomXToY(-10, 10), ySpeed: randomXToY(-10, 10), x: canvasContext.canvas.width / 2, y: canvasContext.canvas.height / 2, }; lilSquareList.push(square); for (var i = 0; i < lilSquareList.length; i++) { var square = lilSquareList[i]; canvasContext.fillStyle = "rgba(255,3,255,0.5)"; canvasContext.fillRect(square.x, square.y, square.w, square.h); square.x = square.x - square.xSpeed; square.y = (square.y + square.ySpeed) square.ySpeed = square.ySpeed - gravity; square.size = square.size - 0.1; if (square.y > (canvasContext.canvas.height) - 100) { square.ySpeed = -(square.ySpeed); }

CreateJS A JavaScript library that makes working with the HTML5 Canvas element easy.

_2dPlatformer

var supportsCanvas, canvasElement, canvasContext, imgMonsterARun, stage, spriteSheet, bmpAnimation; game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d'); stage = new Stage(canvasElement); console.log('Game Loaded, And canvas support is: ' + supportsCanvas); imgMonsterARun = new Image(); imgMonsterARun.onload = game.setupCharacters; imgMonsterARun.onerror = game.error; imgMonsterARun.src = "images/MonsterARun.png"; }

game.setupCharacters = function () { spriteSheet = new SpriteSheet({ images: [imgMonsterARun], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { walk: [0, 9, "walk"] } }); bmpAnimation = new BitmapAnimation(spriteSheet); bmpAnimation.gotoAndPlay("walk"); bmpAnimation.shadow = new Shadow("#454", 0, 5, 4); // Shadows are slow bmpAnimation.name = "monster1"; bmpAnimation.direction = 90; bmpAnimation.vX = 4; bmpAnimation.x = 16; bmpAnimation.y = 32; bmpAnimation.currentFrame = 0; stage.addChild(bmpAnimation); game.gameLoop(); }

game.gameLoop = function () { game.clear(); game.draw(); window.requestAnimationFrame(game.gameLoop); }

game.draw = function () { // Hit testing the screen width, otherwise our sprite would disappear if (bmpAnimation.x >= canvasContext.canvas.width - 16) { // We've reached the right side of our screen bmpAnimation.direction = -90; } if (bmpAnimation.x < 16) { // We've reached the left side of our screen // We need to walk right now bmpAnimation.direction = 90; } // Moving the sprite based on the direction & the speed if (bmpAnimation.direction == 90) { bmpAnimation.x += bmpAnimation.vX; } else { bmpAnimation.x -= bmpAnimation.vX; } stage.update(); }

game.setupCharacters = function () { spriteSheet = new SpriteSheet({ images: [imgMonsterARun], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { walk: [0, 9, "walk", 4 ] } }); SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false); bmpAnimation = new BitmapAnimation(spriteSheet); bmpAnimation.gotoAndPlay("walk_h"); bmpAnimation.shadow = new Shadow("#454", 0, 5, 4); bmpAnimation.name = "monster1"; bmpAnimation.direction = 90; bmpAnimation.vX = 4; bmpAnimation.x = 16; bmpAnimation.y = 32; bmpAnimation.currentFrame = 0; stage.addChild(bmpAnimation); game.gameLoop(); }

game.draw = function () { // Hit testing the screen width, otherwise our sprite would disappear if (bmpAnimation.x >= canvasContext.canvas.width - 16) { // We've reached the right side of our screen // We need to walk left now to go back to our initial position bmpAnimation.direction = -90; bmpAnimation.gotoAndPlay("walk"); } if (bmpAnimation.x < 16) { // We've reached the left side of our screen // We need to walk right now bmpAnimation.direction = 90; bmpAnimation.gotoAndPlay("walk_h"); } if (bmpAnimation.direction == 90) { bmpAnimation.x += bmpAnimation.vX; } else { bmpAnimation.x -= bmpAnimation.vX; } stage.update(); }

game.init = function () { supportsCanvas = !!document.createElement('canvas').getContext; canvasElement = document.getElementById("gameCanvas"); canvasContext = canvasElement.getContext('2d'); stage = new Stage(canvasElement); console.log('Game Loaded, And canvas support is: ' + supportsCanvas); var manifest = [ { src: "images/MonsterARun.png", id: "imgMonsterARun" }, { src: "images/MonsterAIdle.png", id: "imgMonsterAIdle" } ]; preload = new PreloadJS(); preload.onComplete = game.setupCharacters; preload.loadManifest(manifest); preload.getResult("imgMonsterARun"); }

game.setupCharacters = function () { var image = preload.getResult("imgMonsterARun").result; spriteSheet = new SpriteSheet({ images: [image], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { walk: [0, 9, "walk", 4] } }); SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false); bmpAnimation = new BitmapAnimation(spriteSheet); bmpAnimation.gotoAndPlay("walk_h"); //animate bmpAnimation.shadow = new Shadow("#454", 0, 5, 4); bmpAnimation.name = "monster1"; bmpAnimation.direction = 90; bmpAnimation.vX = 4; bmpAnimation.x = 16; bmpAnimation.y = 32; bmpAnimation.currentFrame = 0; stage.addChild(bmpAnimation); var imgMonsterAIdle = preload.getResult("imgMonsterAIdle").result; spriteSheetIdle = new SpriteSheet({ images: [imgMonsterAIdle], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { idle: [0, 10, "idle", 4] } }); bmpAnimationIdle = new BitmapAnimation(spriteSheetIdle); bmpAnimationIdle.name = "monsteridle1"; bmpAnimationIdle.x = 16; bmpAnimationIdle.y = 32; game.gameLoop(); }

game.draw = function () { if (bmpAnimation.x >= canvasContext.canvas.width - 16) { // We've reached the right side of our screen bmpAnimation.direction = -90; bmpAnimation.gotoAndPlay("walk"); } if (bmpAnimation.x < 16) { bmpAnimation.direction = 90; bmpAnimation.gotoAndStop("walk"); stage.removeChild(bmpAnimation); bmpAnimationIdle.gotoAndPlay("idle"); stage.addChild(bmpAnimationIdle); } if (bmpAnimation.direction == 90) { bmpAnimation.x += bmpAnimation.vX; } else { bmpAnimation.x -= bmpAnimation.vX; } stage.update(); }

Links to EaselJS, and source code of both projects with instructions