Improving Game Performance in the Browser

Increasing the
performance of Web
based games
Michael “Mickey” MacDonald
Indie Game Developer & @ScruffyFurn
Extreme Video Game Geek

Areas we will cover
• Loading and caching for performance
• Using Web Workers
• Audio performance tricks
• Optimizing drawing
• Other miscellaneous Tips
Windows Game On

• 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

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);
}

• 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:1
Poor quality - suitable for thumbnails and
previews. Visible blockiness (pixelation).
PNG 10-30% smaller than GIFs
PNG's behave similarly to GIFs only better;
they work best with flat-color, sharp-edged
art.

• 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

• 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 memory churn will cut down the amount of times the garbage
collector runs
Heavy memory churn –
A more ideal memory usage -

• 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

Simple 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();

• 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

• 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

• 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.

• 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..
}

First create a JavaScript file we want to run as our Web Worker
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();

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

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;
};

Terminate a Web Worker
w.terminate();
Reusing the Web Worker
w = undefined;
• You can reuse a worker after it has been terminated

Demo
Simple Web Worker Example

• Use whole number pixel rendering
ctx.drawImage(myImage, 0.3, 0.5);
• CSS for large background images
• Don’t scale images in drawImage

• 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

Windows Game On
Thank you!
Happy Coding

©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.

Improving Game Performance in the Browser

More Related Content

What's hot

Viewers also liked

Similar to Improving Game Performance in the Browser

More from FITC

Recently uploaded

Improving Game Performance in the Browser

Editor's Notes