1 / 20

HTML5 Game Engines

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

milt
Télécharger la présentation

HTML5 Game Engines

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Game Engines 1 DanNagle.com

  2. Write Once. Run Anywhere. 2 DanNagle.com

  3. HTML5 Standard HTML4 – 1997 HTML5 – 2012(Living) 3 DanNagle.com

  4. HTML5 Standard HTML4 – 1997 HTML5 – 2012(Living) 4 DanNagle.com

  5. Audio • Canvas • CSS3 • Device API • File API • Geolocation • Microdata • SVG • Web SQL Database • Web Sockets • Web Storage • Web Workers • WebGL New Features 5 DanNagle.com

  6. <audio> </audio> 6 DanNagle.com

  7. <audio> </audio> 7 DanNagle.com

  8. <audio> </audio> 8 DanNagle.com

  9. if ($.browser.webkit) { } if ($.browser.mozilla) { } if ($.browser.msie) { } Wrong! 9 DanNagle.com

  10. if(Modernizr.audio) { if (Modernizr.audio.mp3) { } if (Modernizr.audio.ogg) { } if (Modernizr.audio.wav) { } } Feature Detect 10 DanNagle.com

  11. EaselJS <canvas> </canvas> 11 DanNagle.com

  12. var manifest = [ {src:"sprites.png", id:"sprites"} ]; var loader = new createjs.LoadQueue(false); loader.onComplete= handleComplete; loader.loadManifest(manifest); Preload 12 DanNagle.com

  13. Crafty.e("gameBall, 2D, Canvas, Collision") .onHit(gamePaddle', function () { //handle hit }) Collision 13 DanNagle.com

  14. varfireBallsheet={ "animations": { rolling: [0, 3] }, "images": [“sprites.png"], "frames": { "height": 16, "width": 16} }; varfiress= new createjs.SpriteSheet(fireBallsheet ); Sprite sheets 14 DanNagle.com

  15. Crafty.e("bottomPaddle, 2D, Canvas, Multiway") .multiway(4, { LEFT_ARROW: 180, RIGHT_ARROW: 0 }) Keyboard 15 DanNagle.com

  16. goog.events.listen(mainScene, ['mousedown','touchstart'], function(e){ //handle touch }); Touch / Mouse 16 DanNagle.com

  17. update: function() { //every frame this.parent(); }, Tick 17 DanNagle.com

  18. Levels 18 DanNagle.com

  19. Levels 19 DanNagle.com

  20. developer.mozilla.org CraftyJS.com HTML5Test.com Modernizr.com LimeJS.com CreateJS.com whatwg.org/html ImpactJS.com Further Reading 20 DanNagle.com

More Related