windows 8 game development using html5 and javascript
DESCRIPTION
Windows 8 Game development using HTML5 and JavaScript. Martin Beeby Technical Evangelist Microsoft @thebeebs. Agenda. Why Windows 810 ’ Store and distribution Options HTML5, DirectX, C#, Middleware Engines Basics of Canvas20’ Animation Collision Detection Sprites Using CreateJS 20’ - PowerPoint PPT PresentationTRANSCRIPT
Windows 8 Game development using HTML5 and JavaScriptMartin BeebyTechnical Evangelist Microsoft@thebeebs
Agenda
AgendaWhy Windows 8 10’Store and distributionOptions HTML5, DirectX, C#, Middleware Engines
Basics of Canvas 20’AnimationCollision DetectionSprites
Using CreateJS 20’Building a Windows 8 Game with a leaderboard in Azure.
Why Windows 8
The storeDesigned for DiscoveryUnprecedented reachFlexible business modelsTransparent termsBest economics
Flexibility of optionsOne time PurchaseUse Your Existing CommercePurchases over timeAd Supported
Basics of Canvas
In the beginning there was DomContentLoadeddocument.addEventListner(“DomContentLoaded”, init, false);
Game loopDOMContentLoaded
() init()
draw()
exit
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Canvas</title>
<script src="js/1.js"></script>
</head><body> <canvas id="gameCanvas" width="800" height="600">
</canvas></body> </html>
(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);
})();
Game loopDOMContentLoaded
() 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);
})();
Game loopDOMContentLoade
d() 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); } } }
CreateJSA JavaScript library that makes working with the HTML5 Canvas element easy.
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>_2dPlatformer</title> <script type="text/javascript" src="js/easeljs-0.4.2.min.js"></script> <script src="js/1.js"></script></head><body> <canvas id="gameCanvas" width="800" height="600"> </canvas></body> </html>
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"; }
Image Sprites
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"); }
PreloadJS
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(); }
http://bit.ly/Windows8GameLinks to EaselJS, and source code of both projects with instructions
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.