1. Windows 8 Game development using HTML5 and JavaScript Martin Beeby Technical Evangelist Microsoft @thebeebs

2. Agenda

3. Why Windows 8

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

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

6. Basics of Canvas

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

8. DOMContentLoaded()init() draw() exit

9. Canvas

10. (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); })();

12. DOMContentLoaded()init() gameLoop() draw() exit

13. (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); })();

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

16. (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); })();

19. (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); })();

21. 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; }

23. 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); }

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

27. _2dPlatformer

28. 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"; }

30. 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(); }

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

32. 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(); }

34. 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(); }

35. 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(); }

37. 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"); }

38. 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(); }

39. 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(); }

43. http://bit.ly/Windows8Game Links to EaselJS, and source code of both projects with instructions