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.

Chrome Games Engineer
Previously:
Gamebryo @ Emergent
a few console games
scheib.net
@Vincent_Scheib

3 Dreams of Black

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

WebGL for Fast Graphics

ForPlay for Middleware

Cross-platform game abstraction library
Desktop, Web, Android, Flash
Open source
http://code.google.com/p/forplay/

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:
- Angry Birds SD mode
- playtankworld.com

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

Low latency, persistent, full duplex
Upgrades from HTTP handshake
UTF8
Simple to use

var socket = new WebSocket("ws://server.com");

socket.onopen = function(event) { 
  socket.send("Hello Server"); }

socket.onmessage = function(event) { 
  alert("Server says: " + event.data); }

Binary on the way; Unreliable being discussed

Application Cache

Cache HTML pages and resources
Manifest:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

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

5% Txn fee
No fixed fees
No monthly fees
No sign up fees
No licensing fees
http://goo.gl/5percentfees

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."

World Golf Tour Logo

Learn more

Spryfox + Chrome Web Store FTW

Early indications ... traffic from Chrome Web Store is twice as sticky as traffic from other sources.

Realm of the Mad God

Reach

Anatomy of a modern HTML5 game

Capabilities

Monetization / Distribution

Engines

Learning more

HTML5 game engines

~~Rocket Engine~~ - bought by Disney!
~~Aves~~ - bought by Zynga!
Impact
Crafty
Enchant
Isogenic Engine
Spaceport
ForPlay for GWT - Used by Angry Birds
Many many more

Mobile and HTML5

Impact compiles in Nitro JS engine, converts to OpenGL and OpenAL
Game Closure compiles to iOS and Android, converts to OpenGL
Spaceport deploys HTML5 games to laptops, iOS, and Android

C/C++ iOS games Ported to JavaScript/WebGL

Mandreel port of Great Little War Game

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 Rocks - Articles, tutorials
HTML5 Grind - HTML5 Games News
Hiive - Game dev
Subsonic Games - Game dev
Gopherwood Studios - Game dev
Phobos Lab - Game dev
Bocoup Blog - Game dev
Mozilla Developer Network - Tutorials, docs

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!

Slides cc-2011-html5-games.appspot.com
Vincent Scheib
- scheib.net
- @Vincent_Scheib

Presentation co-produced with
Chrome Developer Advocate: Seth Ladd
@sethladd

Super Happy Modern HTML5 Browser Games

Hi, I'm Vince.

3 Dreams of Black

Reach

47% of desktop browsers can play HTML5 games

Chrome has 160+ Million Active Users

Anatomy of a modern HTML5 game

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

Capabilities

WebGL

Canvas

Web Audio API

Web Sockets

Application Cache

IndexedDB

File System

More...

Native Client

Monetization / Distribution

In-App Payments

Chrome Web Store

World Golf Tour + Chrome Web Store FTW

Spryfox + Chrome Web Store FTW

Engines

HTML5 game engines

Mobile and HTML5

C/C++ iOS games Ported to JavaScript/WebGL

Learning more

HTML5 Game Conferences

Blogs, Articles

HTML5 Game Dev Books

Challenges

Potential

Thanks!