HTML5 Gaming
-
Upload
david-isbitski -
Category
Business
-
view
797 -
download
2
description
Transcript of HTML5 Gaming
![Page 1: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/1.jpg)
HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev
![Page 2: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/2.jpg)
Game LoopCanvas GamingGame Libraries
The Adventure Begins…
![Page 3: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/5.jpg)
HTML5 Game Libraries
Demo
![Page 6: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/6.jpg)
EaselJS
![Page 7: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/7.jpg)
• 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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/9.jpg)
• 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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/10.jpg)
API - http://easeljs.com/docs/
![Page 11: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/11.jpg)
EaselJS in Action
Demo
![Page 12: HTML5 Gaming](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022061206/5483366db079596a0c8b49d1/html5/thumbnails/13.jpg)
HTML5 GamingDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev