Adding animations in Cocos2D

Discussion in 'iOS Development' started by Chicken, Jul 21, 2009.

  1. Chicken

    Chicken Retired Moderator

    Joined:
    Feb 17, 2008
    Messages:
    2,494
    Likes Received:
    7
    Device:
    iPhone 5S
    Ok so following my Cocos2D Hello World tutorial, this tutorial will show you how to add an animation to a sprite.

    I recommend you go through my Cocos2D hello world tutorial before attempting this, as I won't be explaining how to set up the layers and scenes, it's already there in the file below. The Hello World tutorial can be found here.

    OK so first I've set up the basic project for you, with a scene and layer.

    Download it here.

    OK so first of all open that project and go into AnimationScene.m

    Please Register or Log in to view images



    Now download this file which we are going to use for the background.

    Download here.

    Drag that file into your Xcode projects "Resources" folder.

    Now we're going to set the background so in our GameScene implementation add this

    [OBJC]
    - (id)init {
    self = [super init];
    if (self != nil) {
    Sprite *background = [Sprite spriteWithFile

    Please Register or Log in to view images

    "background.png"]; // Create a sprite that will be our background
    background.position = ccp(160, 240); // Set the position of the background, ccp is just a macro for CGPointMake

    [self addChild: background]; // Add background as a child

    }
    return self;
    }
    [/OBJC]

    OK so we added a background, now we need to add the layer to do this we need to add one more line of code.

    [OBJC]
    [self addChild:[AnimationLayer node] z: 1]; // Add layer, and set it ontop of the background
    [/OBJC]

    Your GameScene should now look like this

    Please Register or Log in to view images



    Now download this image, and drag it into the "Resources" folder.

    Download here.

    OK so now we've told it to add our Game Layer we're going to add a method to our GameLayer implementation

    [OBJC]
    - (id)init {
    self = [super init];
    if (self != nil) {
    Sprite *stickman = [Sprite spriteWithFile

    Please Register or Log in to view images

    "sprite.png"]; // Create sprite of stickman
    stickman.position = ccp(160, 240); // Set position of stickman
    [self addChild: stickman z: 2]; // Add stickman above layer
    }
    return self;
    }
    [/OBJC]

    Ok so now we've added the stickman to the layer, now we want to make him move, this is where the animating comes in and it's really easy only 2 lines

    [OBJC]
    id animation = [MoveBy actionWithDuration:2.0 position:ccp(-100, 0)]; // Make the animation MoveBy tells the sprite to move "so many pixels" from it's current position
    [stickman runAction: animation]; // Tell the stickman to do the animation
    [/OBJC]

    OK so now your AnimationLayer implementation should look like this

    Please Register or Log in to view images



    That’s it build and go, and you get a nice little animation. It's nothing fancy but hey it works.

    The finished Xcode project can be downloaded here.

    Download here.

    I hope you liked the tutorial, if you have any ideas for future tutorials please tell me.
  2. srikanth

    srikanth New Member

    Joined:
    Mar 27, 2010
    Messages:
    1
    Likes Received:
    0
    Hi,
    Is is it possible to do the animation for CCMenuSprite? I tried for it but it is not working according to the dimensions(or parameters) given.

Share This Page