SlideShare une entreprise Scribd logo
1  sur  15
May 2014
Overcoming the bottleneck of HTML5
canvas game performance
David Goemans
Moscow | 2014
About us
 BoosterMedia was founded in 2009 and is now
the leading HTML5 games company worldwide
 The BoosterMedia HQ is based in Amsterdam, with
offices in Tokyo, London, Singapore and São Paulo
 BoosterMedia runs 100+ white-label HTML5
channels for media companies, game brands, Telcos and
OEMs
 Reaching over 6 million HTML5 gamers every month
 Largest HTML5 games-catalogue: over 350 titles
available, new games are added on a weekly basis
 And in-house Game Studio for high-end HTML5
games
 Mobile Entertainment Awards Winner ’13
“Best mobile social games platform”
 BoosterMedia is backed by leading European VCs
100+ HTML5 Game stores for brands
1. Branded game stores 2. Lots of HTML5 games 3. Revenue generation
About me
David Goemans
6 years games industry experience, 8 years programming professionally
Until last year making indie games, mostly C++ and C#
Now, Lead Game Developer @ BoosterMedia, HTML5 & Javascript
There's a problem?
Device
100 Images
50x50px
5 Fullscreen
Images
iPhone 4 Safari 55 fps 30 fps
iPad 2 Safari 60 fps 50 fps
Samsung Galaxy S3 Internet 30 fps 25 fps
Samsung Galaxy S3 Chrome 50 fps 60 fps
Samsung Galaxy S4 Internet 30 fps 30 fps
Samsung Galaxy S4 Chrome 35 fps ??? 45 fps ???
Sony Xperia Z1 Chrome 60 fps 60 fps
Canvas Draw call and Fill rate benchmarks
WebGL is also no silver bullet! Canvas performance in the few
browsers that support WebGL is generally good, so it doesn't really
solve a problem.
iOS
iOS Generally works well, except...
 Fullscreen draw calls are often slow (especially on iPads)
 UIWebView is much slower with Canvas rendering than Safari
 Javascript calls in UIWebView are much slower than Safari
 All browsers other than Safari use UIWebView internally due to Apple's Policies.
 This means that Safari will always give the best performance.
Stock Android < 4.4
Android is a double edged sword
The stock Android browser is often compared to IE6. While it has far greater
standards support, what makes it potentially worse is that the OEMs control their
own implementations.
Samsung, LG and HTC devices all have slightly different stock browsers, all with
their own quirks and bugs. Sony gives you Chrome as the stock browser!
We've seen better Frame rates in Bubble Fever
on the Galaxy S2 than the Galaxy S4
Stock Android 4.4
Stock Android browser is normally built off the Android
Webview.
The WebView in Android 4.4 is being replaced by Chromium,
and many manufacturers have built their new browser on this.
In the long term this is great, but in the short term, it's bad.
Android 4.4 WebView doesn't support hardware accelerated canvas. This has been
fixed already and will probably make the next Android OS update. This leaves
HTML5 games in a bad situation for Android 4.4.
Windows Phone
WP 8 Deserves an honorable mention
 Almost everything works out of the box.
 Performance is good, still works on low end devices ( like the Lumia 520 )
 Some odd css/js standards issues, but we had similar bugs in Firefox
 IE Mobile behaves exactly like the Internet Explorer PC
Quick cheats that sometimes work
 Upscale as much as looks good
Cut down on translate()/save()/restore() calls! Often used when not needed.
 Use context.width = context.width to clear (except on the Galaxy S3 webview)
 Add 3d transforms to the body css
 Use Spritesheets to avoid texture swaps
 Be smart with your textures! Less draw calls == faster!!
 Spread text updates over a few frames. Text is slow!
 Don't draw if you don't have to (ie, if nothing has changed). Layers help!
Slow drawing performance
Fullscreen draw calls are slow and can be sped up using canvas layers
Even if you use an engine like Phaser, add your own canvas to draw behind the
stage canvas of the engine, and set the stage canvas to transparent.
Only draw things on the background layer when they need updates, use the main
layer for all moving things.
Lag spikes
Pooling with a default sized pool helped resolve most lag spikes. A pool is
basically an array with a set of pre-created objects. You can retrieve an unused
object from the list instead of creating a new one, and put back finished objects
instead of destroying them. By not destroying, there's no garbage. By pre-creating
multiple objects, you can cut down on object allocations.
 Identify when the spikes occur
 Work out what causes them with the profiler
 Normally it's creating a sprite/effect, switching a texture, or garbage collection
 Create a pool of the offending object.
Profile, profile, profile
 Chrome is your best friend!
 Profile on the desktop and on devices
 Use Canvas Profiler to see draw calls
 Use JavaScript CPU profiling to see
 Analyze the results to see what's eating up your CPU cycles
 Remember 1 frame @ 30FPS == 33ms. Every ms counts!
Show time!!
As chrome warns you...
We want your games!!
license@boostermedia.com
Twitter: @boostermedia
www.boostermedia.com
CONTACT US
Any technical questions?
david.goemans@boostermedia.com
Twitter: @dgoemans
www.boostermedia.com
Download this presentation:
link: http://is.gd/html5profiling

Contenu connexe

En vedette

En vedette (10)

Thinking out of the Box
Thinking out of the BoxThinking out of the Box
Thinking out of the Box
 
Futures Thinking . Media & entertainment
Futures Thinking . Media & entertainmentFutures Thinking . Media & entertainment
Futures Thinking . Media & entertainment
 
Design Futures through Design Fiction
Design Futures through Design FictionDesign Futures through Design Fiction
Design Futures through Design Fiction
 
Lecture 4 Teaching Futures, Systems and Strategic Thinking 2016
Lecture 4 Teaching Futures, Systems and Strategic Thinking 2016Lecture 4 Teaching Futures, Systems and Strategic Thinking 2016
Lecture 4 Teaching Futures, Systems and Strategic Thinking 2016
 
Design Strategy: The Rise of a New Culture
Design Strategy: The Rise of a New CultureDesign Strategy: The Rise of a New Culture
Design Strategy: The Rise of a New Culture
 
Backcasting - IA Summit 2007 Session Presentation
Backcasting - IA Summit 2007 Session PresentationBackcasting - IA Summit 2007 Session Presentation
Backcasting - IA Summit 2007 Session Presentation
 
Backcasting 101
Backcasting 101Backcasting 101
Backcasting 101
 
Backcasting Transformation towards smart and sustainable cities
Backcasting Transformation towards smart and sustainable citiesBackcasting Transformation towards smart and sustainable cities
Backcasting Transformation towards smart and sustainable cities
 
Service design futures - how to create 'sociable services'
Service design futures - how to create 'sociable services'Service design futures - how to create 'sociable services'
Service design futures - how to create 'sociable services'
 
Innovation and Futures Thinking - Are you Leading or Following?
Innovation and Futures Thinking - Are you Leading or Following? Innovation and Futures Thinking - Are you Leading or Following?
Innovation and Futures Thinking - Are you Leading or Following?
 

Similaire à BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance

Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
Critical Mass
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
Nicholas Jansma
 
Adobe Flash - Past, Present and Future
Adobe Flash - Past, Present and FutureAdobe Flash - Past, Present and Future
Adobe Flash - Past, Present and Future
Iain Lobb
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight Experiences
Nicklas Andersson
 
Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learned
Wojciech Koszek
 

Similaire à BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance (20)

Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript Games
 
The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
 
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveAngels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
Phonegap - An Introduction
Phonegap - An IntroductionPhonegap - An Introduction
Phonegap - An Introduction
 
Publishing HTML5 Games: It’s ShowTime! | Laurens Rutten
Publishing HTML5 Games: It’s ShowTime! | Laurens RuttenPublishing HTML5 Games: It’s ShowTime! | Laurens Rutten
Publishing HTML5 Games: It’s ShowTime! | Laurens Rutten
 
Head first android_development
Head first android_developmentHead first android_development
Head first android_development
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1
 
Adobe Flash - Past, Present and Future
Adobe Flash - Past, Present and FutureAdobe Flash - Past, Present and Future
Adobe Flash - Past, Present and Future
 
Presentation3
Presentation3Presentation3
Presentation3
 
Microsoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight ExperiencesMicrosoft Webday 2008 - Silverlight Experiences
Microsoft Webday 2008 - Silverlight Experiences
 
iOS vs android .pptx
iOS  vs android .pptxiOS  vs android .pptx
iOS vs android .pptx
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
 
Building Websites of the Future With Drupal 7
Building Websites of the Future With Drupal 7Building Websites of the Future With Drupal 7
Building Websites of the Future With Drupal 7
 
Building Websites of the Future With Drupal 7
Building Websites of the Future With Drupal 7Building Websites of the Future With Drupal 7
Building Websites of the Future With Drupal 7
 
Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learned
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
 

Plus de DevGAMM Conference

Plus de DevGAMM Conference (20)

The art of small steps, or how to make sound for games in conditions of war /...
The art of small steps, or how to make sound for games in conditions of war /...The art of small steps, or how to make sound for games in conditions of war /...
The art of small steps, or how to make sound for games in conditions of war /...
 
Breaking up with FMOD - Why we ended things and embraced Metasounds / Daniel ...
Breaking up with FMOD - Why we ended things and embraced Metasounds / Daniel ...Breaking up with FMOD - Why we ended things and embraced Metasounds / Daniel ...
Breaking up with FMOD - Why we ended things and embraced Metasounds / Daniel ...
 
How Audio Objects Improve Spatial Accuracy / Mads Maretty Sønderup (Audiokine...
How Audio Objects Improve Spatial Accuracy / Mads Maretty Sønderup (Audiokine...How Audio Objects Improve Spatial Accuracy / Mads Maretty Sønderup (Audiokine...
How Audio Objects Improve Spatial Accuracy / Mads Maretty Sønderup (Audiokine...
 
Why indie developers should consider hyper-casual right now / Igor Gurenyov (...
Why indie developers should consider hyper-casual right now / Igor Gurenyov (...Why indie developers should consider hyper-casual right now / Igor Gurenyov (...
Why indie developers should consider hyper-casual right now / Igor Gurenyov (...
 
AI / ML for Indies / Tyler Coleman (Retora Games)
AI / ML for Indies / Tyler Coleman (Retora Games)AI / ML for Indies / Tyler Coleman (Retora Games)
AI / ML for Indies / Tyler Coleman (Retora Games)
 
Agility is the Key: Power Up Your GameDev Project Management with Agile Pract...
Agility is the Key: Power Up Your GameDev Project Management with Agile Pract...Agility is the Key: Power Up Your GameDev Project Management with Agile Pract...
Agility is the Key: Power Up Your GameDev Project Management with Agile Pract...
 
New PR Tech and AI Tools for 2023: A Game Changer for Outreach / Kirill Perev...
New PR Tech and AI Tools for 2023: A Game Changer for Outreach / Kirill Perev...New PR Tech and AI Tools for 2023: A Game Changer for Outreach / Kirill Perev...
New PR Tech and AI Tools for 2023: A Game Changer for Outreach / Kirill Perev...
 
Playable Ads - Revolutionizing mobile games advertising / Jakub Kukuryk (Popc...
Playable Ads - Revolutionizing mobile games advertising / Jakub Kukuryk (Popc...Playable Ads - Revolutionizing mobile games advertising / Jakub Kukuryk (Popc...
Playable Ads - Revolutionizing mobile games advertising / Jakub Kukuryk (Popc...
 
Creative Collaboration: Managing an Art Team / Nastassia Radzivonava (Glera G...
Creative Collaboration: Managing an Art Team / Nastassia Radzivonava (Glera G...Creative Collaboration: Managing an Art Team / Nastassia Radzivonava (Glera G...
Creative Collaboration: Managing an Art Team / Nastassia Radzivonava (Glera G...
 
From Local to Global: Unleashing the Power of Payments / Jan Kuhlmannn (Xsolla)
From Local to Global: Unleashing the Power of Payments / Jan Kuhlmannn (Xsolla)From Local to Global: Unleashing the Power of Payments / Jan Kuhlmannn (Xsolla)
From Local to Global: Unleashing the Power of Payments / Jan Kuhlmannn (Xsolla)
 
Strategies and case studies to grow LTV in 2023 / Julia Iljuk (Balancy)
Strategies and case studies to grow LTV in 2023 / Julia Iljuk (Balancy)Strategies and case studies to grow LTV in 2023 / Julia Iljuk (Balancy)
Strategies and case studies to grow LTV in 2023 / Julia Iljuk (Balancy)
 
Why is ASO not working in 2023 and how to change it? / Olena Vedmedenko (Keya...
Why is ASO not working in 2023 and how to change it? / Olena Vedmedenko (Keya...Why is ASO not working in 2023 and how to change it? / Olena Vedmedenko (Keya...
Why is ASO not working in 2023 and how to change it? / Olena Vedmedenko (Keya...
 
How to increase wishlists & game sales from China? Growth marketing tactics &...
How to increase wishlists & game sales from China? Growth marketing tactics &...How to increase wishlists & game sales from China? Growth marketing tactics &...
How to increase wishlists & game sales from China? Growth marketing tactics &...
 
Turkish Gaming Industry and HR Insights / Mustafa Mert EFE (Zindhu)
Turkish Gaming Industry and HR Insights / Mustafa Mert EFE (Zindhu)Turkish Gaming Industry and HR Insights / Mustafa Mert EFE (Zindhu)
Turkish Gaming Industry and HR Insights / Mustafa Mert EFE (Zindhu)
 
Building an Awesome Creative Team from Scratch, Capable of Scaling Up / Sasha...
Building an Awesome Creative Team from Scratch, Capable of Scaling Up / Sasha...Building an Awesome Creative Team from Scratch, Capable of Scaling Up / Sasha...
Building an Awesome Creative Team from Scratch, Capable of Scaling Up / Sasha...
 
Seven Reasons Why Your LiveOps Is Not Performing / Alexander Devyaterikov (Be...
Seven Reasons Why Your LiveOps Is Not Performing / Alexander Devyaterikov (Be...Seven Reasons Why Your LiveOps Is Not Performing / Alexander Devyaterikov (Be...
Seven Reasons Why Your LiveOps Is Not Performing / Alexander Devyaterikov (Be...
 
The Power of Game and Music Collaborations: Reaching and Engaging the Masses ...
The Power of Game and Music Collaborations: Reaching and Engaging the Masses ...The Power of Game and Music Collaborations: Reaching and Engaging the Masses ...
The Power of Game and Music Collaborations: Reaching and Engaging the Masses ...
 
Branded Content: How to overcome players' immunity to advertising / Alex Brod...
Branded Content: How to overcome players' immunity to advertising / Alex Brod...Branded Content: How to overcome players' immunity to advertising / Alex Brod...
Branded Content: How to overcome players' immunity to advertising / Alex Brod...
 
Resurrecting Chasm: The Rift - A Source-less Remastering Journey / Gennadii P...
Resurrecting Chasm: The Rift - A Source-less Remastering Journey / Gennadii P...Resurrecting Chasm: The Rift - A Source-less Remastering Journey / Gennadii P...
Resurrecting Chasm: The Rift - A Source-less Remastering Journey / Gennadii P...
 
How NOT to do showcase events: Behind the scenes of Midnight Show / Andrew Ko...
How NOT to do showcase events: Behind the scenes of Midnight Show / Andrew Ko...How NOT to do showcase events: Behind the scenes of Midnight Show / Andrew Ko...
How NOT to do showcase events: Behind the scenes of Midnight Show / Andrew Ko...
 

Dernier

No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
Sheetaleventcompany
 

Dernier (20)

Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510Thirunelveli call girls Tamil escorts 7877702510
Thirunelveli call girls Tamil escorts 7877702510
 
Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)Introduction to Prompt Engineering (Focusing on ChatGPT)
Introduction to Prompt Engineering (Focusing on ChatGPT)
 
Microsoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AIMicrosoft Copilot AI for Everyone - created by AI
Microsoft Copilot AI for Everyone - created by AI
 
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
 
Mathematics of Finance Presentation.pptx
Mathematics of Finance Presentation.pptxMathematics of Finance Presentation.pptx
Mathematics of Finance Presentation.pptx
 
George Lever - eCommerce Day Chile 2024
George Lever -  eCommerce Day Chile 2024George Lever -  eCommerce Day Chile 2024
George Lever - eCommerce Day Chile 2024
 
The workplace ecosystem of the future 24.4.2024 Fabritius_share ii.pdf
The workplace ecosystem of the future 24.4.2024 Fabritius_share ii.pdfThe workplace ecosystem of the future 24.4.2024 Fabritius_share ii.pdf
The workplace ecosystem of the future 24.4.2024 Fabritius_share ii.pdf
 
Presentation on Engagement in Book Clubs
Presentation on Engagement in Book ClubsPresentation on Engagement in Book Clubs
Presentation on Engagement in Book Clubs
 
Andrés Ramírez Gossler, Facundo Schinnea - eCommerce Day Chile 2024
Andrés Ramírez Gossler, Facundo Schinnea - eCommerce Day Chile 2024Andrés Ramírez Gossler, Facundo Schinnea - eCommerce Day Chile 2024
Andrés Ramírez Gossler, Facundo Schinnea - eCommerce Day Chile 2024
 
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
Night 7k Call Girls Noida Sector 128 Call Me: 8448380779
 
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 93 Noida Escorts >༒8448380779 Escort Service
 
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
 
Report Writing Webinar Training
Report Writing Webinar TrainingReport Writing Webinar Training
Report Writing Webinar Training
 
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
 
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxMohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
 
Air breathing and respiratory adaptations in diver animals
Air breathing and respiratory adaptations in diver animalsAir breathing and respiratory adaptations in diver animals
Air breathing and respiratory adaptations in diver animals
 
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
 
SaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, YardstickSaaStr Workshop Wednesday w/ Lucas Price, Yardstick
SaaStr Workshop Wednesday w/ Lucas Price, Yardstick
 
BDSM⚡Call Girls in Sector 97 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 97 Noida Escorts >༒8448380779 Escort ServiceBDSM⚡Call Girls in Sector 97 Noida Escorts >༒8448380779 Escort Service
BDSM⚡Call Girls in Sector 97 Noida Escorts >༒8448380779 Escort Service
 
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesVVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
 

BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance

  • 1. May 2014 Overcoming the bottleneck of HTML5 canvas game performance David Goemans Moscow | 2014
  • 2. About us  BoosterMedia was founded in 2009 and is now the leading HTML5 games company worldwide  The BoosterMedia HQ is based in Amsterdam, with offices in Tokyo, London, Singapore and São Paulo  BoosterMedia runs 100+ white-label HTML5 channels for media companies, game brands, Telcos and OEMs  Reaching over 6 million HTML5 gamers every month  Largest HTML5 games-catalogue: over 350 titles available, new games are added on a weekly basis  And in-house Game Studio for high-end HTML5 games  Mobile Entertainment Awards Winner ’13 “Best mobile social games platform”  BoosterMedia is backed by leading European VCs
  • 3. 100+ HTML5 Game stores for brands 1. Branded game stores 2. Lots of HTML5 games 3. Revenue generation
  • 4. About me David Goemans 6 years games industry experience, 8 years programming professionally Until last year making indie games, mostly C++ and C# Now, Lead Game Developer @ BoosterMedia, HTML5 & Javascript
  • 5. There's a problem? Device 100 Images 50x50px 5 Fullscreen Images iPhone 4 Safari 55 fps 30 fps iPad 2 Safari 60 fps 50 fps Samsung Galaxy S3 Internet 30 fps 25 fps Samsung Galaxy S3 Chrome 50 fps 60 fps Samsung Galaxy S4 Internet 30 fps 30 fps Samsung Galaxy S4 Chrome 35 fps ??? 45 fps ??? Sony Xperia Z1 Chrome 60 fps 60 fps Canvas Draw call and Fill rate benchmarks WebGL is also no silver bullet! Canvas performance in the few browsers that support WebGL is generally good, so it doesn't really solve a problem.
  • 6. iOS iOS Generally works well, except...  Fullscreen draw calls are often slow (especially on iPads)  UIWebView is much slower with Canvas rendering than Safari  Javascript calls in UIWebView are much slower than Safari  All browsers other than Safari use UIWebView internally due to Apple's Policies.  This means that Safari will always give the best performance.
  • 7. Stock Android < 4.4 Android is a double edged sword The stock Android browser is often compared to IE6. While it has far greater standards support, what makes it potentially worse is that the OEMs control their own implementations. Samsung, LG and HTC devices all have slightly different stock browsers, all with their own quirks and bugs. Sony gives you Chrome as the stock browser! We've seen better Frame rates in Bubble Fever on the Galaxy S2 than the Galaxy S4
  • 8. Stock Android 4.4 Stock Android browser is normally built off the Android Webview. The WebView in Android 4.4 is being replaced by Chromium, and many manufacturers have built their new browser on this. In the long term this is great, but in the short term, it's bad. Android 4.4 WebView doesn't support hardware accelerated canvas. This has been fixed already and will probably make the next Android OS update. This leaves HTML5 games in a bad situation for Android 4.4.
  • 9. Windows Phone WP 8 Deserves an honorable mention  Almost everything works out of the box.  Performance is good, still works on low end devices ( like the Lumia 520 )  Some odd css/js standards issues, but we had similar bugs in Firefox  IE Mobile behaves exactly like the Internet Explorer PC
  • 10. Quick cheats that sometimes work  Upscale as much as looks good Cut down on translate()/save()/restore() calls! Often used when not needed.  Use context.width = context.width to clear (except on the Galaxy S3 webview)  Add 3d transforms to the body css  Use Spritesheets to avoid texture swaps  Be smart with your textures! Less draw calls == faster!!  Spread text updates over a few frames. Text is slow!  Don't draw if you don't have to (ie, if nothing has changed). Layers help!
  • 11. Slow drawing performance Fullscreen draw calls are slow and can be sped up using canvas layers Even if you use an engine like Phaser, add your own canvas to draw behind the stage canvas of the engine, and set the stage canvas to transparent. Only draw things on the background layer when they need updates, use the main layer for all moving things.
  • 12. Lag spikes Pooling with a default sized pool helped resolve most lag spikes. A pool is basically an array with a set of pre-created objects. You can retrieve an unused object from the list instead of creating a new one, and put back finished objects instead of destroying them. By not destroying, there's no garbage. By pre-creating multiple objects, you can cut down on object allocations.  Identify when the spikes occur  Work out what causes them with the profiler  Normally it's creating a sprite/effect, switching a texture, or garbage collection  Create a pool of the offending object.
  • 13. Profile, profile, profile  Chrome is your best friend!  Profile on the desktop and on devices  Use Canvas Profiler to see draw calls  Use JavaScript CPU profiling to see  Analyze the results to see what's eating up your CPU cycles  Remember 1 frame @ 30FPS == 33ms. Every ms counts!
  • 14. Show time!! As chrome warns you...
  • 15. We want your games!! license@boostermedia.com Twitter: @boostermedia www.boostermedia.com CONTACT US Any technical questions? david.goemans@boostermedia.com Twitter: @dgoemans www.boostermedia.com Download this presentation: link: http://is.gd/html5profiling