html5 game engines
DESCRIPTION
HTML5 Game Engines. 1. DanNagle.com. Write Once. Run Anywhere. . 2. DanNagle.com. HTML5 Standard. HTML4 – 1997 HTML5 – 2012 (Living). 3. DanNagle.com. HTML5 Standard. HTML4 – 1997 HTML5 – 2012 (Living). 4. DanNagle.com. Audio Canvas CSS3 Device API File API Geolocation - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/1.jpg)
HTM
L5 G
ame
Engi
nes
DanNagle.com 1
![Page 2: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/2.jpg)
Write Once.Run Anywhere.
DanNagle.com 2
![Page 3: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/3.jpg)
HTML
5 St
anda
rd
HTML4 – 1997HTML5 – 2012 (Living)
DanNagle.com 3
![Page 4: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/4.jpg)
HTML
5 St
anda
rd
HTML4 – 1997HTML5 – 2012 (Living)
DanNagle.com 4
![Page 5: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/5.jpg)
New
Feat
ures
DanNagle.com 5
• Audio• Canvas• CSS3• Device API• File API• Geolocation• Microdata• SVG• Web SQL Database• Web Sockets• Web Storage• Web Workers• WebGL
![Page 6: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/6.jpg)
<audio></audio>
DanNagle.com 6
![Page 7: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/7.jpg)
<audio></audio>
DanNagle.com 7
![Page 8: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/8.jpg)
<audio></audio>
DanNagle.com 8
Browser Ogg Vorbis MP3 WAV
Firefox 19 Yes Yes
Chrome 25 Yes Yes Yes
Safari 6 Yes Yes
Opera 12 Yes Yes
IE 9 Yes
![Page 9: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/9.jpg)
Wro
ng!
DanNagle.com 9
if ($.browser.webkit) { }
if ($.browser.mozilla) { }
if ($.browser.msie) { }
![Page 10: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/10.jpg)
Feat
ure
Dete
ct
DanNagle.com 10
if(Modernizr.audio) { if (Modernizr.audio.mp3) { }
if (Modernizr.audio.ogg) { }
if (Modernizr.audio.wav) { }}
![Page 11: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/11.jpg)
<canvas></canvas>
DanNagle.com 11
EaselJS
![Page 12: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/12.jpg)
Preload
DanNagle.com 12
var manifest = [
{src:"sprites.png", id:"sprites"}
];
var loader = new createjs.LoadQueue(false);loader.onComplete = handleComplete;loader.loadManifest(manifest);
![Page 13: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/13.jpg)
Collision
DanNagle.com 13
Crafty.e("gameBall, 2D, Canvas, Collision")
.onHit(gamePaddle', function () { //handle hit
})
![Page 14: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/14.jpg)
Sprit
e sh
eets
DanNagle.com
var fireBallsheet ={ "animations": { rolling: [0, 3] }, "images": [“sprites.png"], "frames": { "height": 16, "width": 16}}; var firess = new
createjs.SpriteSheet(fireBallsheet );
14
![Page 15: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/15.jpg)
Keyboard
DanNagle.com 15
Crafty.e("bottomPaddle, 2D, Canvas, Multiway").multiway(4, { LEFT_ARROW: 180, RIGHT_ARROW: 0
})
![Page 16: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/16.jpg)
Touch / Mouse
DanNagle.com 16
goog.events.listen(mainScene, ['mousedown', 'touchstart'], function(e){
//handle touch });
![Page 17: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/17.jpg)
Tick
DanNagle.com 17
update: function() { //every frame
this.parent();},
![Page 18: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/18.jpg)
Leve
ls
DanNagle.com 18
![Page 19: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/19.jpg)
Leve
ls
DanNagle.com 19
![Page 20: HTML5 Game Engines](https://reader035.vdocuments.mx/reader035/viewer/2022081507/56816626550346895dd981eb/html5/thumbnails/20.jpg)
Further Reading
DanNagle.com 20
CraftyJS.com HTML5Test.com
whatwg.org/html
Modernizr.com
developer.mozilla.org
ImpactJS.com
CreateJS.comLimeJS.com