applying old videogame performance techniques to modern web-based games
Post on 29-Jun-2015
337 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Thursday, 16 August 12
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
The Reasons:IP Protection
Buggy/Unreliable ComponentsLow Performance
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12
IP Protection
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
It’s an Ongoing subject of research
VNC/RDC-like solution?
Obfuscation
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
• 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
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
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()
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
“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)
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Three things to keep in mind...
• Loading times
• Rendering speed
• Application Responsiveness
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
We’re all familiar with spritesheets
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Introducing... Soundsheets (AKA Audio Sprites)
+A
B
A BOld school, yo
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Introducing... Soundsheets (AKA Audio Sprites)
• SoundManager 2: http://www.schillmania.com/projects/soundmanager2
• Zynga’s Jukebox: https://github.com/zynga/jukebox
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Heightmaps
Thursday, 16 August 12
Buggy/Unreliable Components
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Heightmaps
Small 32px x 24px Image
http://www.andrespagella.com/using-an-image-editor-as-a-mapeditor
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
• 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’
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
VIEWPORT
for (var i = 0; i < 3; ++i) { for (var j = 0; j < 3; ++j) { paint(); }}
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
VIEWPORT
for (var i = 0; i < 3; ++i) { for (var j = 0; j < 3; ++j) { if (inside_viewport()) { paint(); } }}
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
VIEWPORT
Try that with 1.000.000 rows and 1.000.000 columns...
Tip: It won’t work
https://github.com/andrespagella/Making-Isometric-Real-time-Games/blob/master/examples/ex7-grid-canvas-alt.html
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
* : Uses setTimeout(), not requestAnimFrame(), which is why I’m getting 87 FPS
Benchmarking tests using a 2500 x 2500 grid
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
“Dirty Rectangles” / ATR
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Layering / Compositing
Static Layer Animated Layer
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Layering / Compositing
Thursday, 16 August 12
Rendering Speed / Paint Ops
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
Layering / Compositing
Video Layer Static / Dynamic Layer
Thursday, 16 August 12
Application Responsiveness
Applying Old Videogame Performance Techniques to Modern Web-Based Games - M. Andrés Pagella
• Object pools
• Avoid instantiating objects inside loops
• Keep your DOM Node count low!
• Let your init() function take care of the instatiation
Thursday, 16 August 12
Thank you!
Thursday, 16 August 12
top related