HTML5 Gaming

676 views
586 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Agenda
  • // You can reset canvas each frame by setting width (to anything)canvas.width = canvas.width;
  • Review of JavaScript Game Engines - https://github.com/bebraw/jswiki/wiki/Game-Engines
  • // You can reset canvas each frame by setting width (to anything)canvas.width = canvas.width;Text : Renders text in the context of the display list.Bitmap : Draws an image, video or canvas to the canvas according to its display properties.BitmapSequence : Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.Graphics : Provides a simple but powerful API for dynamically drawing vector graphics.Shape : Renders vector art via the Graphics object within the context of the display list.
  • API - http://easeljs.com/docs/
  • HTML5 Gaming

    1. 1. HTML5 GamingDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev
    2. 2. The Adventure Begins… Game Loop Canvas Gaming Game Libraries
    3. 3. Game Loop Overview Initialize Get User Engine Load Resources Input Calculate Test Criteria Give Free Resources FeedBack3
    4. 4. The Game Loop - JavaScriptvar FPS = 30;init(){ // Load content/graphics here // Start game loop setInterval(gameLoop, 1000/FPS);}gameLoop(){ // Update (Figure out what’s happening) // Draw (Show what’s happening)}
    5. 5. HTML5 GameLibraries Demo
    6. 6. EaselJS
    7. 7. EaselJS Overview• Canvas element can be difficult• EaselJS adds a DisplayList element like we are used to in Flash• Main Objects • DisplayObject : Abstract base class for all display elements in EaselJS. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects. • Stage : The root level display container for display elements that wraps the Canvas element. • Container : A nestable display container, which lets you aggregate display objects and manipulate them as a group.
    8. 8. EaselJS Overview Text : Renders text in the context of the display list. Bitmap : Draws an image, video or canvas to the canvas according to its display properties. BitmapSequence : Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing. Graphics : Provides a simple but powerful API for dynamically drawing vector graphics. Shape : Renders vector art via the Graphics object within the context of the display list.
    9. 9. EaselJS Overview• EaselJS is wrapping the Canvas calls for us • Works like the Stage we are used to in Flash• The stage is only rendered when you call stage.update()• The Ticker class handles time management. • Objects subscribe to be notified. • Similar to ENTER_FRAME event in Flash.
    10. 10. API - http://easeljs.com/docs/
    11. 11. EaselJS inAction Demo
    12. 12. Stuff for GamesHTML5 Gaming Libraries github.com/bebraw/jswiki/wiki/Game-EnginesEaselJS EaselJS.comSample Game Apps (XNA, etc.) create.msdn.com/en-US/education/catalogTons of Frameworks MakeAwesomeWeb.comDemos and More IETestDrive.com
    13. 13. HTML5 GamingDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev

    ×