A talk given at the 2nd HTML5 Developer Conference in San Francisco tackling the things that the platform gives you for free (or cheap), the issues with HTML5 game development, and finally some ways to work around known limitations such as sound and animation performance.
A Holistic Approach to HTML5 Game Design & Development
1. A Holistic Approach to HTML
Game Design & Development
Karl Bunyan
Developer, GSN
2. What this is about
• Planning a game to be built in HTML5 so you
don’t cancel a project or revise down
expectations mid-way
3. What this is about
• Planning a game to be built in HTML5 so you
don’t cancel a project or revise down
expectations mid-way
• Planning a game to take advantage of the
features HTML & JavaScript can offer
4. What this is about
• Planning a game to be built in HTML5 so you
don’t cancel a project or revise down
expectations mid-way
• Planning a game to take advantage of the
features HTML & JavaScript can offer
• Some technical tips to work around areas
where HTML5 may struggle
5. Who am I?
• I wrote some 8-bit games in the late 80s
• Started web development in the late 90s
• Built websites, touchscreens, Director 3D art
installations, interactive television info-
sites, all kinds of data-driven thingies
• Involved in social apps and games since 2007
• Work for GSN making games for Facebook
8. Where are HTML games today?
• Wild west frontier exploration?
• A return to the 2000’s with
browser wars, fragmentation
and walled gardens?
9. Where are HTML games today?
• Wild west frontier exploration?
• A return to the 2000’s with
browser wars, fragmentation
and walled gardens?
• Games programming in the 80’s
10. Where’s my jet pack?
Why is today like the 80’s?
• The solo coder and small teams: Tiny
Wings, Tiny Tower
• Technical constraints mean that brain power
can compensate for processing power
• New territory to be explored and new players
to reach
13. Limited memory
In the 80s we had:
• 32kb for the whole program and assets
• Games loaded from tape for 3-5 minutes
Now we have:
• Download size concerns for web games
• App install size limitations
14. Limited colours
In the 80s we had:
• 2 colours per 8 x 8 pixel square
• And only 256 x 192 pixels
Now we have:
• Variable screen sizes
• Variable animation performance
• “Works for me” is a problem
15. Limited frame rate
In the 80s we had:
• No GPUs and processors were slow
• Had to program in machine code
Now we have:
• Variable device capabilities and acceleration
• High level scripting languages (phew)
16. Simple sound capabilities
In the 80s we had:
• Single channel, telephone speaker
• Multi-channel was faked
Today we have:
• The woeful state of HTML5 sound
– especially iOS
17. HTML5 - my definition
• Distinguished by an ethos
– A cohesive, open movement (No plug-ins)
– No white elephant (VRML)
– Not just needless bells and whistles (DHTML)
18. HTML5 - my definition
• Distinguished by an ethos
– A cohesive, open movement (No plug-ins)
– No white elephant (VRML)
– Not just needless bells and whistles (DHTML)
• Often a label applied to web sites that move
19. HTML5 - my definition
• Distinguished by an ethos
– A cohesive, open movement (No plug-ins)
– No white elephant (VRML)
– Not just needless bells and whistles (DHTML)
• Often a label applied to web sites that move
• It’s easier to sell something that has a name
22. The future
One certainty:
• Constant increases in
HTML5 performance
Lots of uncertainties:
• The decline of Flash?
• What’s Microsoft up to
with Metro?
25. Making a plan
come together
Making the most
of what HTML5
can give you
And avoiding the
sucky parts
26. Cross-platform
• Build for web and mobile
together
• The write-once run-anywhere
fallacy E.g. Java.
• But skills are transferable
27. Social features
• Asynchronous turn-based play
or synchronous
• HTML games are an efficient way
of targeting multiple platforms
• more platforms means more players
• Facebook sharing
30. Planning a game
Problems you’ll encounter:
• Platform fragmentation
• Legacy web browsers
• And legacy mobile devices
31. Planning a game
Problems you’ll encounter:
• Platform fragmentation
• Legacy web browsers
• And legacy mobile devices
• Animation performance, frame rate
32. Planning a game
Problems you’ll encounter:
• Platform fragmentation
• Legacy web browsers
• And legacy mobile devices
• Animation performance, frame rate
• Sound
33. Planning a game
Problems you’ll encounter:
• Platform fragmentation
• Legacy web browsers
• And legacy mobile devices
• Animation performance, frame rate
• Sound
• Payments/monetisation
36. Screen sizes
The web is scalable
• but this has to be built into the design
– Edge bleeding
– Viewport scaling on mobile
• <meta name="viewport" content="width=1024;
user-scalable=no;” />
• Will your graphics hold up?
37. Device performance
• iOS 5 beats Android;
Webkit excellent; Firefox
good; IE improving
• Cut out some animations
for poorly performing
devices
39. Sound sprites
A sound sprite for a slot machine:
• Background sound loop
• Sounds for reel spins and wins
Background sound Background sound + spin Background
sound + wins
40. Sound
• Use sound sprites if you must
use HTML5 audio
• Use Flash where supported
– Even Chrome has HTML5
sound issues
41. Sound
• Use sound sprites if you must
use HTML5 audio
• Use Flash where supported
– Even Chrome has HTML5
sound issues
• IE9 surprisingly good with
HTML5 audio
42. Sound
• Use sound sprites if you must
use HTML5 audio
• Use Flash where supported
– Even Chrome has HTML5
sound issues
• IE9 surprisingly good with
HTML5 audio
• Use native wrappers for iOS
– Either bespoke or off-the-shelf
44. Techniques for coding
• Use jQuery
• Mixing CSS, sprites and HTML5
canvas elements
– CSS gives block-level control
– Canvas gives pixel-level control
45. Techniques for coding
• Use jQuery
• Mixing CSS, sprites and HTML5
canvas elements
• Very judicious use of Canvas if
working with legacy IE, and use
excanvas if you do
– excanvas.js gives some canvas
support for older versions of IE
46. Animations
• Use CSS3 for fire-and-forget animations to take
advantage of hardware acceleration
47. Animations
• Use CSS3 for fire-and-forget animations to take
advantage of hardware acceleration
• Mix JS animation with CSS3 where it works, but
beware of recalculation judders
48. Animations
• Use CSS3 for fire-and-forget animations to take
advantage of hardware acceleration
• Mix JS animation with CSS3 where it works, but
beware of recalculation judders
• Browser games can judder just because a
background task decides to do something else
50. Where to deploy
• Web
– Standalone site
– Portal
– Facebook
• Installed native app
– Off-the-shelf
– Custom built wrapper
51. Where to deploy
• Web
– Standalone site
– Portal
– Facebook
• Installed native app
– Off-the-shelf
– Custom built wrapper
• Hybrid
– Launched natively
– Served from the web
54. Payments
• Running in the browser
• FB credits on mobile
• Off-the-shelf wrappers
(PhoneGap, AppMobi etc)
– push towards up-front app
purchase and away from
freemium
55. Payments
• Running in the browser
• FB credits on mobile
• Off-the-shelf wrappers
(PhoneGap, AppMobi etc)
• Build an iOS wrapper and
run as a hybrid for in-app
purchases
– Surprisingly easy
56. Build or use an iOS wrapper
• Handles app install and launch
– UIWebView in Objective C to run Safari
57. Build or use an iOS wrapper
• Handles app install and launch
– UIWebView in Objective C to run Safari
• Enchanced sound capabilities
– JavaScript pseudo-protocol calls e.g.
sound://play?id=5
58. Build or use an iOS wrapper
• Handles app install and launch
– UIWebView in Objective C to run Safari
• Enchanced sound capabilities
– JavaScript pseudo-protocol calls e.g.
sound://play?id=5
• Enabled in-app purchases
– More pseudo-protocols e.g.
payment://purchase?productId=4
59. How some games are built
• Undersea Slots
• Wheel of Fortune
• Sorcery School
63. Wheel of Fortune
• PNG image of the wheel
• Drawn to canvas at a starting rotation
• Inside a containing DIV with a perspective
transform applied
• Falls back to 2D view in
Internet Explorer
• Spinning handled by
redawing the canvas
64. Wheel of Fortune
<div id="wheel_box">
<canvas id="wheel" width="400" height="400"></canvas>
</div>
#wheel_box
{
transform-origin: center center;
perspective: 600px;
-moz-transform-origin: center center;
-moz-perspective: 600px;
-webkit-transform-origin: center center;
-webkit-perspective: 600px;
perspective-origin: 300px 200px;
}
#wheel
{
transform-origin: top center;
transform: rotateX(55deg) scale(0.95) translateZ(-20px);
-moz-transform-origin: top center;
-moz-transform: rotateX(55deg) scale(0.95) translateZ(-20px);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(49.5deg) scale(0.95) translateZ(-20px);
-ms-transform-origin: bottom center;
-ms-transform: scale(1.2) translateY(-111px);
}
66. Sorcery School
• Multiple canvas elements
• Mouse clicks detect the element(s) beneath the
click and then look for non-transparent pixels
• CSS3 transitions give higher frame rates
• Doesn’t work in IE
67. Sorcery School
The “Fire and forget” clock:
<div id="game_clock">
<div id="game_clock_hand"></div>
</div>
First apply to the game_clock_hand:
-moz-transform: rotate(360deg);
Then:
-moz-transition: all 60s linear 0s;
-moz-transform: rotate(0deg);
68. A summary
Take advantage of what HTML & the web offers
• Building for multiple platforms
• Social features and network effects
• Continuous upgrades and analytics
69. A summary
Don’t try to do the things HTML5
doesn’t do well
• Fast-moving arcade animation
• Complex sound
70. A summary
Plan to work with platform quirks
• Screen size and aspect ratio variability
• Wide range of device performance
• Take advantage of hardware acceleration
• Solve the sound issues
• Have a monetisation strategy built-in
71. Thanks and questions
We’re Hiring!
• Game Developers
• Platform Developers
• Game Producers and more...
kbunyan@gsn.com