Date post: | 11-May-2015 |
Category: |
Technology |
Upload: | karl-bunyan |
View: | 2,434 times |
Download: | 2 times |
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 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
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
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?
Where are HTML games today?
• Wild west frontier?
Where are HTML games today?
• Wild west frontier exploration?• A return to the 2000’s with
browser wars, fragmentation and walled gardens?
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
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)
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
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
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 a plan come together
Making the mostof what HTML5
can give you
Making a plan come together
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
Problems you’ll encounter:• Platform fragmentation• Legacy web browsers• And legacy mobile devices
• Animation performance, frame rate
Planning a game
Problems you’ll encounter:• Platform fragmentation• Legacy web browsers• And legacy mobile devices
• Animation performance, frame rate• Sound
Planning a game
Problems you’ll encounter:• Platform fragmentation• Legacy web browsers• And legacy mobile devices
• 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 sound sprites if you must use HTML5 audio
• Use Flash where supported– Even Chrome has HTML5
sound issues
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
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
Techniques for coding
• Use jQuery– You probably already know this
Techniques for coding
• Use jQuery• Mixing CSS, sprites and HTML5
canvas elements– CSS gives block-level control– Canvas gives pixel-level control
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
Animations
• Use CSS3 for fire-and-forget animations to take advantage of hardware acceleration
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
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
Where to deploy
• Web– Standalone site– Portal– Facebook
Where to deploy
• Web– Standalone site– Portal– Facebook
• Installed native app– Off-the-shelf– Custom built wrapper
Where to deploy
• Web– Standalone site– Portal– Facebook
• 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
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
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
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...