Performance optimization for cocos2d-x using polygon sprite meshes

2015-10-01 Andreas Löw

cocos2d-x 3.9 comes with a new feature: Polygon mesh sprites. Instead of drawing a whole polygon only the non transparent parts are painted, which increases the frame rate of your game.

We've released TexturePacker 4.0.0 — which creates optimized polygon sprites while building your sprite sheets. It also comes with a new polygon based packing algorithm.

What you'll get from it:


Starting with the most important: Performance. We are running the tests in iPhone 4s. We chose this old device because it's still supported by cocos2d-x and you should always optimize for the slower devices because they are the performance bottle neck.

cocos2d-x game performance comparison: polygon trimming vs rectangular trimming

The test simply draws 500 sprites and we measured the performance in XCode.

What you see is that the GPU load is high in the untrimmed test — 27.4ms of each frame are spent in the GPU, 6.4ms in the CPU.

Rectangular trimming keeps the CPU identical and manages to reduce the GPU load by 14%. It also increases the frame rate from 36 to 42 frames.

This practically means: You should at least use rectangular trimming — simply because it comes for free in terms of CPU. You can only win if you use it.

The polygon trimming takes more load from the GPU — reducing it by 40%. But it comes also with a cost: CPU is increased from 6.5ms to 11.5ms. This increase comes from the additional CPU power required for calculating the vertex positions.

Polygon trimming can dramatically improve your game performance if you have some free CPU cycles to take some load from the GPU.

Using polygon mesh sprites in your cocos2d-x project

Using the polygon mesh sprite is simple — you might not even have to change a single line of code.

Load the sprite sheet into your SpriteFrameCache:


Create your sprite using

auto sprite = Sprite::createWithSpriteFrameName("grossini-dance-05.png");
Do not add the sprite to a SpriteBatchNode (CCSpriteBatchNode in older versions). The batch node uses rectangles (quads) and ignores the polygon information.
Using the sprite without the batch node makes use of auto-batching which uses the polygon data.
The SpriteBatchNode is still in cocos2d-x for compatibility reasons but is deprecated!

Creating polygon mesh sprites

Download TexturePacker 4 — currently available as beta — from here:

Creating polygon meshes for your sprites with TexturePacker

If you are opening an existing project convert it to cocos2d-x by using the button next to Data Format. Select the cocos2d-x. The cocos2d exporter does not yet contain the new modes.

Scroll down and select Trim mode, set it to Polygon outline

You can also enable polygon packing by selecting Algorithm and setting it to Polygon

The value in Tracer Tolerance gives you control over vertex / triangle count vs overdraw.


Polygon sprites can increase the performance of your game. They are easy to add to your project if you are already using TexturePacker to build your sprite sheets.

As you see from the results above, polygon sprites don't come for free. They trade GPU for CPU. Take a look at the performance values of your game. If you see a high GPU load still have resources left on the CPU it's worth testing.

Simply testing the new feature is easy because you might not even have to change your code.

Did you like the tutorial? Please share!