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
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
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
6 years games industry experience, 8 years programming professionally
Until last year making indie games, mostly C++ and C#
5. There's a problem?
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 Generally works well, except...
Fullscreen draw calls are often slow (especially on iPads)
UIWebView is much slower with Canvas rendering 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
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
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
Analyze the results to see what's eating up your CPU cycles
Remember 1 frame @ 30FPS == 33ms. Every ms counts!
15. We want your games!!
Any technical questions?
Download this presentation: