Cocos2D Sprite Sheet Animation

By | March 29, 2011


Suppose you have a sprite sheet of the desired animation you want. But how will you use that sprite sheet animation in your program using cocos2D? That’s simple. See the following code first.

Note : But how to make a sprite sheet? That topic can be found here. Making of sprite sheets from individual images are well discussed in that post.

//Initializing a CCSpriteBatchNode with our sprite sheet image
CCSpriteBatchNode *newSpriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"jumpingOver.png"];

//Adding the spriteSheet to the layer & setting the z orientations
[self addChild:spriteSheet z:14];

//Creating Frames from the frames file jumpingOver.plist
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"jumpingOver.plist"];

//Initializing a sprite with the first frame from plist
CCSprite *jumper = [CCSprite spriteWithSpriteFrameName:@"jump1.png"];

//Creating an NSMutableArray for adding the frames from plist
NSMutableArray *framesArray = [[NSMutableArray array] retain];

//Iterating for the total number of frames from plist
//Here supposing our jumpingOver plist have 15 images
for(int i=0; i<15; i++){
//Adding frames to our framesArray from the frames
[framesArray addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"jump%d.png",i]]];

//Creating an animation using the frames in framesArray
CCAnimation *jumping = [CCAnimation animationWithFrames:framesArray delay:0.25f];

//Setting our jumper sprite sprite sheet animation to the position of one another sprite
//oldSprite is our previous sprite on that position we are adding the animation

//Creating action from the animation jumping
CCAction *jumpAction= [CCAnimate actionWithAnimation:jumping];

//running the action on jumper sprite with the sprite sheet animation action on jumpAction
[jumper runAction:jumpAction];

//Adding the jumper sprite to the layer with z orientation
[self addChild:jumper z:15];

If you have any doubt in animating your sprite sheets or about creating a sprite sheet , please feel free to comment us!

8 thoughts on “Cocos2D Sprite Sheet Animation

  1. Pingback: How to make Sprite Sheets ? | Coderz Heaven

  2. Suraj


    I’ve a doubt… Suppose, we need to remove the animation on animation completion and readd it some other time… I’m able to remove it on animation completion using [spritebatchnode removechild:anim_sample];… but, when I try to add it on next time, it’s not being added,,.,



    1. James

      Are you getting any error such as “child already added” or something. Then try removing it from [self removeChild] and add it again. try cleanUp option also on removeChild. Paste the exact error or warning that you are getting.

  3. Alex

    Thank you for posting this code, it helped me a lot. One question i have though is why does my sprite move slightly down the screen after the animation completes? Would it have anything to do with my spritesheet png or plist?

  4. Arny

    Hi, I’ve tried a LOT of different ways of doing this an (as a complete coding noob) am baffled by the “Initializer element is not a constant” error. It seems to happen whenever “CCSprite…(any suffix) *name” is followed by ” = [CCSprite…(anything)…..”.

    I’m sure this is an easy fix, could someone help a newbie out? =)

    1. James

      Try this….

      CCSprite *sp = [CCSprite spriteWithFile:@”image.png”];
      may be you are not putting “@” infront of “image.png.

      Can you paste the sample code where you are getting error, so that we can get a clear understanding of it.

      1. Arny

        Basically what I have right now is nothing but the cocos2D “HelloWorld.m” file of a new project and then just a bunch of unused sprites like “CCSprite *Sprite” under the #import “HelloWorldScene”command.

        I copied and pasted your suggestion (but changed the “image.png” to something that existed) and continue to get:

        “Initializer element is not constant”

        Like I said this has to be something simple I’m oblivious to, like changing it to .mm/C++ (that worked for some people with this error but I just get like 999+ (!) errors if I do that :p

        Thanks for any input, I would have posted all the code but I’m on vacation and only haper my phone for internet atm. Thank you!

        1. James


          Did you import the Cocos2D libraries.
          Try creating a Cocos2D project.
          Select from the Create-new-project Menu -> Cocos2D, Box2D project and simply run it.
          In the Helloworld program itself there is a sample sprite defined.
          If you get errors in that, then you might have not installed Cocos2D correctly.


Leave a Reply

Your email address will not be published. Required fields are marked *