Downloaded 28 times
Uploaded byKarl Bunyan
A Holistic Approach to HTML5 Game Design & Development
This document outlines a holistic approach to HTML5 game design and development, emphasizing the importance of planning to utilize the unique features of HTML and JavaScript effectively. It discusses challenges such as platform fragmentation, legacy support, and sound issues while offering technical tips for optimizing performance across devices. The document also highlights the need for a monetization strategy and the benefits of targeting multiple platforms for broader audience reach.
More Related Content
Similar to A Holistic Approach to HTML5 Game Design & Development
A Holistic Approach to HTML5 Game Design & Development
- 1. A Holistic Approachto HTML Game Design & Development Karl Bunyan Developer, GSN
- 2. What this isabout • Planning a game to be built in HTML5 so you don’t cancel a project or revise down expectations mid-way
- 3. What this isabout • 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 isabout • 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
- 6. Where are HTMLgames today?
- 7. Where are HTMLgames today? • Wild west frontier?
- 8. Where are HTMLgames today? • Wild west frontier exploration? • A return to the 2000’s with browser wars, fragmentation and walled gardens?
- 9. Where are HTMLgames 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 jetpack? 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
- 11. Games programming inthe 80s
- 12. Games programming inthe 80s When bedroom coders ruled the earth
- 13. Limited memory In the80s 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 the80s 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 Inthe 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 Inthe 80s we had: • Single channel, telephone speaker • Multi-channel was faked Today we have: • The woeful state of HTML5 sound – especially iOS
- 17. HTML5 - mydefinition • Distinguished by an ethos – A cohesive, open movement (No plug-ins) – No white elephant (VRML) – Not just needless bells and whistles (DHTML)
- 18. HTML5 - mydefinition • 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 - mydefinition • 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
- 20. Brief landscape overview • HTML5 • Flash • Native mobile • Native client • Unity etc
- 21. The future One certainty: •Constant increases in HTML5 performance
- 22. The future One certainty: •Constant increases in HTML5 performance Lots of uncertainties: • The decline of Flash? • What’s Microsoft up to with Metro?
- 23. Making a plan cometogether
- 24. Making a plan cometogether Making the most of what HTML5 can give you
- 25. Making a plan cometogether Making the most of what HTML5 can give you And avoiding the sucky parts
- 26. Cross-platform • Build forweb and mobile together • The write-once run-anywhere fallacy E.g. Java. • But skills are transferable
- 27. Social features • Asynchronousturn-based play or synchronous • HTML games are an efficient way of targeting multiple platforms • more platforms means more players • Facebook sharing
- 28. Always On • Web-basedgames: – Have analytics built-in – Allow continuous upgrades
- 29. Planning a game Problemsyou’ll encounter: • Platform fragmentation
- 30. Planning a game Problemsyou’ll encounter: • Platform fragmentation • Legacy web browsers • And legacy mobile devices
- 31. Planning a game Problemsyou’ll encounter: • Platform fragmentation • Legacy web browsers • And legacy mobile devices • Animation performance, frame rate
- 32. Planning a game Problemsyou’ll encounter: • Platform fragmentation • Legacy web browsers • And legacy mobile devices • Animation performance, frame rate • Sound
- 33. Planning a game Problemsyou’ll encounter: • Platform fragmentation • Legacy web browsers • And legacy mobile devices • Animation performance, frame rate • Sound • Payments/monetisation
- 34. Creativity thrives onconstraints
- 35. Creativity thrives onconstraints Solutions?
- 36. Screen sizes The webis 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 • iOS5 beats Android; Webkit excellent; Firefox good; IE improving • Cut out some animations for poorly performing devices
- 38. Sound • Use soundsprites if you must use HTML5 audio
- 39. Sound sprites A soundsprite for a slot machine: • Background sound loop • Sounds for reel spins and wins Background sound Background sound + spin Background sound + wins
- 40. Sound • Use soundsprites if you must use HTML5 audio • Use Flash where supported – Even Chrome has HTML5 sound issues
- 41. Sound • Use soundsprites 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 soundsprites 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
- 43. Techniques for coding •Use jQuery – You probably already know this
- 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 CSS3for fire-and-forget animations to take advantage of hardware acceleration
- 47. Animations • Use CSS3for 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 CSS3for 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
- 49. Where to deploy •Web – Standalone site – Portal – Facebook
- 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
- 52. Payments • Running inthe browser – it’s up to you
- 53. Payments • Running inthe browser • FB credits on mobile – seemed shaky
- 54. Payments • Running inthe 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 inthe 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 usean iOS wrapper • Handles app install and launch – UIWebView in Objective C to run Safari
- 57. Build or usean 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 usean 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 gamesare built • Undersea Slots • Wheel of Fortune • Sorcery School
- 60.
- 61. Undersea Slots • Nocanvas, all CSS • Very few CSS3 transitions • Pre-rendered blurring
- 62.
- 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 <divid="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); }
- 65.
- 66. Sorcery School • Multiplecanvas 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 “Fireand 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 advantageof what HTML & the web offers • Building for multiple platforms • Social features and network effects • Continuous upgrades and analytics
- 69. A summary Don’t tryto do the things HTML5 doesn’t do well • Fast-moving arcade animation • Complex sound
- 70. A summary Plan towork 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