Question

I had a small question.If i want to make a man run in android one way of doing this is to get images of the man in different position and display them at different positions.But often,this does not work very well and it appears as two different images are being drawn.Is there any other way through which i can implement custom animation.(Like create a custom image and telling one of the parts of this image to move).

Answer 1

The way i do it is to use sprite sheets for example (Not my graphics!):

You can then use a class like this to handle your animation:

public class AnimSpriteClass {

private Bitmap mAnimation;
private int mXPos;
private int mYPos;
private Rect mSRectangle;
private int mFPS;
private int mNoOfFrames;
private int mCurrentFrame;
private long mFrameTimer;
private int mSpriteHeight;
private int mSpriteWidth;

public AnimSpriteClass() {
    mSRectangle = new Rect(0,0,0,0);
    mFrameTimer =0;
    mCurrentFrame =0;
    mXPos = 80;
    mYPos = 200;
}

public void Initalise(Bitmap theBitmap, int Height, int Width, int theFPS, int theFrameCount) {
    mAnimation = theBitmap;
    mSpriteHeight = Height;
    mSpriteWidth = Width;
    mSRectangle.top = 0;
    mSRectangle.bottom = mSpriteHeight;
    mSRectangle.left = 0;
    mSRectangle.right = mSpriteWidth;
    mFPS = 1000 /theFPS;
    mNoOfFrames = theFrameCount;
}
public void Update(long GameTime) {
    if(GameTime > mFrameTimer + mFPS ) {
        mFrameTimer = GameTime;
        mCurrentFrame +=1;

        if(mCurrentFrame >= mNoOfFrames) {
            mCurrentFrame = 0;
        }
    }

    mSRectangle.left = mCurrentFrame * mSpriteWidth;
    mSRectangle.right = mSRectangle.left + mSpriteWidth;
}

public void draw(Canvas canvas) {
    Rect dest = new Rect(getXPos(), getYPos(), getXPos() + mSpriteWidth,
                getYPos() + mSpriteHeight);

    canvas.drawBitmap(mAnimation, mSRectangle, dest, null);
}

• mAnimation – This is will hold the actual bitmap containing the animation.
• mXPos/mYPos – These hold the X and Y screen coordinates for where we want the sprite to be on the screen. These refer to the top left hand corner of the image.
• mSRectangle – This is the source rectangle variable and controls which part of the image we are rendering for each frame.
• mFPS – This is the number of frames we wish to show per second. 15-20 FPS is enough to fool the human eye into thinking that a still image is moving. However on a mobile platform it’s unlikely you will have enough memory 3 – 10 FPS which is fine for most needs.
• mNoOfFrames -This is simply the number of frames in the sprite sheet we are animating.
• mCurrentFrame – We need to keep track of the current frame we are rendering so we can move to the next one in order.~
• mFrameTimer – This controls how long between frames.
• mSpriteHeight/mSpriteWidth -These contain the height and width of an Individual Frame not the entire bitmap and are used to calculate the size of the source rectangle.

Now in order to use this class you have to add a few things to your graphics thread. First declare a new variable of your class and then it can be initialised in the constructor as below.

Animation = new OurAnimatedSpriteClass();
Animation.Initalise(Bitmap.decodeResource(res, R.drawable.stick_man), 62, 39, 20, 20);

In order to pass the value of the bitmap you first have to use the Bitmap Factory class to decode the resource. It decodes a bitmap from your resources folder and allows it to be passed as a variable. The rest of the values depend on your bitmap image.

In order to be able to time the frames correctly you first need to add a Game timer to the game code. You do this by first adding a variable to store the time as show below.

private long mTimer;

We now need this timer to be updated with the correct time every frame so we need to add a line to the run function to do this.

public void run() {
    while (mRun) {
        Canvas c = null;
        mTimer = System.currentTimeMillis(); /////This line updates timer
        try {
            c = mSurfaceHolder.lockCanvas(null);
            synchronized (mSurfaceHolder) {
                Animation.update(mTimer);
                doDraw(c);
            }....

then you just have to add Animation.draw(canvas); your Draw function and the animation will draw the current frame in the right place.