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

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-Games
Thursday, 16 August 12

2. Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

4. The Reasons:
IP Protection
Buggy/Unreliable Components
Low Performance
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

7. Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

11. Buggy/Unreliable Components
We’re all familiar with spritesheets
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

14. Buggy/Unreliable Components
Heightmaps
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

21. Rendering Speed / Paint Ops
“Dirty Rectangles” / ATR
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

22. Rendering Speed / Paint Ops
Layering / Compositing
Static Layer Animated Layer
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

23. Rendering Speed / Paint Ops
Layering / Compositing
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

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 Pagella
Thursday, 16 August 12

26. Thank you!
Thursday, 16 August 12