Starling draw calls explained!

One of the key factors for the performance in mobile apps is to keep the number of draw calls as less as possible. A draw call is considered when starling needs to switch the texture to draw a particular Image. If you are drawing everything from a single atlas, it will be considered as a single draw call. So it’s always best to use atlases rather than normal images.

For small applications or games, a single atlas will be sufficient for most cases. If you need to use multiple texture atlases, it is important to decide which texture to place in which atlas to reduce number of draw calls. Starling uses painting algorithm to draw screen on each frame. It draws element from the last element to the top most element in the display list. So while performing this operation, we need to create the atlases so that there will be less number of atlas switches will be needed.

I will explain this with a situation that I have faced last week. I have been working on a music player using Feathers and Starling. In that I needed to display songs list in a scroll container. I have album arts for all the songs in an atlas. My initial idea was to store all the album arts in an atlas and the other UI assets in another atlas. The song list has several items, each item has an album art and a background image with some text. The album art comes from one atlas, the background image comes from another atlas and the text is bitmap text loaded from image. When I tested the application, I realized that the draw calls are around 270. That is too much and the app crashed in the device.

What actually happened was Starling had to switch the atlases each time when it was to draw background, text and album art. This happened for all the items. So 4 calls per item and there are around 60 items, resulted in 240 draw calls in total . So I moved the background and another assets to album arts atlas, which reduced the draw calls to 110. But that is also a huge number. The problem now is with the text, which is being loaded from a image. I added this image too to the atlas. But the draw calls remained same. I did a bit of searching and found that we need to set the “batchable” property of textfield to true.
So this did the trick.

textfield.batchable = true;

After this, the draw calls were reduced to 11 and app was running without any problems on the device.

Conclusion: So it is always best to keep the assets that are added to a single sprite or added to a single screen into one atlas to keep the draw calls low. Hope this helps others facing similar situation.

Leave a comment