AndEngine Tutorial 02 – Textures and Sprites

Posted by Vexillum on May 05, 2012

In the 2nd AndEngine tutorial we will learn how to load textures, add them to a Sprite and how to load the Sprite.

Preparation

Before we start this tutorial please download “face_box.png” from HERE and copy it into the “assets” folder of your android project.

http://truco-mineiro.googlecode.com/svn-history/r2/trunk/assets/gfx/face_box.png

We also need 2 new variables to be able to load the texture, just copy and paste them under the Camera and Scene variable.

private BitmapTextureAtlas mBitmapTextureAtlas;
private TextureRegion mPlayerTextureRegion;


Let’s get started

In the last lesson we learned that textures are loaded in the “onCreateResources()” method. So to load our face_box-Texture just copy and paste the code into your project, replacing the old “onCreateResources()” method.

@Override
protected void onCreateResources() {
	/* Load all the textures this game needs. */
	mBitmapTextureAtlas = new BitmapTextureAtlas(this.getTextureManager(), 32, 32);
	mPlayerTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitmapTextureAtlas, this, "face_box.png", 0, 0);
	mBitmapTextureAtlas.load();
}


Some Information about the code:

BitmapTextureAtlas is like a box where you can put in a TextureRegion. You are able to determine the size of the BitmapTextureAtlas, all TextureRegions bigger than the size of the BitmapTextureAtlas are not being loaded.

  • BitmapTextureAtlas(pTextureManager, pWidth, pHeight)
    • pTextureManager
      • loads the TextureManager
    • pWidth & pHeight
      • determines the dimensions of the texture you are able to load
      • Must be a power of 2 (e.g. 32, 64, 128, 256, 512, 1024).
  • BitmapTextureAtlasTextureRegionFactory.createFromAsset(pBitmapTextureAtlas, pContext, pAssetPath, pTextureX, pTextureY)
    • pBitmapTextureAtlas
      • the Texture we are loading your picture into
    • pContext
      • Activity Context of the current Activity
    • pAssetPath
      • the path to the asset you want to load
      • since we copied your file directly in the “asset”-Folder we can just enter the filename
    • pTextureX & pTextureY
      • determines at which point the Texture should start
      • Just make it 0, 0

AndEngine Tutorial 02 - Textures and Sprites - Textures

  • mBitmapTextureAtlas.load();
    • This just loads the BitmapTextureAtlas into cache

Now we loaded all the necessary textures we need to modify the onCreateScene() method.
So to create a Sprite and attach it to our Scene just copy and paste the code into your project, replacing the old “onCreateScene ()” method.

@Override
protected Scene onCreateScene() {
	this.mEngine.registerUpdateHandler(new FPSLogger()); // logs the frame rate

	// Create Scene and set background colour to (1, 1, 1) = white
	this.mMainScene = new Scene();
	this.mMainScene.setBackground(new Background(1, 1, 1));

	// Centre the player on the camera.
	final int iStartX = (CAMERA_WIDTH - mBitmapTextureAtlas.getWidth()) / 2;
	final int iStartY = (CAMERA_HEIGHT - mBitmapTextureAtlas.getHeight()) / 2;

	/* Create the sprite and add it to the scene. */
	final Sprite oPlayer = new Sprite(iStartX, iStartY, mPlayerTextureRegion, getVertexBufferObjectManager());
	this.mMainScene.attachChild(oPlayer);

	return this.mMainScene;
}


Some Information about the code:

  • Sprite( pX, pY, pTextureRegion, pVertexBufferObjectManager)
    • pX & pY
      • determines the position of the Sprite
        • I positioned the Sprite in the middle of the scene
    • pTextureRegion
      • This tells AndEngien which texture to load
    • pVertexBufferObjectManager
  • parent.attachChild(newchild);
    • parent
      • We want to attach our Sprite (newchild) to our Scene, so mMainScene is our parent
    • newchild
      • And newchild is our Sprite

Today we learned how to load Textures and Sprites. You can play with this code, maybe add more Sprites, just to get to know the code a little bit better.

Your code should look something like this:

package com.PerleDevelopment.AndEngine.tutorial;

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.Sprite;
import org.andengine.entity.util.FPSLogger;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlas;
import org.andengine.opengl.texture.atlas.bitmap.BitmapTextureAtlasTextureRegionFactory;
import org.andengine.opengl.texture.region.TextureRegion;
import org.andengine.ui.activity.SimpleBaseGameActivity;

public class AndEngineTutorialActivity extends SimpleBaseGameActivity {
	// ===========================================================
	// Constants
	// ===========================================================
	static final int CAMERA_WIDTH = 480;
	static final int CAMERA_HEIGHT = 800;

	// ===========================================================
	// Fields
	// ===========================================================

	private Camera mCamera;
	private Scene mMainScene;

	private BitmapTextureAtlas mBitmapTextureAtlas;
	private TextureRegion mPlayerTextureRegion;

	// ===========================================================
	// Constructors
	// ===========================================================

	// ===========================================================
	// Getter & Setter
	// ===========================================================

	// ===========================================================
	// Methods for/from SuperClass/Interfaces
	// ===========================================================

	@Override
	public EngineOptions onCreateEngineOptions() {
		this.mCamera = new Camera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT);

		return new EngineOptions(true, ScreenOrientation.PORTRAIT_FIXED, new RatioResolutionPolicy(CAMERA_WIDTH, CAMERA_HEIGHT), this.mCamera);
	}

	@Override
	protected void onCreateResources() {
		// Load all the textures this game needs.
		mBitmapTextureAtlas = new BitmapTextureAtlas(this.getTextureManager(), 32, 32);
		mPlayerTextureRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mBitmapTextureAtlas, this, "face_box.png", 0, 0);
		mBitmapTextureAtlas.load();
	}

	@Override
	protected Scene onCreateScene() {
		this.mEngine.registerUpdateHandler(new FPSLogger()); // logs the frame rate

		// Create Scene and set background colour to (1, 1, 1) = white
		this.mMainScene = new Scene();
		this.mMainScene.setBackground(new Background(1, 1, 1));

		// Centre the player on the camera.
		final int iStartX = (CAMERA_WIDTH - mBitmapTextureAtlas.getWidth()) / 2;
		final int iStartY = (CAMERA_HEIGHT - mBitmapTextureAtlas.getHeight()) / 2;

		// Create the sprite and add it to the scene.
		final Sprite oPlayer = new Sprite(iStartX, iStartY, mPlayerTextureRegion, getVertexBufferObjectManager());
		this.mMainScene.attachChild(oPlayer);

		return this.mMainScene;
	}

}