Presentation is loading. Please wait.

Presentation is loading. Please wait.

May 2014 Overcoming the bottleneck of HTML5 canvas game performance David Goemans Moscow | 2014.

Similar presentations


Presentation on theme: "May 2014 Overcoming the bottleneck of HTML5 canvas game performance David Goemans Moscow | 2014."— Presentation transcript:

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 BoosterMedia, HTML5 & Javascript

5 There's a problem? Device 100 Images 50x50px 5 Fullscreen Images iPhone 4 Safari55 fps30 fps iPad 2 Safari60 fps50 fps Samsung Galaxy S3 Internet30 fps25 fps Samsung Galaxy S3 Chrome50 fps60 fps Samsung Galaxy S4 Internet30 fps Samsung Galaxy S4 Chrome35 fps ???45 fps ??? Sony Xperia Z1 Chrome60 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 30FPS == 33ms. Every ms counts!

14 Show time!! As chrome warns you...

15 We want your games!! CONTACT US Any technical questions? Download this presentation: link:


Download ppt "May 2014 Overcoming the bottleneck of HTML5 canvas game performance David Goemans Moscow | 2014."

Similar presentations


Ads by Google