How to run Web Mobile Games at 60fps, talk presented at Meta Refresh 2015 conference. Presentation discusses the performant tweaks / approaches to consider for running games at mobile at 60fps, and also entails the different pros and cons related to each approach.

2. Apoorv Saxena
@apoorv_saxena

9. 1998 2007 2009

11. What’s
next?

17. Let the Data Speak!

18. Following are the stats of a
Survey
Link: http://www.google.com/insights/consumersurveys/view?survey=xqnkc3hqtrucy

21. Smooth Navigation
Jank Free Experience
Everything in 16ms
What is the need of the hour then?

22. HTML5 Mobile Games at
60fps
#perfmatters

24. Why is 60fps important?

25. At EdgeConf 2012,
Facebook confirmed this when it
mentioned that in an A/B test, it slowed
down scrolling from 60fps to 30fps,
causing engagement to collapse.

26. 16ms isn’t a lot of time

27. In a Nutshell..

28. Need for
Speed

29. Evolution of the Web: Browser & Technologies

31. Optimizing Performance
● Performance is a feature. (Done)
● Optimize Content Efficiency: Deliver your
content to users as quickly as possible. (Done)
● Once they're in, make interactions and
rendering as smooth as possible.

32. Rendering at 60fps

33. Style/Layout PaintingJS Compositing
keep < 16ms!
1. Add CSS rules in style via JS.
2. Recalculate style, maybe relayout.
3. Paint the browser’s mental model to a layer
4. Composite all layers into a final image

35. Performance Cheat Codes:

36. HARDWARE ACCELERATION
rules me

37. Force Hardware Accelerated
Canvas(where supported)
Hack: Add 3D transform to the body via
CSS

38. Do you know?

39. Canvas is not Hardware
Accelerated in every browser

40. DOM Sprites

42. Build Games using
DOM Elements
● Create Characters using Div, Spans and
nested images
● Animate them using CSS and JS

44. ● Cross Platform
● Divs are hardware
accelerated on less
capable hardware.
PROS
● Doesn’t come anywhere
close in performance to
Canvas (where
hardware accelerated)
● Lacks in Complex
Visualisations and
Gameplay.
CONS

47. Sprite.js
(use any of the following for rendering)
DOM
Canvas
WebGl

48. Don’t update Canvas
unnecessarily.
(Repaints are costly and must be performed at
adequate intervals)
Hint: requestAnimationFrame to the rescue.

50. Use Sprite Sheets
to avoid texture swaps

52. Bind Events only when
required
and turn them off when not
in use

55. Garbage Collection is a
necessary Evil.
Tip: Create Objects beforehand.

57. Adjust your operations as
per Framerate

59. ONE STEP BACK:
HOW COMPILATION WORKS
C/C++ => LLVM => Emscripten => JavaScript

60. LLVM's optimizer uses type information to
perform many useful optimizations.
Decades of work have gone into developing
optimization passes for C/C++ compilers.

61. MICROBENCHMARKS

62. REALISTIC/LARGE BENCHMARKS

64. Note:
Our eyes are much more attuned to variance
than framerate.
A steady 30Hz looks better than 60Hz that
misses a few frames a second.

66. Thank You!