HTML5 Games

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