Applying Old Videogame                    Performance Techniques                  to Modern Web-Based Games               ...
Thursday, 16 August 12
Having such an enormous reach,             why do most indie game devs keep             choosing Flash instead of HTML5?  ...
The Reasons:                                IP Protection                         Buggy/Unreliable Components             ...
IP Protection               It’s an Ongoing subject of research                               VNC/RDC-like solution?      ...
Buggy/Unreliable Components         • Pick the “Lowest Common Denominator”         • Graceful Degradation vs. Progressive ...
Buggy/Unreliable Components                     Applying Old Videogame Performance Techniques to Modern Web-Based Games - ...
Buggy/Unreliable Components                           Simple performance benchmark:            Calculate how many DOM elem...
Buggy/Unreliable Components                “Lowest Common Denominator”?             Yep, AKA Progressive Enhancement      ...
Buggy/Unreliable Components                                     Three things to keep in mind...                           ...
Buggy/Unreliable Components                                We’re all familiar with spritesheets                     Applyi...
Buggy/Unreliable Components                    Introducing... Soundsheets (AKA Audio Sprites)                             ...
Buggy/Unreliable Components                    Introducing... Soundsheets (AKA Audio Sprites)   • SoundManager 2: http://w...
Buggy/Unreliable Components                                                      Heightmaps                     Applying O...
Buggy/Unreliable Components                                                      Heightmaps        Small 32px x 24px Image...
Rendering Speed / Paint Ops      •       Extremely ‘expensive’, specially on mobile      •       Try to minimise calls to ...
Rendering Speed / Paint Ops                                                           for (var i = 0; i < 3; ++i) {       ...
Rendering Speed / Paint Ops                                                           for (var i = 0; i < 3; ++i) {       ...
Rendering Speed / Paint Ops                                                             Try that with 1.000.000 rows      ...
Rendering Speed / Paint Ops                                       Benchmarking tests using a 2500 x 2500 grid             ...
Rendering Speed / Paint Ops                                                   “Dirty Rectangles” / ATR                    ...
Rendering Speed / Paint Ops                                             Layering / Compositing                           S...
Rendering Speed / Paint Ops                                             Layering / Compositing                     Applyin...
Rendering Speed / Paint Ops                                             Layering / Compositing                            ...
Application Responsiveness      • Object pools      • Avoid instantiating objects inside loops      • Keep your DOM Node c...
Thank you!Thursday, 16 August 12
Upcoming SlideShare
Loading in …5
×

Applying Old Videogame Performance Techniques to Modern Web-Based Games

568 views

Published on

A more concise version of an original 60-minutes webcast: http://oreillynet.com/pub/e/2229

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
568
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Applying Old Videogame Performance Techniques to Modern Web-Based Games

  1. 1. Applying Old Videogame Performance Techniques to Modern Web-Based Games M. Andrés Pagella - andres.pagella@rga.com @mapagella - http://www.andrespagella.com https://github.com/andrespagella/Making-Isometric-Real-time-GamesThursday, 16 August 12
  2. 2. Thursday, 16 August 12
  3. 3. Having such an enormous reach, why do most indie game devs keep choosing Flash instead of HTML5? Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  4. 4. The Reasons: IP Protection Buggy/Unreliable Components Low Performance Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  5. 5. IP Protection It’s an Ongoing subject of research VNC/RDC-like solution? Obfuscation Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  6. 6. Buggy/Unreliable Components • Pick the “Lowest Common Denominator” • Graceful Degradation vs. Progressive Enhancement? Depends on the game/product • ‘Autodetect’ device capabilities, but let the user change them if they want to • Use clever techniques Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  7. 7. Buggy/Unreliable Components Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  8. 8. Buggy/Unreliable Components Simple performance benchmark: Calculate how many DOM elements you can generate in N amount of seconds. Alternatively (more reliable but less compatible): Use Canvas’ fillRect() Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  9. 9. Buggy/Unreliable Components “Lowest Common Denominator”? Yep, AKA Progressive Enhancement (Before you ask, depending on the genre, Yes, it is possible to make responsive, progressively enhanced web games) Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  10. 10. Buggy/Unreliable Components Three things to keep in mind... • Loading times • Rendering speed • Application Responsiveness Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  11. 11. Buggy/Unreliable Components We’re all familiar with spritesheets Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  12. 12. Buggy/Unreliable Components Introducing... Soundsheets (AKA Audio Sprites) A A+ B B Old school, yo Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  13. 13. Buggy/Unreliable Components Introducing... Soundsheets (AKA Audio Sprites) • SoundManager 2: http://www.schillmania.com/ projects/soundmanager2 • Zynga’s Jukebox: https://github.com/zynga/jukebox Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  14. 14. Buggy/Unreliable Components Heightmaps Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  15. 15. Buggy/Unreliable Components Heightmaps Small 32px x 24px Image http://www.andrespagella.com/using-an-image-editor-as-a-mapeditor Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  16. 16. Rendering Speed / Paint Ops • Extremely ‘expensive’, specially on mobile • Try to minimise calls to the paint function • No WebGL yet, sorry • DOM, Canvas or SVG? • Embrace that flexibility! Why do you need to pick just one? • Cheat! Who cares? • Most 2D games can be developed easily using ‘grids’ Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  17. 17. Rendering Speed / Paint Ops for (var i = 0; i < 3; ++i) { for (var j = 0; j < 3; ++j) { VIEWPORT paint(); } } Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  18. 18. Rendering Speed / Paint Ops for (var i = 0; i < 3; ++i) { for (var j = 0; j < 3; ++j) { if (inside_viewport()) { VIEWPORT paint(); } } } Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  19. 19. Rendering Speed / Paint Ops Try that with 1.000.000 rows and 1.000.000 columns... VIEWPORT Tip: It won’t work https://github.com/andrespagella/Making-Isometric-Real-time-Games/blob/master/examples/ex7-grid-canvas-alt.html Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  20. 20. Rendering Speed / Paint Ops Benchmarking tests using a 2500 x 2500 grid * : Uses setTimeout(), not requestAnimFrame(), which is why I’m getting 87 FPS Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  21. 21. Rendering Speed / Paint Ops “Dirty Rectangles” / ATR Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  22. 22. Rendering Speed / Paint Ops Layering / Compositing Static Layer Animated Layer Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  23. 23. Rendering Speed / Paint Ops Layering / Compositing Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  24. 24. Rendering Speed / Paint Ops Layering / Compositing Video Layer Static / Dynamic Layer Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  25. 25. Application Responsiveness • Object pools • Avoid instantiating objects inside loops • Keep your DOM Node count low! • Let your init() function take care of the instatiation Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés PagellaThursday, 16 August 12
  26. 26. Thank you!Thursday, 16 August 12

×