slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Windows 8 Game development using HTML5 and JavaScript PowerPoint Presentation
Download Presentation
Windows 8 Game development using HTML5 and JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 43

Windows 8 Game development using HTML5 and JavaScript - PowerPoint PPT Presentation


  • 192 Views
  • Updated on

Windows 8 Game development using HTML5 and JavaScript. Martin Beeby Technical Evangelist Microsoft @thebeebs. Agenda. Why Windows 8 10 ’ Store and distribution Options HTML5, DirectX, C#, Middleware Engines Basics of Canvas 20’ Animation Collision Detection Sprites Using CreateJS 20’

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Windows 8 Game development using HTML5 and JavaScript


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
    Presentation Transcript
    1. Windows 8 Game development using HTML5 and JavaScript Martin Beeby Technical Evangelist Microsoft @thebeebs

    2. Agenda Why Windows 8 10’ Store and distribution Options HTML5, DirectX, C#, Middleware Engines Basics of Canvas 20’ Animation Collision Detection Sprites Using CreateJS 20’ Building a Windows 8 Game with a leaderboard in Azure.

    3. Why Windows 8

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

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

    6. Basics of Canvas

    7. In the beginning there was DomContentLoaded document.addEventListner(“DomContentLoaded”, init, false);

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

    9. <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>Canvas</title> <scriptsrc="js/1.js"></script> </head> <body> <canvasid="gameCanvas"width="800"height="600"> </canvas> </body> </html>

    10. (function() { var game = {}; varsupportsCanvas, 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); })();

    11. Game loop DOMContentLoaded() init() gameLoop() draw() exit

    12. (function() { var game = {}; varsupportsCanvas, 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); })();

    13. Game loop DOMContentLoaded() init() gameLoop() clear() draw() exit

    14. (function() { var game = {}; varsupportsCanvas, 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); })();

    15. (function() { var game = {}; varsupportsCanvas, canvasElement, canvasContext; varlilSquareList = []; 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 (vari = 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); } functionrandomXToY(minVal, maxVal, floatVal) { var randVal = minVal + (Math.random() * (maxVal - minVal)); returntypeoffloatVal == 'undefined' ? Math.round(randVal) : randVal.toFixed(floatVal); } document.addEventListener("DOMContentLoaded", game.init, false); })();

    16. var gravity = -1; game.draw= function () { for (vari = 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; } }

    17. 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 (vari = 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); } } }

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

    19. <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>_2dPlatformer</title> <scripttype="text/javascript"src="js/easeljs-0.4.2.min.js"></script> <scriptsrc="js/1.js"></script> </head> <body> <canvasid="gameCanvas"width="800"height="600"> </canvas> </body> </html>

    20. varsupportsCanvas, 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"; }

    21. Image Sprites

    22. game.setupCharacters = function () { spriteSheet = newSpriteSheet({ images: [imgMonsterARun], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { walk: [0, 9, "walk"] } }); bmpAnimation= newBitmapAnimation(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(); }

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

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

    25. game.setupCharacters = function () { spriteSheet = newSpriteSheet({ images: [imgMonsterARun], frames: { width: 64, height: 64, regX: 32, regY: 32 }, animations: { walk: [0, 9, "walk", 4] } }); SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false); bmpAnimation= newBitmapAnimation(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(); }

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

    27. PreloadJS 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 = newPreloadJS(); preload.onComplete = game.setupCharacters; preload.loadManifest(manifest); preload.getResult("imgMonsterARun"); }

    28. game.setupCharacters = function () { • var image = preload.getResult("imgMonsterARun").result; • spriteSheet = newSpriteSheet({ • images: [image], • frames: { width: 64, height: 64, regX: 32, regY: 32 }, • animations: { • walk: [0, 9, "walk", 4] • } • }); • SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false); • bmpAnimation= newBitmapAnimation(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); • varimgMonsterAIdle = preload.getResult("imgMonsterAIdle").result; • spriteSheetIdle = newSpriteSheet({ • images: [imgMonsterAIdle], • frames: { width: 64, height: 64, regX: 32, regY: 32 }, • animations: { • idle: [0, 10, "idle", 4] • } • }); • bmpAnimationIdle = newBitmapAnimation(spriteSheetIdle); • bmpAnimationIdle.name = "monsteridle1"; • bmpAnimationIdle.x = 16; • bmpAnimationIdle.y = 32; • game.gameLoop(); • }

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

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