HTML5 Games

tomatogilamonsterInternet and Web Development

Jun 24, 2012 (4 years and 9 months ago)

326 views

HTML5 Games

John Meister

john@pheeva.com

pheeva.tumblr.com

HTML5 Game


Game running in the browser


HTML


JavaScript


CSS


No plugins needed


HTML5


Term used to cover lots of new standards


New version of HTML


canvas, audio, video


CSS3


SVG


WebGL


New APIs


Storage, Touch, WebSockets,
Geolocation, Devices, WebWorkers


HTML5
-

Graphics


CSS3


Tons of new stuff


3D Transforms, Transitions, Animations


SVG Element


2D drawing surface


Vector drawing and some bitmap drawing


DOM like structure for drawn elements

HTML5
-

Graphics


Canvas element


2D drawing surface


Bitmap drawing and some vector drawing


JavaScript draw operations


WebGL


Based on OpenGL ES 2.0


Extension of canvas and optimized for JavaScript


Video element

HTML5
-

Audio


Audio Element


Biggest problem for HTML5 games


Originally designed for streaming


Different browsers support different formats


Browsers working to add more robust sound APIs


Sound Manager 2


JavaScript library which will fall back to Flash


HTML5
-

Other


Storage


Save data in the browser


Key/value and full SQL database


Offline caching


Touch


Lots of new touch events


Libraries to do things like gestures


Touchable Library


WebSockets


TCP networking

HTML5
-

Other


Geolocation


Devices


Camera


Microphone


WebWorkers


Background execution


File API


Manipulate files, drag & drop

Examples


Match Pheeva


DOM CSS3



Agent 008 Ball

-

Canvas



Pirates Love Daisies

-

Canvas



3D Tetris

-

Canvas



Quake 2

-

WebGL

HTML5
-

Resources


HTML5Rocks.com



slides.html5rocks.com



Google I/O Talk



Simple game start to finish

HTML5
-

Game Engines


Impact


Support canvas


Editor, export to iOS native


$99


Game Closure


Multiplayer with server
-
side JavaScript


Export to native


Private Beta


HTML5
-

Game Engines


Crafty


Component based game framework


Support for DOM and canvas


Free


LimeJS


Based on Google’s Closure framework


Support for canvas and WebGL


Free

HTML5
-

Game Engines


EaselJS


Library close to Flash


Support for canvas


Tools to import Flash animations


Free


Akihabara


8
-
bit style game engine


Simulated control pad for touch devices


Free


HTML5
-

Game Engines


AI2Canvas


Plugin for Adobe Illustrator


Content export to HTML5 and JavaScript


ForPlay


Uses GWT, so write games in Java


Export to HTML5, Flash, Android


Debuted at Google I/O, so early in development

HTML5 Future


Browsers continuing to improve


Latest JavaScript engines rival native apps


IE 9 added hardware acceleration for canvas


Adobe


Beta support for exporting to HTML5


Google’s Chrome Web App Store


Facebook’s
Project Spartan


HTML5 Discussion


Questions?


What HTML5 projects are you working on?


What experiences have you had with HTML5?


Flash vs. HTML5

HTML5 Games

John Meister

john@pheeva.com

pheeva.tumblr.com