A Holistic Approach to HTML5 Game Design & Development

A Holistic Approach to HTML Game Design & Development

Karl BunyanDeveloper, GSN

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

What this is about


• Planning a game to take advantage of the features HTML & JavaScript can offer

What this is about


• Planning a game to take advantage of the features HTML & JavaScript can offer

• Some technical tips to work around areas where HTML5 may struggle

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

Where are HTML games today?


• Wild west frontier?


• Wild west frontier exploration?• A return to the 2000’s with

browser wars, fragmentation and walled gardens?


• Wild west frontier exploration?• A return to the 2000’s with

browser wars, fragmentation and walled gardens?

• Games programming in the 80’s

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

Games programming in the 80s

Games programming in the 80s

When bedroom coders ruled the earth

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

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

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)

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

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



• Often a label applied to web sites that move• It’s easier to sell something that has a name

Brief landscape overview

• HTML5• Flash• Native mobile• Native client• Unity etc

The future

One certainty:• Constant increases in

HTML5 performance

The future

One certainty:• Constant increases in

HTML5 performanceLots of uncertainties:• The decline of Flash?• What’s Microsoft up to

with Metro?

Making a plan come together


Making the mostof what HTML5

can give you


Making the mostof what HTML5

can give you

And avoiding the sucky parts

Cross-platform

• Build for web and mobile together

• The write-once run-anywhere fallacy E.g. Java.

• But skills are transferable

Social features

• Asynchronous turn-based playor synchronous

• HTML games are an efficient way of targeting multiple platforms• more platforms means more players

• Facebook sharing

Always On

• Web-based games:– Have analytics built-in– Allow continuous upgrades

Planning a game

Problems you’ll encounter:• Platform fragmentation

Planning a game

Problems you’ll encounter:• Platform fragmentation• Legacy web browsers• And legacy mobile devices

Planning a game


• Animation performance, frame rate

Planning a game


• Animation performance, frame rate• Sound

Planning a game


• Animation performance, frame rate• Sound• Payments/monetisation

Creativity thrives on constraints

Creativity thrives on constraints

Solutions?

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?

Device performance

• iOS 5 beats Android; Webkit excellent; Firefox good; IE improving

• Cut out some animations for poorly performing devices

Sound

• Use sound sprites if you must use HTML5 audio

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

Sound


• Use Flash where supported– Even Chrome has HTML5

sound issues

Sound



sound issues• IE9 surprisingly good with

HTML5 audio

Sound



sound issues• IE9 surprisingly good with

HTML5 audio• Use native wrappers for iOS– Either bespoke or off-the-shelf

Techniques for coding

• Use jQuery– You probably already know this


• Use jQuery• Mixing CSS, sprites and HTML5

canvas elements– CSS gives block-level control– Canvas gives pixel-level control


• 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

Animations

• Use CSS3 for fire-and-forget animations to take advantage of hardware acceleration

Animations


• Mix JS animation with CSS3 where it works, but beware of recalculation judders

Animations


• 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

Where to deploy

• Web– Standalone site– Portal– Facebook

Where to deploy


• Installed native app– Off-the-shelf– Custom built wrapper

Where to deploy


• Installed native app– Off-the-shelf– Custom built wrapper

• Hybrid– Launched natively– Served from the web

Payments

• Running in the browser– it’s up to you

Payments

• Running in the browser• FB credits on mobile– seemed shaky

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

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

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



• 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

How some games are built

• Undersea Slots

• Wheel of Fortune

• Sorcery School

Undersea Slots

Undersea Slots

• No canvas, all CSS• Very few CSS3 transitions• Pre-rendered blurring

Wheel of Fortune

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

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);

}

Sorcery School

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

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);

A summary

Take advantage of what HTML & the web offers

• Building for multiple platforms• Social features and network effects• Continuous upgrades and analytics

A summary

Don’t try to do the things HTML5 doesn’t do well

• Fast-moving arcade animation

• Complex sound

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

Thanks and questions

We’re Hiring!• Game Developers• Platform Developers• Game Producers and more...

[email protected]

Technology

A Holistic Approach to HTML5 Game Design & Development