BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
Download as PPT, PDF1 like1,337 views
The document discusses HTML5 game performance and the challenges developers face across different platforms, particularly with canvas rendering. It highlights issues with device-specific performance metrics, the impact of various web browsers, and offers tips for optimizing game performance. Additionally, it emphasizes the importance of profiling and efficient resource management in game development.
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