Increasing the performance of Web based games

Michael “Mickey” MacDonaldIndie Game Developer &@ScruffyFurnExtreme Video Game Geek

Windows Game On

Areas we will cover

• Loading and caching for performance

• Using Web Workers

• Audio performance tricks

• Optimizing drawing

• Other miscellaneous Tips

Preloading

• Preload game assets!• Have assets available when needed• Increases performance by not loading assets during game cycle

• Most common libraries are now offering a preloader feature

• PreloadJS - http://createjs.com/#!/PreloadJS• Add preloading to any project• Very easy to setup and use

PreloadJS

var queue = new createjs.LoadQueue();queue.on("complete", handleComplete, this);queue.loadManifest([ { id: "myImage", src: "path/to/myImage.jpg" }]);function handleComplete() { var image = queue.getResult("myImage"); document.body.appendChild(image);}

Increase load times

• Compress assets to help reduce size of download

• When choosing an asset’s format keep compression in mind

• There are many different audio, video and image formats supported by modern browsers

Format Typical Compression Ratios Description

GIF 4:1 - 10:1

Lossless for images <=== 256 colors. Works best for flat color, sharp-edged art. Horizontally oriented bands of color compress better than vertically oriented bands.

JPEG (High) 10:1 - 20:1

High quality - has little or no loss in image quality with continuous tone originals. Worse results for flat color and sharp-edge art.

JPEG (Medium) 30:1 - 50:1 Moderate quality - usually the best choice for the Web.

JPEG (Low) 60:1 - 100:1Poor quality - suitable for thumbnails and previews. Visible blockiness (pixelation).

PNG 10-30% smaller than GIFsPNG's behave similarly to GIFs only better; they work best with flat-color, sharp-edged art.

Image compression

Audio Performance

• Always preload and cache heavily used sound effects

• Compress your audio as much as you can without effecting the quality

• If possible use a low latency plugin• SoundJS - http://www.createjs.com/#!/SoundJS

Memory and the Garbage Collector

• JavaScript’s memory model is built on a technology known as a Garbage Collector

• Garbage collection cost performance

• Garbage Collector decides when memory should be reclaimed

• You have no control when it decides to run

Reducing churn, reduce garbage collection

• Reducing memory churn will cut down the amount of times the garbage collector runs

Heavy memory churn –

A more ideal memory usage -

Object pooling

• Cut down memory churn by using Object Pooling

• Reuse objects from the pool instead of creating new ones

• Object are never deleted from code and won’t be garbage collected

Object poolingSimple example: Create a pool of objects using array

• Pre-construct and populate an object array at load. • Like an array of 20 projectiles

• Instead of create an new projectile when firing:var p = new Projectile();

• Setup a factory function like:var p = new GetNewProjectile();

Object pooling

• Return it to the pool when no longer needed

if (p.collidingWith(enemy)) // It Hit! freeProjectile(p); // return it to the pool

• Once return to the pool make sure to reinitialize all of the values back to an original state

Caching values

• Cache values from calculations• Things like transforms can be cached to save from making more

than one call

var playerTransform = player.getPlayerTransform();

• If you use it more than once, it is a candidate for caching

Using Web Workers

• When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

• A web worker allows JavaScript code to run in the background, without affecting the performance of the page.

Using Web Workers

• Always check for web worker support before creating one

if (typeof (Worker) !== "undefined") { // Yes! Web worker support! // Some code.....} else { // Sorry! No Web Worker support..}

A simple Web Worker exampleFirst create a JavaScript file we want to run as our Web Workervar i = 0;

function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()", 500);}

timedCount();

A simple Web Worker example

Create a Web Worker Object

if (typeof (w) == "undefined") { w = new Worker("demo_workers.js");}

A simple Web Worker example

Now we can send & receive messages from our Web Worker

Below we add an “onmessage” event listener to our Web Worker

w.onmessage = function (event) { document.getElementById("result").innerHTML = event.data;};

A simple Web Worker example

Terminate a Web Worker w.terminate();

Reusing the Web Workerw = undefined;

• You can reuse a worker after it has been terminated

DemoSimple Web Worker Example

Optimize Drawing

• Use whole number pixel renderingctx.drawImage(myImage, 0.3, 0.5);

• CSS for large background images

• Don’t scale images in drawImage

Miscellaneous tips

• Use multiplication instead of division• Use if…else instead of switch case• Keep your game update loops clean • Avoid frequent calls to localStorage• Avoid For each loops in events• If possible use WebGL (Even for 2D)• Use min versions of libraries where possible

wootstudio.ca

Windows Game On

Thank you! Happy Coding

Michael “Mickey” MacDonaldIndie Game Developer &@ScruffyFurnExtreme Video Game Geek

©2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.