HTML5 Gaming Dave Isbitski Sr. Developer Evangelist [email protected] blogs.msdn.com/davedev @TheDaveDev
HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev
Game LoopCanvas GamingGame Libraries
The Adventure Begins…
Game Loop Overview
All games do three things
Load content when they startUpdate the game worldDraw the game world
Efficient code (performance and
memory use) is critical!
Initialize Engine Load Resources
Free Resources
Get User Input
Calculate
Test Criteria
Give FeedBack
Typical Game Loop
3
var FPS = 30;
init(){ // Load content/graphics here
// Start game loopsetInterval(gameLoop, 1000/FPS);
}
gameLoop(){// Update (Figure out what’s happening)// Draw (Show what’s happening)
}
The Game Loop - JavaScript
HTML5 Game Libraries
Demo
EaselJS
• 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.
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.
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.
EaselJS Overview
API - http://easeljs.com/docs/
EaselJS in Action
Demo
Stuff for Games
HTML5 Gaming Librariesgithub.com/bebraw/jswiki/wiki/Game-Engines
EaselJSEaselJS.com
Sample Game Apps (XNA, etc.)create.msdn.com/en-US/education/catalog
Tons of FrameworksMakeAwesomeWeb.com
Demos and MoreIETestDrive.com
HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev