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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο