Animated Sprites with AndEngine

AndEngine is a very powerful 2D OpenGL game engine [http://www.andengine.org/] . today we will work on a small project to create moving sprites.  We will create an animated cat running towards... something :)

First we will need a sprite sheet for the cat. I have chosen the below sheet (found it on google , credit goes to who ever created it , Save it by clicking on it and then right click and Save).

Save the above image by clicking on it and then right click and save (as .png)

Now create a new android project and add a reference to the AndEngine project. If you do not know how to add a reference to this follow my tutorial on how to setup AndEngine before proceeding.

Now add the above image resource into your Assets folder as shown below.

Now open the main activity (MainActivity.java by default) as  below. The namespace will depend on your individual project, in my case its com.codephixlabs.movingsprites

Extend this activity with SimpleBaseGameActivity and  include the following namespaces as below

Java / Android

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.sprite.AnimatedSprite;
import org.andengine.opengl.texture.TextureOptions;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.andengine.opengl.texture.region.TiledTextureRegion;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.color.Color;


public class MainActivity extends SimpleBaseGameActivity 
{

}

Add the following methods and variables in your activity

Java / Android

private BitmapTextureAtlas texCat;
private TiledTextureRegion regCat;
private AnimatedSprite  sprCat;
private Scene m_Scene;
private Camera    m_Camera;

//This represents the sprite sheet(image) rows and columns
//We have 4 Rows and 2 Columns
private static int   SPR_COLUMN  = 2;
private static int   SPR_ROWS  = 4;


//Set the camera Width and Height
private static final int CAMERA_WIDTH = 480;
private static final int CAMERA_HEIGHT = 320;

//Override the below method from base activity class

@Override
public EngineOptions onCreateEngineOptions() 
{
m_Camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
EngineOptions en = new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED, new RatioResolutionPolicy(
CAMERA_WIDTH, CAMERA_HEIGHT), m_Camera);
return en;
}

//Override the below method from base activity class

@Override
protected void onCreateResources() 
{
texCat = new BitmapTextureAtlas(this.getTextureManager(), 1024, 1024, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
regCat = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(texCat, this.getAssets(),"gfx/runningcat.png", 0, 0, SPR_COLUMN, SPR_ROWS);
texCat.load();
}


//Override the below method from base activity class 

@Override
protected Scene onCreateScene() 
{
m_Scene = new Scene();
m_Scene.setBackground(new Background(Color.WHITE));
 
sprCat = new AnimatedSprite(0, 0, regCat, this.getVertexBufferObjectManager());
m_Scene.attachChild(sprCat);
 
sprCat.animate(100);
return m_Scene;
}

//Override the below method from base activity class 

@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;
}

Now you are done!  ... Run the project and you will get an animated cat running , Refer below screenshots of the emulator

 

 

 

The complete code is below. you can copy paste it and replace the namespace and the activity class name.

Java / Android

package com.codephixlabs.movingsprites;

import org.andengine.engine.camera.Camera;
import org.andengine.engine.options.EngineOptions;
import org.andengine.engine.options.ScreenOrientation;
import org.andengine.engine.options.resolutionpolicy.RatioResolutionPolicy;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.sprite.AnimatedSprite;
import org.andengine.opengl.texture.TextureOptions;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.andengine.opengl.texture.region.TiledTextureRegion;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.color.Color;
import android.view.Menu;

public class MainActivity extends SimpleBaseGameActivity 
{

private BitmapTextureAtlas texCat;
private TiledTextureRegion regCat;
private AnimatedSprite  sprCat;
private Scene m_Scene;
private Camera    m_Camera;
private static int   SPR_COLUMN  = 2;
private static int   SPR_ROWS  = 4;

private static final int CAMERA_WIDTH = 480;
private static final int CAMERA_HEIGHT = 320;

@Override
public EngineOptions onCreateEngineOptions() 
{
m_Camera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);
EngineOptions en = new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED, new RatioResolutionPolicy(
CAMERA_WIDTH, CAMERA_HEIGHT), m_Camera);
return en;
}

@Override
protected void onCreateResources() 
{
texCat = new BitmapTextureAtlas(this.getTextureManager(), 1024, 1024, TextureOptions.BILINEAR_PREMULTIPLYALPHA);
regCat = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(texCat, this.getAssets(),"gfx/runningcat.png", 0, 0, SPR_COLUMN, SPR_ROWS);
texCat.load();
}

@Override
protected Scene onCreateScene() 
{
m_Scene = new Scene();
m_Scene.setBackground(new Background(Color.WHITE));
 
sprCat = new AnimatedSprite(0, 0, regCat, this.getVertexBufferObjectManager());
m_Scene.attachChild(sprCat);
 
sprCat.animate(100);
return m_Scene;
}

@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;
}
}

Thanks for reading, If you face any issue please add it in the comment section.