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