Sprite Animation in CoCos2D

Creating an animation for a CCSprite can be a repetitive task. If we draw different image at the same location that will be displayed as animated image. We make a single image from a series of image by simple math. The series of image is drawn one after another.
We are going to animate a walking girl image as shown in the following image. Each image will be extracted from this big image and will be added to an array of images.

See the GameLayer.java how it has been implemented.

The image has been collected from http://gamedevelopment.tutsplus.com

/*
 * Design and developed by Hemelix
 * Free to use, if you think this help you consider helping Hemelix
 * Visit http://www.hemelix.com/spriteanimationcocos2d
 * GameLayer.java 
 * version 1.0
 */

package com.hemelix.gametemplate;

import org.cocos2d.layers.CCColorLayer;
import org.cocos2d.layers.CCScene;
import org.cocos2d.actions.base.CCRepeatForever;
import org.cocos2d.actions.interval.CCAnimate;
import org.cocos2d.actions.interval.CCIntervalAction;
import org.cocos2d.nodes.CCAnimation;
import org.cocos2d.nodes.CCDirector;
import org.cocos2d.nodes.CCSprite;
import org.cocos2d.nodes.CCSpriteSheet;
import org.cocos2d.types.CGPoint;
import org.cocos2d.types.CGRect;
import org.cocos2d.types.CGSize;
import org.cocos2d.types.ccColor4B;

import android.util.Log;

public class GameLayer extends CCColorLayer {

    private static final String TAG = "GameLayer";
    CCSprite walkingGirl;
    CCIntervalAction actionC;
    float xPoint = 200.0000000f;
    int screenWidth = 0;

    public static CCScene scene() {

        CCScene scene = CCScene.node();
        //Make the screen white color
        CCColorLayer layer = new GameLayer(ccColor4B.ccc4(255, 255, 255, 255));
        scene.addChild(layer);
        return scene;
    }

    protected GameLayer(ccColor4B color) {
        super(color);
        super.isTouchEnabled_ = true;
    }

    @Override
    public void onEnter() {
        super.onEnter();
        schedule("createCCSpriteSheet");
    }

    public void createCCSpriteSheet(float dt) {
        Log.d(TAG, ">= screenWidth) {
            unschedule("changeCCSpriteSheetPoint");
            int tag = walkingGirl.getTag();
            walkingGirl.stopAllActions();
            removeChild(tag, true);
            schedule("createCCSpriteSheet", 1.0f);
        }
    }

    private void removeChild(int tag2, boolean cleanup) {
        super.removeChild(this, cleanup);
    }

    @Override
    public void onExit() {
        super.onExit();
    }
}

Mostly you will create a CCSprite subclass for each animated object in your game. If you have lots of animations you will end up with a lot of boilerplate-code looking somewhat similar to this:

Main activity class that initialized CoCos2D framework and create an instance of class GameLayer.

/*
 * Design and developed by Hemelix
 * Free to use, if you think this help you consider helping Hemelix
 * Visit http://www.hemelix.com/spriteanimationcocos2d
 * MainActivity.java 
 * version 1.0
 */

package com.hemelix.gametemplate;

import org.cocos2d.layers.CCScene;
import org.cocos2d.nodes.CCDirector;
import org.cocos2d.opengl.CCGLSurfaceView;

import com.hemelix.gametemplate.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    /*
     * An implementation of SurfaceView that uses the dedicated surface for
     * displaying OpenGL rendering from cocos2d.
     */
    protected CCGLSurfaceView _glSurfaceView;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,
                WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        _glSurfaceView = new CCGLSurfaceView(this);
        setContentView(_glSurfaceView);

        //
        CCDirector director = CCDirector.sharedDirector();
        director.attachInView(_glSurfaceView);
        director.setDeviceOrientation(CCDirector.kCCDeviceOrientationLandscapeLeft);

        CCDirector.sharedDirector().setDisplayFPS(true); // display fps
        CCDirector.sharedDirector().setAnimationInterval(1.0f / 60.0f); 

        CCScene scene = GameLayer.scene(); //
        CCDirector.sharedDirector().runWithScene(scene);

    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public void onPause() {
        super.onPause();
        CCDirector.sharedDirector().pause();
    }

    @Override
    public void onResume() {
        super.onResume();
        CCDirector.sharedDirector().resume();
    }

    @Override
    public void onStop() {
        super.onStop();
        CCDirector.sharedDirector().end();
    }

}

Please download the example and run it in emulator. You are free to use this code anywhere in anyway you wish.

Download Source Code Example