Presentation from DevGamm Moscow 2014 on HTML5 Canvas rendering. Going in to detail on how to optimize your drawing to get higher framerates on mobile canvas.

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