Upload
fitc
View
176
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Improving Game Performance in the Browser with Mickey MacDonald Presented on September 17 2014 at FITC's Web Unleashed 2014 event in Toronto Poor performance is the easiest way to wreck the experience of any game; with web-based games, performance is even more crucial. In this talk, Mickey will discuss the various ways that we can optimize web-based games. He will look at the how the use of WebWorkers can increase performance, as well as tricks to improve load times and audio performance. So join Mickey and learn how to optimize your game to be lightning fast in every browser. OBJECTIVE Demonstrate techniques for increasing game performance in browsers TARGET AUDIENCE Web-based game developers ASSUMED AUDIENCE KNOWLEDGE Basic web-based game development skills FIVE THINGS AUDIENCE MEMBERS WILL LEARN Using WebWorkers to increase performance How to speed up load times Audio performance techniques Best practices for graphics compression Pooling techniques
Citation preview
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.