Labels: , ,

Achieve Smooth Animation in iOS Games

Are you iOS game developer? Then there are many latest technical’s which you should know to develop any game app. As a game developer, it’s naturally that you should know about different design patterns, animation and smoothness. Nowadays, it’s very much necessary to develop any game, which can attract users by its animations and designs.

For any game whether it’s for iPhone or iPad there is a need of proper animation. Now question arise in your mind must be what is animation? We can say as, animation means sequence of images changes to create illusion movement. Then comes the second question in the mind of any iOS game developer that – how to achieve this animation in iPhone or iPad game?

Achieve Smooth Animation In iPhone And iPad Games

There are many ways to implement animation in game like CCSprite, TextureAtlas and CCSpriteBatchNode. Each has its own benefits and drawbacks. As per our experience, we found that CCSpriteBatchNode is best in all of them. Now you much be thinking – why? It’s need.


Whenever user wants to change image of sprite then he/she has to change image or texture so the graphics hardware has to prepare the rendering. Rendering and cleanup after rendering is overhead due to single texture. To overcome this iOS game developer can lighten graphics hardware that you have a group of sprites that should be rendered on same texture. it is easy for graphics hardware to render and cleanup rendering only once for group of sprites.

If you have around 40 to 50 images to represent like blast and if you render them one by one, the FPS of your game would drop by I think 15%. Using CCSpriteBatchNode you can retain your game FPS and also running your game at top speed.

When to Use CCSpriteBatchNode:

Use CCSpriteBatchNode when you want to display two or more images of the same kind in CCSprite. The more Images you can group together, the greater the benefit of using CCSpriteBatchNode.

Limitation of using CCSpriteBatchNode is that all CCSprite nodes are added to CCSpriteBatchNode. All CCSprite nodes added to it so they can be drawn at same z-order. When you want to set CCSprite with different z-order then you have to create two CCSpriteBatchNode.

How to use CCSpriteBatchNode:

In order to use CCSpriteBatchNode, you should create image using all images you want in batch and also create plist file which contains characteristics of all images. Call it sprite sheet.

To create sprite sheet one has to actually create using image-editor.

We are using zwoptex to create png and plist with group of images. Remember in publish setting select cocos2d format.

Select document height and width as small area as possible in which all your image are included. It will increase texture performance.

Use following code to cache the sprite frames and textures. It will load created texture into frame cache.

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"gift.plist"];

Create CCSpriteBatchNode as follow,
CCSpriteBastchNode *gift = [CCSpriteBatchNode batchNodeWithFile:@"gift.png"];

This will create object of CCSpriteBatchNode with file.The file contains all images you want to render on CCSprite

Get list of frames,
NSMutableArray *walkAnimFrames = [NSMutableArray array];

for (int i = 1; i <= 2 ; ++i)

[walkAnimFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"%d.png", i]]];
I have two images in my gift.plist so loop two times. You can loop through as much image as you have in your texture.

Create the animation object,
CCAnimation *walkAnimation = [CCAnimation animationWithSpriteFrames:walkAnimFrames delay:0.2f];
walkAnimation will animate all frames in spritesheet and render all images one by one onto CCSprite.

Create sprite and run the animation action,
   CCSprite *giftAnim = [CCSprite spriteWithSpriteFrameName:@"1.png"];
Create CCSprite object on which you run animation
           id runAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:walkAnim]];
           [giftAnim runAction:runAction];
           [gift addChild:giftAnim];

Now we hope all the iOS game developer had understood how and why to use CCSpriteBatchNode in game to show animation. Let’s start to develop iPhone games in such away. Best of luck!!!!!!!!


  1. Pratik Somaiya said...:

    Very informative Article.

Post a Comment