Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Running HTML5 Mobile Web Games at 60fps


Published on

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.

Published in: Mobile
  • Be the first to comment

Running HTML5 Mobile Web Games at 60fps

  1. 1. Apoorv Saxena @apoorv_saxena
  2. 2. 1998 2007 2009
  3. 3. What’s next?
  4. 4. Let the Data Speak!
  5. 5. Following are the stats of a Survey Link:
  6. 6. Smooth Navigation Jank Free Experience Everything in 16ms What is the need of the hour then?
  7. 7. HTML5 Mobile Games at 60fps #perfmatters
  8. 8. Why is 60fps important?
  9. 9. 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.
  10. 10. 16ms isn’t a lot of time
  11. 11. In a Nutshell..
  12. 12. Need for Speed
  13. 13. Evolution of the Web: Browser & Technologies
  14. 14. 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.
  15. 15. Rendering at 60fps
  16. 16. 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
  17. 17. Performance Cheat Codes:
  18. 18. HARDWARE ACCELERATION rules me
  19. 19. Force Hardware Accelerated Canvas(where supported) Hack: Add 3D transform to the body via CSS
  20. 20. Do you know?
  21. 21. Canvas is not Hardware Accelerated in every browser
  22. 22. DOM Sprites
  23. 23. Build Games using DOM Elements ● Create Characters using Div, Spans and nested images ● Animate them using CSS and JS
  24. 24. ● 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
  25. 25. Sprite.js (use any of the following for rendering) DOM Canvas WebGl
  26. 26. Don’t update Canvas unnecessarily. (Repaints are costly and must be performed at adequate intervals) Hint: requestAnimationFrame to the rescue.
  27. 27. Use Sprite Sheets to avoid texture swaps
  28. 28. Bind Events only when required and turn them off when not in use
  29. 29. Garbage Collection is a necessary Evil. Tip: Create Objects beforehand.
  30. 30. Adjust your operations as per Framerate
  31. 31. ONE STEP BACK: HOW COMPILATION WORKS C/C++ => LLVM => Emscripten => JavaScript
  32. 32. LLVM's optimizer uses type information to perform many useful optimizations. Decades of work have gone into developing optimization passes for C/C++ compilers.
  35. 35. 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.
  36. 36. Thank You!