html5 gaming

13
HTML5 Gaming Dave Isbitski Sr. Developer Evangelist [email protected] blogs.msdn.com/davedev @TheDaveDev

Upload: david-isbitski

Post on 05-Dec-2014

794 views

Category:

Business


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: HTML5 Gaming

HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev

Page 2: HTML5 Gaming

Game LoopCanvas GamingGame Libraries

The Adventure Begins…

Page 3: HTML5 Gaming

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

Page 4: HTML5 Gaming

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

Page 5: HTML5 Gaming

HTML5 Game Libraries

Demo

Page 6: HTML5 Gaming

EaselJS

Page 7: HTML5 Gaming

• 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

Page 8: HTML5 Gaming

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

Page 9: HTML5 Gaming

• 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

Page 10: HTML5 Gaming

API - http://easeljs.com/docs/

Page 11: HTML5 Gaming

EaselJS in Action

Demo

Page 12: HTML5 Gaming

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

Page 13: HTML5 Gaming

HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev