Phaser Performance in a Shoebox

Article by Richard Davey. Posted on 26th Aug 2015.   @phaser_


tebaomang writes on his blog: "So a few weeks ago, I was working with a group of Phaser developers on the performance of a game. There were tons of problem with the games regarding this matter, mostly related to the amount of display objects and memory consumption. In this post, I would be talking about how packing the images in texture atlas helped with the memory problem.

Texture Atlas is a type of image packaging created by putting multiple images (called frames) next to each other to create a bigger picture. Unlike normal spritesheet which requires all the frames to be identical in dimension putting side by side as columns and rows, texture atlas uses a separated file to mark the size and position of each frame on the atlas.

With many processors, an image file is saved in the memory as a texture with dimension of a power of two (aka POT, like 2, 4, 8, 16, 128, 256, 512, 1024, 2048,…). For example, an image of size 25×129 (3225 pixels) will be saved on a texture of 128×256 (32768 pixels), producing a waste of 9 times the original size. The more images like this are loaded, the more waste the game produces and the more memory the game uses.

However, if we stack 5 images like that on top of each other into a single image of size 125×129 (16125 pixels), this new image can still be saved in the memory at 128×256, which only produce a waste of 2 times the original size. This new image is called a texture atlas."

Read the full tutorial