Super Happy Modern HTML5 Browser Games
Vincent Scheib, July 20, 2011
Use arrow keys, space, or click on left and right of slides to navigate.
Ctrl/Command +/- to change zoom.
Some demo features require TOT Chrome or command line switches.
See the recording of this presentation.
Hi, I'm Vince.
a bit of HTML5 and WebGL inspiration...
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
47% of desktop browsers can play HTML5 games
Browser versions supporting Angry Birds / StatCounter, July 2011
Chrome has 160+ Million Active Users
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
Google Web Toolkit for Development, Debugging
Box2D for Physics
WebGL for Fast Graphics
HTML5 Canvas for Fallback
HTML5 App Cache for Offline
App Engine for Hosting
ForPlay for Middleware
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
WebGL
- OpenGL ES 2
- Textures, Framebuffers, Blending
- GLSL Vertex and Fragment Shaders
- Khronos Group Specification 1.0 in Q1 2011
Canvas
- 2D drawing API
- Sprites
- Vector paths, fills, gradients, text, etc
- Demos:
Web Audio API
- High performance, low latency audio
- Sample accurate scheduling
- Spatialization
- Convolution
- Frequency analysis (FFT)
- Filtering & Compression
- Raw synthesis or processing in JavaScript
- Demo shown: ToneCraft
- More
Web Sockets
Application Cache
IndexedDB
- Transactional database
- Good Performance
- Asynchronous API
- Synchronous available from worker threads
File System
- Large file storage
- Intelligently cache your resources
- Store large binary blobs
More...
- GeoLocation
- Device orientation
- Web Fonts
- CSS 3D (hover your mouse on me)
- SVG - Scalable Vector Graphics
Native Client
-
Run native code securely in browser
-
C++ as pervasive as JavaScript
-
Utilize legacy code bases
-
Access Graphics (2D/3D), Audio, Threading, raw memory, Input APIs.
-
Native code performance
-
Portable games across operating systems
-
Unity demonstrated last year; Dev Preview since February
-
Public release this fall in Chrome
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
In-App Payments
Chrome Web Store
-
No up front app review process
-
EA, Zynga, Atari, BigPoint, PopCap, and many indies
-
Chrome Web Store users use Chrome
World Golf Tour + Chrome Web Store FTW
"Chrome users play 23% more than those from other ... sources, and are buying virtual goods ... [at] 147% more than average."
Learn more
Spryfox + Chrome Web Store FTW
Early indications ... traffic from Chrome Web Store is twice as sticky as traffic from other sources.
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
HTML5 game engines
Mobile and HTML5
C/C++ iOS games Ported to JavaScript/WebGL
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
HTML5 Game Conferences
Sept 22-23, Poland
Nov 1-2, San Francisco
Blogs, Articles
HTML5 Game Dev Books
Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript
Learning HTML5 Game Programming
Reach
Anatomy of a modern HTML5 game
Capabilities
Monetization / Distribution
Engines
Learning more
Challenges
- Tools
- Multiple Implementations
- Proprietary Alternatives
Potential
- Reach
- Low Friction
- Open Standards
Thanks!