Comments on: 2D Sprite Animation in Android

By: Jose

Jose — Mon, 30 Aug 2010 13:38:14 +0000

Thanks Timothy ! This worked perfectly for me ! Wow

By: Timothy Miller

Timothy Miller — Thu, 19 Aug 2010 17:01:21 +0000

ok, I used codemonkey’s, Stephen’s, and Nico’s code and I made a class with everything you need to get this to work properly. Here it is, just copy and paste

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class main extends Activity {
public AnimationSprite testSprite1;
public AnimationSprite testSprite2;
public AnimationSprite testSprite3;
public long GameTime;

public class MySurfaceThread extends Thread {
private SurfaceHolder myThreadSurfaceHolder;
private MySurfaceView myThreadSurfaceView;
private boolean myThreadRun = false;
public MySurfaceThread(SurfaceHolder surfaceHolder, MySurfaceView surfaceView) {
myThreadSurfaceHolder = surfaceHolder;
myThreadSurfaceView = surfaceView;
}
public void setRunning(boolean b) {
myThreadRun = b;
}
@Override
public void run() {
while (myThreadRun) {
Canvas c = null;
try {
GameTime = System.currentTimeMillis();
c = myThreadSurfaceHolder.lockCanvas(null);
synchronized (myThreadSurfaceHolder) {
myThreadSurfaceView.onDraw(c);
}
}
finally {
if (c != null) {
myThreadSurfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{
private MySurfaceThread thread;
@Override
protected void onDraw(Canvas canvas){
canvas.drawColor(Color.BLACK);
testSprite1.Update(GameTime);
testSprite2.Update(GameTime);
testSprite3.Update(GameTime);
testSprite1.draw(canvas);
testSprite2.draw(canvas);
testSprite3.draw(canvas);
}
public MySurfaceView(Context context){
super(context);
init();
}
private void init(){
getHolder().addCallback(this);
thread = new MySurfaceThread(getHolder(), this);
//create a graphic
testSprite1 = new AnimationSprite();
testSprite2 = new AnimationSprite();
testSprite3 = new AnimationSprite();
testSprite1.init(BitmapFactory.decodeResource(getResources(), R.drawable.testa), 100, 40, 8, 5);
testSprite2.init(BitmapFactory.decodeResource(getResources(), R.drawable.testa), 100, 40, 8, 5);
testSprite3.init(BitmapFactory.decodeResource(getResources(), R.drawable.testa), 100, 40, 8, 5);
}
@Override
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
}
@Override
public void surfaceCreated(SurfaceHolder holder){
thread.setRunning(true);
thread.start();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder){
boolean retry = true;
thread.setRunning(false);
while (retry){
try{
thread.join();
retry = false;
}
catch (InterruptedException e){}
}
}
}

public class AnimationSprite {

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 AnimationSprite() {
mSRectangle = new Rect(0,0,0,0);
mFrameTimer =0;
mCurrentFrame =0;
mXPos = 80;
mYPos = 200;
}

public void init(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);
}

public int getYPos()
{
return mYPos;
}
public int getXPos()
{
return mXPos;
}
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(new MySurfaceView(this));
}
}

By: Timothy Miller

Timothy Miller — Thu, 19 Aug 2010 04:51:38 +0000

First of all, thank you Stephen for the great sample code.

Second, so what I’m confused about is how you can make an object of your class as seen in Animation = new OurAnimatedSpriteClass();
Animation.Initalise(Bitmap.decodeResource(res, R.drawable.idle), 200, 150, 5, 5);

while you are drawing to a custom view so the constructor requires context. Is there some way to overload the constructor do you even NEED to go through the constructor? Is there something I’m missing here?

Also, can someone explain the “run” method to me?

By: Jose

Jose — Sat, 07 Aug 2010 21:18:39 +0000

Hi there! I have been testing this code in my game, but I have found an issue.

I am trying to draw a 4×1 tiles image (128×32 pixels), but the tiles are not being well showed separatelly. I use: animation.init(quads, 32, 32, 1, 4);

My problem is that when I ask what is the quads image height, Android sais its 21 and no 32. Where is my problem?

I hope everybody can understand my englilsh, Im not a native speaker.

Thanks for all we are learning from yours posts!
Greetings from Spain.

By: Nico

Nico — Thu, 22 Jul 2010 18:45:16 +0000

So for anyone else having trouble, copy paste that, should help to figure out what goes where and why and all that…aside from that, you need the animation class that you can easily create using the tutorial provided by Stephen Best of luck to programmers learning Android!

By: Nico

Nico — Thu, 22 Jul 2010 18:42:33 +0000

I’ve also been having trouble learning how to get sprites to work properly but with a lot of help from this tutorial and CodeMonkey’s post I managed to get it to work nicely. So just so the credit goes to the right people, Stephen and CodeMonkey helped hugely with this…

package practice.animation;

import android.app.Activity;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class AnimationMain extends Activity {
public AnimationSprite testSprite1;
public AnimationSprite testSprite2;
public AnimationSprite testSprite3;
public long GameTime;

public class MySurfaceThread extends Thread {
private SurfaceHolder myThreadSurfaceHolder;
private MySurfaceView myThreadSurfaceView;
private boolean myThreadRun = false;

public MySurfaceThread(SurfaceHolder surfaceHolder, MySurfaceView surfaceView) {
myThreadSurfaceHolder = surfaceHolder;
myThreadSurfaceView = surfaceView;
}
public void setRunning(boolean b) {
myThreadRun = b;
}
@Override
public void run() {
while (myThreadRun) {
Canvas c = null;
try {
GameTime = System.currentTimeMillis();
c = myThreadSurfaceHolder.lockCanvas(null);
synchronized (myThreadSurfaceHolder) {
myThreadSurfaceView.onDraw(c);
}
}
finally {
if (c != null) {
myThreadSurfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}
public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{
private MySurfaceThread thread;
@Override
protected void onDraw(Canvas canvas){
canvas.drawColor(Color.BLACK);
testSprite1.Update(GameTime);
testSprite2.Update(GameTime);
testSprite3.Update(GameTime);

testSprite1.draw(canvas);
testSprite2.draw(canvas);
testSprite3.draw(canvas);
}
public MySurfaceView(Context context){
super(context);
init();
}
private void init(){
getHolder().addCallback(this);
thread = new MySurfaceThread(getHolder(), this);
//create a graphic
testSprite1 = new AnimationSprite(80, 200);
testSprite2 = new AnimationSprite(130, 200);
testSprite3 = new AnimationSprite(180, 200);

testSprite1.init(BitmapFactory.decodeResource(getResources(), R.drawable.arrowsprite), 100, 40, 8, 5);
testSprite2.init(BitmapFactory.decodeResource(getResources(), R.drawable.arrowsprite), 100, 40, 8, 5);
testSprite3.init(BitmapFactory.decodeResource(getResources(), R.drawable.arrowsprite), 100, 40, 8, 5);
}
@Override
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
}
@Override
public void surfaceCreated(SurfaceHolder holder){
thread.setRunning(true);
thread.start();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder){
boolean retry = true;
thread.setRunning(false);
while (retry){
try{
thread.join();
retry = false;
}
catch (InterruptedException e){}
}
}
}
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(new MySurfaceView(this));
}
}

By: CodeMonkey

CodeMonkey — Wed, 16 Jun 2010 08:09:30 +0000

This is the closest I have been able to get to actually making this thing work:

package test.viewtest;

import android.app.Activity;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class main extends Activity {

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private float initX, initY, radius;
private boolean drawing = false;
public Sprite2D testSprite;
public long GameTime;

public class MySurfaceThread extends Thread {

private SurfaceHolder myThreadSurfaceHolder;
private MySurfaceView myThreadSurfaceView;
private boolean myThreadRun = false;

public MySurfaceThread(SurfaceHolder surfaceHolder, MySurfaceView surfaceView) {
myThreadSurfaceHolder = surfaceHolder;
myThreadSurfaceView = surfaceView;
}

public void setRunning(boolean b) {
myThreadRun = b;
}

@Override
public void run() {
// TODO Auto-generated method stub
//super.run();
while (myThreadRun) {
Canvas c = null;
try {
GameTime = System.currentTimeMillis();
c = myThreadSurfaceHolder.lockCanvas(null);
synchronized (myThreadSurfaceHolder) {
myThreadSurfaceView.onDraw(c);
}
} finally {
// do this in a finally so that if an exception is thrown
// during the above, we don’t leave the Surface in an
// inconsistent state
if (c != null) {
myThreadSurfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}
/*
*
* SURFACE VIEW
*
*
*/

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{

private MySurfaceThread thread;

@Override
protected void onDraw(Canvas canvas)
{
testSprite.update(GameTime);
testSprite.draw(canvas);

if(drawing)
{
//canvas.drawCircle(initX, initY, radius, paint);
}
}

public MySurfaceView(Context context)
{
super(context);
// TODO Auto-generated constructor stub
init();
}

public MySurfaceView(Context context, AttributeSet attrs)
{
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}

public MySurfaceView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
init();
}

private void init()
{
getHolder().addCallback(this);
thread = new MySurfaceThread(getHolder(), this);

setFocusable(true); // make sure we get key events

//create a graphic
testSprite = new Sprite2D();
testSprite.init(BitmapFactory.decodeResource(getResources(), R.drawable.arrow), 200, 150, 5, 5);

}

@Override
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2,
int arg3) {
// TODO Auto-generated method stub
}

@Override
public void surfaceCreated(SurfaceHolder holder)
{
// TODO Auto-generated method stub
thread.setRunning(true);
thread.start();
}

@Override
public void surfaceDestroyed(SurfaceHolder holder)
{
// TODO Auto-generated method stub
boolean retry = true;
thread.setRunning(false);

while (retry) {
try
{
thread.join();
retry = false;
}
catch (InterruptedException e)
{
}
}
}
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);

MySurfaceView mySurfaceView = new MySurfaceView(this);
setContentView(mySurfaceView);
}
}

By: CodeMonkey

CodeMonkey — Tue, 15 Jun 2010 03:22:26 +0000

I am going to try to write this all out for beginners:

Here is the class for the sprite. I have called it “Sprite2D”

package com.game.engine;
 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Rect;
 
public class Sprite2D {
 
    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 Sprite2D() {
        mSRectangle = new Rect(0,0,0,0);
        mFrameTimer =0;
        mCurrentFrame =0;
        mXPos = 80;
        mYPos = 200;
    }
 
    public void init(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 &gt; mFrameTimer + mFPS ) {
            mFrameTimer = GameTime;
            mCurrentFrame +=1;
 
            if(mCurrentFrame &gt;= 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);
    }
 
    public int getYPos()
    {
    	return mYPos;
    }
    public int getXPos()
    {
    	return mXPos;
    }
}

By: quiche

quiche — Tue, 01 Jun 2010 22:37:38 +0000

I am having a lot of trouble getting this to work. Could you by any chance email or post a sample source code that I could study?

By: Mark

Mark — Tue, 01 Jun 2010 08:17:22 +0000

Great site, keel up the good work. I came here looking for a way to port my own xna isometric tiling code to Android and found it. Thanks