Animating a Sprite with Cocos2d

This tutorial will show you how to animate a sprite with cocos2d.
AnimatingASpriteVideo

If you don’t have cocos2d installed. Install it now.

Begin by starting a new project. I will be using cocos 2d 0.99.4.

Next we need a graphic that has at least two frames.

You can make your own using Gimp or Photoshop, or you can use my pre-made graphics.

We now need to create a png file that contains both images and a plist that contains the coordinates, where the images are located in the png file. We will use zwoptex.

file/import images- Adds the images to zwoptex.

arrange – Will arrange the images how ever you select.

Then export both the plist and the png files and add it to your game. Make sure that the files are named the same thing.

Now for the code place this in your init method.

CGSize windowSize = [[CCDirector sharedDirector] winSize];
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"ballEyes.plist"];
NSMutableArray *animFrames = [NSMutableArray array];
CCSpriteFrame *frame1 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"EyesClosed.jpg"];
[animFrames addObject:frame1];
CCSpriteFrame *frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Eyesopened.jpg"];
[animFrames addObject:frame2];

CCAnimation *animation = [CCAnimation animationWithName:@"blink" delay:0.4f frames:animFrames];

CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"EyesClosed.jpg"];
sprite.position=ccp(windowSize.width-sprite.contentSize.width/2,windowSize.height-sprite.contentSize.height/2);
[self addChild:sprite];

id animate = [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO];
id repeat= [CCRepeatForever actionWithAction:animate];
[sprite runAction:repeat];

If you just copy and paste the “” will be messed up so just retype them. If it is right the text in side the “” will turn red.

Let us look at the code one line at a time.

CGSize windowSize = [[CCDirector sharedDirector] winSize];

windowSize is set equal to the size of the window. This will be used later on.

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

This line is taking all the frames from ballEyes.plist and storing them in memory so you can access them later. Note I named my plist “ballEyes.plist” you may have named yours something different if so replace this text.

NSMutableArray *animFrames = [NSMutableArray array];

animFrames is simply an array that we will store frames in.

CCSpriteFrame *frame1 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"EyesClosed.jpg"];
[animFrames addObject:frame1];

CCSpriteFrame *frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Eyesopened.jpg"];
[animFrames addObject:frame2];

ok there are four lines of code but the bottom two are almost the same as the top. The first line is creating a frame, then grabbing an image from memory  and setting the frame equal to that image. EyesClosed.jpg is the name of one of my frames you can see the name of the frames in your plist by opening it in xcode and clicking the arrow next to frames. It should show you a list of your frames and what each on is named.

The second line adds the frame to the array we created earlier.

The other lines of code are simply a repeat of the first two but they are adding a different frame to the array. Note you can have as many frames as you would like.

CCAnimation *animation = [CCAnimation animationWithName:@"blink" delay:0.4f frames:animFrames];

Now we are creating an animation called animation. The name is set to blink but you can call it what ever you would like. Delay indicates how long you want the program to wait before it changes frames right now it is at .4 f meaning it will change ever 0.4 seconds. The frames are set to the array of frames animFrames we created earlier.

CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"EyesClosed.jpg"];

Now we are creating a sprite that we will play the animation on. It grabs the EyesClosed.jpg from memory this is the image that it will display. There are two ways to add the image to the sprite spriteWithSpriteFrameName grabs the image from memory, or spriteWithFile: that grabs the file from your resources folder.

sprite.position=ccp(windowSize.width-sprite.contentSize.width/2,windowSize.height-sprite.contentSize.height/2);

“sprite.position” is where the middle of the sprite is located on the screen. “windowSize.width” is the width of the window. “sprite.contentSize.width” is the size of the sprite we divide this by 2 because we want the sprite right at the edge of the screen. “windowSize.height” is the height of the window. “sprite.contentSize.height” is the height of the sprite.

[self addChild:sprite];

Adds our sprite to the program.

id animate = [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO];

We are creating an action animate that will play thru the animation once and will not restore the original frame. By setting restoreOriginalFrame: to NO the sprite will display the last frame played by the animation. If restoreOriginalFrame: is set to YES the sprite will display the image it was set to before the animation ran.

id repeat= [CCRepeatForever actionWithAction:animate];

This action repeat repeats the action animate forever.

[sprite runAction:repeat];

Finally we have our sprite run the action repeat.

The last thing we need to add is the line bellow to our deallco method.

[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];

The above line removes all your frames from memory.

Now we can go ahead and run our program.

Mess around with the code and see what else you can do.

Try making the sprite go faster or slower.

Here is the code.

Try the next tutorial.

Move a sprite <<

Copy right Britney Lee Johnson Aug 2010.

This entry was posted in cocos2d. Bookmark the permalink.

10 Responses to Animating a Sprite with Cocos2d

  1. This is a great post and may be one that can be followed up to see what the results are

    A buddy sent this link the other day and I am desperately looking your next blog post. Carry on on the superb work.

  2. Morgan Rocle says:

    Found out your internet site via google the other day and absolutely like it. Keep up the fantastic work.

  3. admin says:

    Oh thank-you all I am in school at the moment but if anyone needs a tutorial on anything I will be happy to help.

  4. I read this post fulloy on the topic of the comparisln of hottest and
    previous technologies, it’s amazing article.

    Look at my web blog … insomnia medication

  5. Thank you for the auspicious writeup. It acyually used to be a
    enjoyment account it. Look advanced to morre delivered agreeable from you!

    By the way, how can we keep in touch?

    Review my weeb site – UPS contact number (http://www.upscontactnumber.co.Uk)

  6. I do not even know how I finished up right here, however I thought this
    publish used to be good. I don’t recognize who you’re but definitely you’re going to a famous blogger when you aren’t already.

    Cheers!

  7. To Rye Marble Inc, Clearstone can be a layer which
    is around 2mm heavy at first glance of the rock,
    it’s water clear and may be done to what ever you’re looking for matt to high
    gloss, it is not the previous Chinese form of polyurethane two-pack that has been around for a long time which
    has several disadvantages.

    my website marble countertops care

  8. 981 241 1462, We introduce ourselves, as a Manufacturer of all types of rubber compound Conveyor Belts and Rubber Sheets, with all type of grades.

    As mentioned in the Leak Barrier section, valleys have leak barriers installed underneath
    them. The sie of the blunt edge of the depth of penetration can directly affect
    the roots, blunt edge, the more difficult penetration.

Leave a Reply to Morgan Rocle Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>