AndEngine TIPs‎ > ‎

複数の画像ファイルからTiledTextureRegionを作る


TiledSpriteやAnimatedSpriteを作るにはTiledTextureRegionが必要です。

このTiledTextureRegionは、BitmapTextureAtlasTextureRegionFactory.createTiledFromAssetsメソッドを使って作ります。 画像ファイルと、縦横の分割数を指定して、画像を分割した各領域が各タイルとなるようなTiledTextureRegionが作られます。

つまり、この方法では、タイル状画像を用意しないとAnimatedSpriteやTiledSpriteは作れません。

今回紹介するのは、各タイルが別々の画像ファイルになっている状態から、TiledTextureRegionを作成する方法です。


大まかな流れ

  1. タイルに使う複数の画像ファイルを用意する
    • (未検証)サイズは同じである必要がある
  2. 複数の画像を、同一のTextureAtlasに重ならないように読み込む
    • BitmapTextureAtlasTextureRegionFactory.createFromAssetsメソッドを使う
    • 画像ファイルの数だけ、TextureRegionオブジェクトが得られる
  3. TextureAtlasオブジェクトと、得られた複数のTextureRegionを引数にしてTiledTextureRegionを作成する
    • 複数のTextureRegionは配列の形でもよい

重要なことは、全て同じTextureAtlasに読み込まれている画像でなければならない、ということです。

手順

100x100のサイズの画像ファイル「face1.png」「face2.png」「face3.png」があるとします。 これを用いてAnimagedSpriteを作ってみます。


face1.png


face2.png

face3.png

画像の出来には触れないでください。

画像の用意

プロジェクトのassets/gfxフォルダに3つの画像をコピー

TextureAtlasの作成

3つの画像ファイルが収まるようにBitmapTextureAtlasを作ります。BuildableTextureAtlasでもかまいません。

テクスチャの生成

	//テクスチャの作成
	final BitmapTextureAtlas faceTexture = new BitmapTextureAtlas(
			getTextureManager(), 512, 512);

個々のTextureRegionを作成

通常のTextureRegionを作るようにして画像を読み込みます。読み込む座標は気をつけましょう。

複数のTextureRegionの用意に、今回の例では配列を使っていますが、個々のオブジェクトを定義してもかまいません。

TextureRegionの作成

		//TextureRegion配列の作成
		TextureRegion[] faceRegions = new TextureRegion[3];

		//配列に、TextureRegionをセット
		faceRegions[0] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face1.png", 0, 0);
		faceRegions[1] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face2.png", 101, 0);
		faceRegions[2] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face3.png", 0, 101);
		faceTexture.load();

複数のTextureRegionからTiledTextureRegionを作成

読込先のTextureAtlasを、複数のTextureRegionからTiledTextureRegionをコンストラクタを利用して作成します。

複数のTextureRegionの指定は、配列を使っても、可変長引数(コンマで区切って列挙する)を使っても良いです。

TiledTextureRegionの作成

		//BitmapTextureAtlasとTextureRegion配列からTiledTextureRegionの作成
		faceTiledRegion = new TiledTextureRegion(faceTexture, faceRegions);

		//TextureRegionは可変長引数でも指定可能
		faceTiledRegion2 = new TiledTextureRegion(faceTexture, faceRegions[0],faceRegions[1],faceRegions[2]);

AnimatedSprite等を作成

あとは、得られたTiledRegionを普通に使えば良いです。

Spriteの作成

		//配列で作ったほう
		AnimatedSprite face1 = new AnimatedSprite(100, 100, faceTiledRegion, getVertexBufferObjectManager());
		face1.animate(100);
		scene.attachChild(face1);


		//可変長引数で作ったほう(結果は同じ)
		AnimatedSprite face2 = new AnimatedSprite(300, 100, faceTiledRegion2, getVertexBufferObjectManager());
		face2.animate(100);
		scene.attachChild(face2);

サンプルコード

上の手順を実際に行ったサンプルは以下のようになります

サンプルコード

package com.example.createtiledtextureregion;

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

public class MainActivity extends SimpleBaseGameActivity {

	private TiledTextureRegion faceTiledRegion;
	private TiledTextureRegion faceTiledRegion2;


	@Override
	public EngineOptions onCreateEngineOptions() {
		Camera camera = new Camera(0, 0, 480, 800);
		EngineOptions eo = new EngineOptions(true,
				ScreenOrientation.PORTRAIT_FIXED, new RatioResolutionPolicy(
						480, 800), camera);
		return eo;
	}

	@Override
	protected void onCreateResources() {
		//テクスチャの作成
		final BitmapTextureAtlas faceTexture = new BitmapTextureAtlas(
				getTextureManager(), 512, 512);

		//TextureRegion配列の作成
		TextureRegion[] faceRegions = new TextureRegion[3];

		//配列に、TextureRegionをセット
		faceRegions[0] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face1.png", 0, 0);
		faceRegions[1] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face2.png", 101, 0);
		faceRegions[2] = BitmapTextureAtlasTextureRegionFactory
				.createFromAsset(faceTexture, this, "gfx/face3.png", 0, 101);
		faceTexture.load();

		//BitmapTextureAtlasとTextureRegion配列からTiledTextureRegionの作成
		faceTiledRegion = new TiledTextureRegion(faceTexture, faceRegions);

		//TextureRegionは可変長引数でも指定可能
		faceTiledRegion2 = new TiledTextureRegion(faceTexture, faceRegions[0],faceRegions[1],faceRegions[2]);

	}

	@Override
	protected Scene onCreateScene() {

		Scene scene = new Scene();
		scene.setBackground(new Background(Color.WHITE));

		//配列で作ったほう
		AnimatedSprite face1 = new AnimatedSprite(100, 100, faceTiledRegion, getVertexBufferObjectManager());
		face1.animate(100);
		scene.attachChild(face1);


		//可変長引数で作ったほう(結果は同じ)
		AnimatedSprite face2 = new AnimatedSprite(300, 100, faceTiledRegion2, getVertexBufferObjectManager());
		face2.animate(100);
		scene.attachChild(face2);

		return scene;
	}

}

実行結果

以下の画像のようになります。 時間経過で正しくアニメーションされています。




方法の紹介のために、配列、可変長引数の両方を使ってみましたが、得られる結果は同じです。

使いどころ

座標を指定して配置しないといけないので面倒に感じるかもしれません。 確かに手書きで配置するなら、画像編集ソフトでタイル画像をあらかじめ作ったほうが楽かも知れません。

今回の方法は主にTexturePackerExtensionを使ったときに効果を発揮すると思います。 TexturePackerExtensionでは、画像ファイル名から生成された定数を用いてTextureRegionを参照できるので、 この方法で簡単にTiledTextureRegionを作成することが出来ます。

おまけ

フォルダ内の全ての画像を一気に読み込んでTiledTextureRegionを作る方法もあります。

BitmapTextureAtlasTextureRegionFactory.createTiledFromAssetDirectoryメソッドです。

メソッドの定義は以下のような感じ

createTiledFromAssetDirectory

public static TiledTextureRegion createTiledFromAssetDirectory(final BuildableBitmapTextureAtlas pBuildableBitmapTextureAtlas, final AssetManager pAssetManager, final String pAssetSubdirectory) 

  • 読込先のBuildableTextureAtlas、
  • ActivityのAssetManager、
  • assetsフォルダ以下のディレクトリ(assets/gfx/facesフォルダ内の画像を使う場合は「"gfx/faces"」と指定する)

このとき、タイルの順序はファイル名の辞書順になります。 つまり2桁以上の連番を読み込むときは注意が必要です。

あまり無いと思いますが「face0.png」から「face100.png」という101枚の画像をこの方法で読み込むとタイルの順番は以下のようになります。

  • face0.png
  • face1.png
  • face10.png
  • face100.png
  • face11.png
  • face12.png
  • face13.png
  • face14.png
  • face15.png
  • face16.png
  • face17.png
  • face18.png
  • face19.png
  • face2.png
  • face20.png
  • ...

こういう場合は桁の頭を0で埋める必要があります。

  • face000.png
  • face001.png
  • face002.png
  • face003.png
  • face004.png
  • face005.png
  • face006.png
  • face007.png
  • face008.png
  • face009.png
  • face010.png
  • face011.png
  • face012.png
  • face013.png
  • face014.png
  • face015.png
  • ...
Comments