HTML Games for
the Real World

Jiri Kupiainen

Vice President, Rocket Pack
Disney Interactive Media Group

Twitter

#gdconline

@jiri

What to expect

"Making browser games
for today's browsers"

• State of HTML5
• Practical tips learned
  the hard way

What not to expect

• Code
• Hype

This is me

jiri@rocketpack.fi

Where I work

Warimals

warimals.com

My boss

Today's topic

HTML5, a definition

[...]5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

(HTML5 W3C Working Draft 25 May 2011)

HTML5, the good stuff

• Canvas & WebGL
• Faster JavaScript
• Audio & Video
• Web Sockets
• CSS3
• Device APIs
• Local storage
• Web Workers

Let's build a game!

Concept:

Gears of War
meets
Pong!

Concept Art

DDWBE Prototype

Features

• Animated sprites!
• Sound effects!
• Input!

Target Platforms

• Browser!

About that "Browser"...

Browser market shares (Top 20)

(Source: Wikimedia Traffic Analysis Report, June 2011)

Let's drop the ones below 1%!

(Hey, where did Android go?)

(Total Android share: 1.54%)

Graphics!

The contestants

• WebGL: OpenGL in the browser!
• SVG: Vector graphics in the browser!
• Canvas: GetPixel & PutPixel in the browser!
  (and all the other bitmap stuff, too.)
• DOM: Umm. HTML in the browser?

WebGL support in browsers

Not enabled for all users even where supported.

Canvas support* in browsers

* We just need sprites, man

Performance varies.

SVG support in browsers

Performance often not good enough for games.

The DOM

(Source: Ghost Sites of the Web)

DOM Tricks & Gotchas

Avoid Repaint

Repaint is when the browser has to repaint something (doh!)

Triggered by visual changes that don't affect layout.

• Changing colors
• Background images

Takes time, but not as deadly as reflow...

Reflow

Reflow is when the browser has to recalculate geometry.

Triggered by changes that affect layout.

• Modifying the DOM tree
• Changing sizes / padding / margins...
• Reading calculated properties
  (offset, scroll, client, computedstyle...)

Avoiding Reflow

• Don't mess with the DOM (pooling)
• If you do, batch your changes (DocumentFragment)
• Avoid changing individual style attributes (use classes or the style attribute where possible)
• Cache calculated properties

There are tools for profiling browser drawing & geometry. Use them!

IE8, 24 bit PNGs, Opacity

Fact: IE8 will mangle your 24 bit PNGs if the opacity is set to anything less than 1.

• There are workarounds, but none of them are perfect.
• If you need opacity, use 8 bit PNGs. If you need an alpha channel, don't use opacity.
  (Or use 8 bit everywhere for retro points and performance)

Scaling, rotating & IE8

• IE has had this stuff for a while
• Unfortunately, it's pretty slow
• And different syntax than CSS3
• zoom instead of transform
• DXImageTransform instead of... transform
• Different origin than other browsers - use transform-origin

Google is your friend here...

Cool CSS3 Stuff

Handy for improving iOS performance, making presentations

• 3d transforms for hardware acceleration
• CSS animations for super-smooth (potentially annoying) animations

Remember: you'll still need fallbacks
(except for things like this presentation)

iOS & Graphics

• Limit on graphics:
  6.5MB (iPad) / 10MB (iPhone)
• When you run out, you don't get errors
• But weird things start happening.
• You might be able to load more using the css background-image property, but crashing will result.
• Make things easy for the garbage collector:

img.src = 'data:image/gif;base64,' + 'R0lGODlhAQABAAD' + '/ACwAAAAAAQABAAACADs=';

Sound!

Audio support in browsers

Not seen here: codec wars, buggy implementations.

HTML5 Audio format support

Guess who invented
the WAV file format?

Microsoft.

So, what about IE8?

Yup. Use Flash for audio.

Just use SoundManager2

Mobile Safari and Audio

• Safari on iOS never preloads
• Audio playback must be triggered by user action
• Only one sound at a time

However, there is a way around this. More on that later.

Input!

It mostly just works!

Input tricks & gotchas

• Use as few listeners as possible
• Prevent all default events, cancel events
• Do not use click events on iOS

Do not use
click events on iOS.

• iOS waits 300ms to determine whether you're doing a gesture or not.
• In 30 FPS, that's 9 frames lost.

Simple solution:

Use touch events instead.

Networking!

(the kind that doesn't involve beer)

Web Socket support in browsers

Meh.

Just use Socket.IO

Deployment!

(there's, like, two slides left...)

Deployment

OMG what if someone steals my code

• Google Closure Compiler
• uglify.js
• ...plus a whole bunch of others

"Native" builds

• Phonegap
• Testflight for easy on-device testing

Do I really have to deal with all this stuff?

• https://github.com/bebraw/
  jswiki/wiki/Game-Engines
  64 total
• Impact
• GameSalad
  (disclaimer: Disney-backed Steamboat Ventures is an investor)
• GameMaker
• Google's PlayN

Phew.

So, about Double Death Warball Explosion...

Thank you!

1. Check your email!

The GDC Online Event Team (and I) want to know what you think.
(consider skipping this part if you think it sucked)

2. Get the goodies!

http://jirikupiainen.com/gdco11

3. Get in touch!

@jiri | jiri@rocketpack.fi

Useful Links

• SoundManager 2
• Socket.IO
• Phonegap
• Automatic installation of IE virtual machines

Acknowledgements

HTML5 Logo by W3C

Browser support: When can I use...

Being awesome: Rocket Pack team