Sprites & Spritesheets

Sprites

            CCSprite is one of the most important classes of Cocos2d. A CCSprite contains an image & GL square (that determines the size of the texture) and values such as position, z-value, scale etcetera.

 It’s common practice to create a subclass of CCSprite for our games most important characters, such as the main character. This allows us to add other variables to the class, such as the lives and reloading times of our tank.

Spritesheets

One of Tank Rampage's spritesheets

            A game can have a large number of sprites on the screen, and since a mobile device’s processing power is limited, it’s important to be careful when handling a lot of resources.

            If you were to place every image for every sprite in a separate file, the system would needs to go through every image and pass in a square for every sprite in order to display all the sprites. What a sprite sheet does is it reduces the amount of calls that have to be made in order to display all the sprites.

            By placing all the sprites in a single image and placing all the GL squares in an array, the system only has to make one call to load the texture for all the sprites, and one call to find the square of a sprite in the array. This makes the game run faster.

            There are however some limitations to this. Since all the sprites are drawn in one call, changing the z of the sprites can only be done with the entire spritesheet as a whole. To change the order of the sprites, one needs to use an external program.

            For the making of Cocos2d-format spritesheets, there are multiple tools. For Tank Rampage, we’ve chosen to use SpriteHelper, as this is compatible with Levelhelper (more on these tools later).