{"id":1077,"date":"2012-05-22T20:52:37","date_gmt":"2012-05-22T18:52:37","guid":{"rendered":"http:\/\/www.frozax.com\/blog\/?p=1077"},"modified":"2015-04-04T19:46:39","modified_gmt":"2015-04-04T19:46:39","slug":"optimizing-graphics-performance-ios-android-cocos2dx","status":"publish","type":"post","link":"https:\/\/www.frozax.com\/blog\/2012\/05\/optimizing-graphics-performance-ios-android-cocos2dx\/","title":{"rendered":"Optimizing Graphics Performance on iOS and Android"},"content":{"rendered":"

The\u00a0main device is used during the development of Don’t Feed the Trolls<\/a> is an Acer Iconia Tab A500<\/a>. It’s quite powerful and I never met performance issues with it.<\/p>\n

Of course, I tested the game on many other iOS and Android devices. I was surprised to discover strong performance issues on a HTC Desire. <\/p>\n

In this article, I will explain the reasons of these low performances and how I fixed them. I will also give you tips on how to find out where are the potential problems.<\/em><\/p>\n

Problem 1 : in-game, the game was slower and slower when getting closer to the end of the level<\/h3>\n

O\"03.<\/a>Of course, the difference at the end of the level is that many bears and trolls have been displayed so the problem probably has to do with that. However, there was never more than 3 or 4 characters visible at the same time.<\/p>\n

Also, to avoid memory allocation during gameplay, I pre-allocate all the character sprites used in the level at the start of the level. So the problem was not memory related. Finally, the game code dealing with inactive or invisible characters was doing nearly nothing.<\/p>\n

I finally found out the problem is caused by characters that disappeared. They are displayed, but fully transparent. I used a CCFadeOut<\/a> action to hide the sprites. At the end of the CCFadeOut<\/em>, the object was still displayed, but with an opacity of 0. An easy fix is to hide the sprite (CCHide<\/a> action) at the end of the fade out to avoid a useless draw call.<\/p>\n

Fix 1 : Make sure you do not have invisible sprites (completely transparent or with very low opacity). Destroy or hide them instead.<\/strong><\/span><\/p>\n

Problem 2 : the main menu is very slow<\/h3>\n

\"05<\/a>My menus have many animated transitions, for instance when you choose the “achievements” menu, the game mode selection screen leaves to the left, while the achievements screen comes from the right. There is also a credits screen, a level selection screen (for the classic mode) and a difficulty selection screen (for the versus mode). All these screens are built once when loading the main menu. They are simply off-screen when not displayed to the player.
\nThe performance problem was therefore obvious: all the offscreen items were slowing down the whole program. I thought cocos2dx or the device itself would not display offscreen items but I was wrong. Simply hiding these items improved the performance greatly. In the achievements list (see screenshot on the left), I hide every line and sprite as soon as it’s out of the screen. It requires specific code but it’s really worthwhile.<\/p>\n

Fix 2 : Do not have elements displayed off screen. Remove them from the scene or hide them instead.<\/strong><\/span><\/p>\n

Problem 3 : the main menu is slow when the rankings are displayed<\/h3>\n

\"07<\/a>In the main menu, when the rankings are displayed (see screenshot on the left), the fps drops heavily. Obviously, this is caused by the quantity of text. Cocos2dx optimizes the texts by using a single OpenGL draw call to display a string, instead of drawing each character one by one. It’s good but not enough in my case. I initially used a simple (and logical) approach and had one CCLabelBMFont<\/a> per element of the rankings. There are up to 10 lines with 3 elements per line (position, name, score), and two headers. That’s a total of 32 draw calls here, only for texts. I updated the code so that all the rankings texts are now displayed with a single draw call (see below for implementation details). The game is now running smoothly.<\/p>\n

Fix 3 : Use as few draw calls as possible by grouping sprites together<\/strong><\/span><\/p>\n

How to reduce draw calls with Cocos2d-x<\/a>?<\/h3>\n

The easiest way to reduce draw calls is to use a\u00a0CCSpriteBatchNode<\/a>. If you have multiple sprites using the same texture, they can be displayed in one call if they share the same CCSpriteBatchNode<\/em> parent. Hopefully, as I use texture pages, my sprites are nearly all in the same texture (see How to pack your textures<\/a>). Here are some examples of optimizations I did in Don’t Feed the Trolls:<\/p>\n