HTML5 Gaming

HTML5 GamingDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/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 EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev