Embed Size (px)
DESCRIPTION
Making HTML5 games run well on mobile devices is hard work! We’d like to take a good look into this issue by comparing performance on different versions of iOS and Android. Since there are huge differences in their systems, we will look at what the bottlenecks are on the different platforms, and the different versions of each platform. We would also like to show a mini tutorial in profiling games on Android, and seeing where exactly the bottlenecks lie.
Citation preview
May 2014
Overcoming the bottleneck of HTML5canvas game performance
David Goemans
Moscow | 2014
About us
BoosterMedia was founded in 2009 and is nowthe 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!!
Twitter: @boostermedia
www.boostermedia.com
CONTACT US
Any technical questions?
Twitter: @dgoemans
www.boostermedia.com
Download this presentation:
link: http://is.gd/html5profiling
