Pixi.js performance

Tails is run in the browser using PixiJS (a wrapper library for WebGL). Rendering performance proved to be a challenge. We went into the project thinking that performance would not be an issue. After all, our game was not to be graphically advanced, so there was probably no need to focus on optimising performance. That turned out to be very wrong.

There are a lot of things you need to be mindful of, even if your game doesn’t seem to be advanced. We strongly recommend that you follow the advice in the wiki. When you work with WebGL you want the number of “draw calls” to be as low as possible. We managed to go from more than 1000 draw calls to just a single one, following that guide.

The snakes are rendered as lots of tiny Pixi sprites. Every other game update, the “head” will drop a “tail” sprite in its current location. This means that in the end of every round we might have more than 10 000 sprites in play at the same time. And that’s what caused the game to lag in certain situations.

Some general advice:

• Debug your scene and check how your code changes the amount of draw calls. The best way we found to do this is using the built-in canvas debugger in Firefox or a Chrome extension called Spector

• For static instances of Graphics that never change, use the “cacheAsBitmap” flag. As far as we understand, every time Pixi has to switch between rendering a Sprite and rendering Graphics during a frame, it adds one extra draw call to your frame. The “cacheAsBitmap” will eliminate this extra draw call.

• Use sprite sheets. We ended up buying a license for TexturePacker. It’s super easy to use, just drag and drop your folder with individual images and tweak the settings a bit. We set the “size constraints” to “POT (Power of 2)” since we read that it’s preferable. And we added some “Border padding” and “Shape padding” since otherwise sometimes the sprites would “bleed” into each other. 

We preload the textures with Pixi’s built- in resource loader.  Here is a code snippet that we use to easily get the textures in our code:

https://gist.github.com/sajmoni/300d65e73ff8cc658ffdfb257b0722aa

This function (and more) is also available in a utility library for Pixi we made:

https://github.com/rymdkraftverk/level1

/ Rymdkraftverk