SlideShare una empresa de Scribd logo
1 de 71
Descargar para leer sin conexión
A Holistic Approach to HTML
Game Design & Development
         Karl Bunyan
        Developer, 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 performance
Lots 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 most
of what HTML5
 can give you
Making a plan
come together

Making the most
of 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 play
  or 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...
      kbunyan@gsn.com

Más contenido relacionado

La actualidad más candente

Cross-Platform Desktop Apps with Electron (CodeStock Edition)
Cross-Platform Desktop Apps with Electron (CodeStock Edition)Cross-Platform Desktop Apps with Electron (CodeStock Edition)
Cross-Platform Desktop Apps with Electron (CodeStock Edition)David Neal
 
tvOS: An Introduction for iOS Developers
tvOS: An Introduction for iOS DeveloperstvOS: An Introduction for iOS Developers
tvOS: An Introduction for iOS DevelopersEric Hyche
 
Marmalade: bittersweet experience
Marmalade: bittersweet experienceMarmalade: bittersweet experience
Marmalade: bittersweet experienceMax Klyga
 
Mobile App Development Using Appcelerator and DNN WebAPIs
Mobile App Development Using Appcelerator and DNN WebAPIsMobile App Development Using Appcelerator and DNN WebAPIs
Mobile App Development Using Appcelerator and DNN WebAPIsDNN
 
Introduction to Xamarin Forms
Introduction to Xamarin Forms Introduction to Xamarin Forms
Introduction to Xamarin Forms Russ Fustino
 
Inspect The Uninspected
Inspect The UninspectedInspect The Uninspected
Inspect The Uninspectedcgack
 
Deploy All The Games
Deploy All The GamesDeploy All The Games
Deploy All The GamesAdam Hill
 
Introduction to tvOS app Development !
Introduction to tvOS app Development !Introduction to tvOS app Development !
Introduction to tvOS app Development !Snehal Patil
 
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработкиСергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработкиDevGAMM Conference
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhonekentbrew
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EEEmily Lewis
 
Promosi ke pemain
Promosi ke pemainPromosi ke pemain
Promosi ke pemainFrida Dwi
 
DNN Web API For Mobile
DNN Web API For MobileDNN Web API For Mobile
DNN Web API For Mobileashishpd
 
Bengkel Gamelan : Press Release 101
Bengkel Gamelan : Press Release 101Bengkel Gamelan : Press Release 101
Bengkel Gamelan : Press Release 101Dennis Ganda
 
20 x Tips to better Optimize your Flash content
20 x Tips to better Optimize your Flash content20 x Tips to better Optimize your Flash content
20 x Tips to better Optimize your Flash contentElad Elrom
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksSasha dos Santos
 
SydPHP May 2012 - Deployment
SydPHP May 2012 - DeploymentSydPHP May 2012 - Deployment
SydPHP May 2012 - DeploymentGraham Weldon
 
Spooky WordPress: Disturbingly Brilliant Uses of WP
Spooky WordPress: Disturbingly Brilliant Uses of WPSpooky WordPress: Disturbingly Brilliant Uses of WP
Spooky WordPress: Disturbingly Brilliant Uses of WPBrad Williams
 
Dev traning 2016 symfony
Dev traning 2016   symfonyDev traning 2016   symfony
Dev traning 2016 symfonySacheen Dhanjie
 

La actualidad más candente (20)

Cross-Platform Desktop Apps with Electron (CodeStock Edition)
Cross-Platform Desktop Apps with Electron (CodeStock Edition)Cross-Platform Desktop Apps with Electron (CodeStock Edition)
Cross-Platform Desktop Apps with Electron (CodeStock Edition)
 
tvOS: An Introduction for iOS Developers
tvOS: An Introduction for iOS DeveloperstvOS: An Introduction for iOS Developers
tvOS: An Introduction for iOS Developers
 
Marmalade: bittersweet experience
Marmalade: bittersweet experienceMarmalade: bittersweet experience
Marmalade: bittersweet experience
 
Mobile App Development Using Appcelerator and DNN WebAPIs
Mobile App Development Using Appcelerator and DNN WebAPIsMobile App Development Using Appcelerator and DNN WebAPIs
Mobile App Development Using Appcelerator and DNN WebAPIs
 
Introduction to Xamarin Forms
Introduction to Xamarin Forms Introduction to Xamarin Forms
Introduction to Xamarin Forms
 
Inspect The Uninspected
Inspect The UninspectedInspect The Uninspected
Inspect The Uninspected
 
Deploy All The Games
Deploy All The GamesDeploy All The Games
Deploy All The Games
 
Introduction to tvOS app Development !
Introduction to tvOS app Development !Introduction to tvOS app Development !
Introduction to tvOS app Development !
 
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработкиСергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EE
 
Promosi ke pemain
Promosi ke pemainPromosi ke pemain
Promosi ke pemain
 
DNN Web API For Mobile
DNN Web API For MobileDNN Web API For Mobile
DNN Web API For Mobile
 
Bengkel Gamelan : Press Release 101
Bengkel Gamelan : Press Release 101Bengkel Gamelan : Press Release 101
Bengkel Gamelan : Press Release 101
 
20 x Tips to better Optimize your Flash content
20 x Tips to better Optimize your Flash content20 x Tips to better Optimize your Flash content
20 x Tips to better Optimize your Flash content
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
SydPHP May 2012 - Deployment
SydPHP May 2012 - DeploymentSydPHP May 2012 - Deployment
SydPHP May 2012 - Deployment
 
Spooky WordPress: Disturbingly Brilliant Uses of WP
Spooky WordPress: Disturbingly Brilliant Uses of WPSpooky WordPress: Disturbingly Brilliant Uses of WP
Spooky WordPress: Disturbingly Brilliant Uses of WP
 
Nuget
NugetNuget
Nuget
 
Dev traning 2016 symfony
Dev traning 2016   symfonyDev traning 2016   symfony
Dev traning 2016 symfony
 

Similar a A Holistic Approach to HTML5 Game Design & Development

Html5 - the new kid on the block
Html5 - the new kid on the blockHtml5 - the new kid on the block
Html5 - the new kid on the blockMarian Borca
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Curtis McHale
 
Mobilizing WordPress
Mobilizing WordPressMobilizing WordPress
Mobilizing WordPressCurtis McHale
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quangogdc
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Son Aris
 
Rise of the hybrids
Rise of the hybridsRise of the hybrids
Rise of the hybridsOron Ben Zvi
 
Building Websites for Retina Displays: Making Friends with Pixels
Building Websites for Retina Displays: Making Friends with PixelsBuilding Websites for Retina Displays: Making Friends with Pixels
Building Websites for Retina Displays: Making Friends with PixelsShoshi Roberts
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesDigitally
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 
Rapid Evolution of Web Dev? aka Talking About The Web
Rapid Evolution of Web Dev? aka Talking About The WebRapid Evolution of Web Dev? aka Talking About The Web
Rapid Evolution of Web Dev? aka Talking About The WebPINT Inc
 
HTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo OkaforHTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo Okaforhannonhill
 
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Robert 'Bob' Reyes
 
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funHTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funSarah Dutkiewicz
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignMaria D'Amato
 

Similar a A Holistic Approach to HTML5 Game Design & Development (20)

Html5 - the new kid on the block
Html5 - the new kid on the blockHtml5 - the new kid on the block
Html5 - the new kid on the block
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
 
Mobilizing WordPress
Mobilizing WordPressMobilizing WordPress
Mobilizing WordPress
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5
 
Rise of the hybrids
Rise of the hybridsRise of the hybrids
Rise of the hybrids
 
Mobile app development
Mobile app development  Mobile app development
Mobile app development
 
Building Websites for Retina Displays: Making Friends with Pixels
Building Websites for Retina Displays: Making Friends with PixelsBuilding Websites for Retina Displays: Making Friends with Pixels
Building Websites for Retina Displays: Making Friends with Pixels
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
 
Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
Creating Casual Games for Windows 8
Creating Casual Games for Windows 8Creating Casual Games for Windows 8
Creating Casual Games for Windows 8
 
Rapid Evolution of Web Dev? aka Talking About The Web
Rapid Evolution of Web Dev? aka Talking About The WebRapid Evolution of Web Dev? aka Talking About The Web
Rapid Evolution of Web Dev? aka Talking About The Web
 
HTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo OkaforHTML5 Trends + Cascade Server CMS by Uzo Okafor
HTML5 Trends + Cascade Server CMS by Uzo Okafor
 
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
Build (Web)VR with A-Frame (COSCUP 2019 Taipei)
 
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funHTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
 
Responsive web-design
Responsive web-designResponsive web-design
Responsive web-design
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 

Más de Karl Bunyan

Indie Game Developers and the Facebook of Doom
Indie Game Developers and the Facebook of DoomIndie Game Developers and the Facebook of Doom
Indie Game Developers and the Facebook of DoomKarl Bunyan
 
Dont Give Up Crappy App
Dont Give Up Crappy AppDont Give Up Crappy App
Dont Give Up Crappy AppKarl Bunyan
 
Five Ingredients For A Facebook Game
Five Ingredients For A Facebook GameFive Ingredients For A Facebook Game
Five Ingredients For A Facebook GameKarl Bunyan
 
Facebook Connect Presentation 08 10 2008
Facebook Connect Presentation 08 10 2008Facebook Connect Presentation 08 10 2008
Facebook Connect Presentation 08 10 2008Karl Bunyan
 
Making Money With Facebook Applications
Making Money With Facebook ApplicationsMaking Money With Facebook Applications
Making Money With Facebook ApplicationsKarl Bunyan
 
Scaling a Facebook Application
Scaling a Facebook ApplicationScaling a Facebook Application
Scaling a Facebook ApplicationKarl Bunyan
 

Más de Karl Bunyan (6)

Indie Game Developers and the Facebook of Doom
Indie Game Developers and the Facebook of DoomIndie Game Developers and the Facebook of Doom
Indie Game Developers and the Facebook of Doom
 
Dont Give Up Crappy App
Dont Give Up Crappy AppDont Give Up Crappy App
Dont Give Up Crappy App
 
Five Ingredients For A Facebook Game
Five Ingredients For A Facebook GameFive Ingredients For A Facebook Game
Five Ingredients For A Facebook Game
 
Facebook Connect Presentation 08 10 2008
Facebook Connect Presentation 08 10 2008Facebook Connect Presentation 08 10 2008
Facebook Connect Presentation 08 10 2008
 
Making Money With Facebook Applications
Making Money With Facebook ApplicationsMaking Money With Facebook Applications
Making Money With Facebook Applications
 
Scaling a Facebook Application
Scaling a Facebook ApplicationScaling a Facebook Application
Scaling a Facebook Application
 

Último

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Último (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

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
  • 6. Where are HTML games today?
  • 7. Where are HTML games today? • Wild west frontier?
  • 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
  • 12. Games programming in the 80s When bedroom coders ruled the earth
  • 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
  • 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 come together
  • 24. Making a plan come together Making the most of what HTML5 can give you
  • 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
  • 28. Always On • Web-based games: – Have analytics built-in – Allow continuous upgrades
  • 29. Planning a game Problems you’ll encounter: • Platform fragmentation
  • 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
  • 34. Creativity thrives on constraints
  • 35. Creativity thrives on constraints Solutions?
  • 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
  • 38. Sound • Use sound sprites if you must use HTML5 audio
  • 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
  • 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 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
  • 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 in the browser – it’s up to you
  • 53. Payments • Running in the browser • FB credits on mobile – seemed shaky
  • 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
  • 61. Undersea Slots • No canvas, all CSS • Very few CSS3 transitions • Pre-rendered blurring
  • 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