Andengine小ネタ/AndroidのCanvasで描画した図形からAndengineのSpriteを作る - Andengine メモ@ほっぽこ開発

Andengine小ネタ > AndroidのCanvasで描画した図形からAndengineのSpriteを作る

2015/01/13:TextureRegionのことを誤ってBitmapTextureRegionと書いていたので訂正。

概要

AndengineのSpriteは、画像ファイルから作るのが一般的です。
基本的に画面に現れる全てのエンティティに対して、予め画像ファイルを用意しておく必要があります。

画像ファイル無しで作ることができるエンティティは

直線(Line)
四角形(Rectangle)
メッシュ(Mesh)
文字(Text)
- システムフォントを使う場合

くらいです。しかも直線、四角形、メッシュに関しては単色で塗りつぶすしか描画のオプションが無い(枠線すら無かったりする)ので、
正直、画面の構成には使わず、当たり判定の領域やタッチ領域として使うのが一般的だと思います。
色をつけて画面に表示するのはほとんどデバッグの時だけな感じです。

ですが、様々なバリエーションの大きさや色などを持つ図形がほしい場合が時々あります。
例えば、幅と高さを自由に設定できる角が丸い四角形や、円とか楕円です。

これらを実現する単純な方法として

考えられるすべてのバリエーションを画像で用意しておく
基本となる画像を用意し、setSizeやsetScale命令で変形する

の2通りが考えられます。
ですが前者は大変ですし、後者は変形によって狙った形にならない場合があります。あと画質も落ちます。

そこで

プログラムで図形を描いて、それをAndengine上で利用する

という話になります。

方法

createFromSource

以下の方法はSpriteでの話です。AnimatedSpriteやTiledSpriteでは微妙に変わってきます。

Spriteを作るためにはTextureRegionが必要です。
TextureRegionを画像ファイルから作るにはBitmapTextureAtlasTextureRegionFatory.createFromAsset()命令でassetsフォルダ内のファイル名を指定します。

このcreateFrom〇〇の「〇〇」の部分を変えることでassetsフォルダ内の画像ファイル以外からTextureRegionを作ることができます。

createFromAsset
- assetsフォルダの画像ファイル名で指定
createFromResource
- res/drawableフォルダに画像ファイルを入れることで生成されるidでファイルを指定
createFromSource
- TextureAtlasSourceオブジェクトを指定

TextureAtlasSouceオブジェクトはAndroidのPictureオブジェクトを使って作ることができます。
以下では、Pictureオブジェクトに色んな図形を描画して、Spriteに利用できるTextureRegionを作ります。

基本の流れ

以下の流れで、描画したPicureオブジェクトからSpriteを作ります。

Pictureオブジェクトをnewで作る
Picture.beginRecordingでCanvasオブジェクトを得る
Canvasオブジェクトに好きな図形を描画
Picture.endRecordingで描画を終了(忘れがち)
作ったPictureオブジェクトからPictureBitmapTextureAtlasSourceを作る
作ったPictureBitmapTextureAtlasSourceからTextureRegionを作る
作ったTextureRegionからSpriteを作る。

以下で実例を挙げて説明します。

円を描く

Canvas.drawCircle命令で円を描くことができます。
コードは以下のような感じです。

// フィールド
	BaseGameActivity activity;
	VertexBufferObjectManager vbom;
	Scene scene;
 
	// ここから
	// 描画の用意
	Picture picture = new Picture();
	Paint paint = new Paint();
 
	// 描画の開始(幅と高さ)
	Canvas canvas = picture.beginRecording(128, 128);
 
	// //アンチエイリアスをオンにセット
	paint.setAntiAlias(true);
 
	// //青色をセット(AndengineのColorで無いことに注意)
	paint.setColor(android.graphics.Color.BLUE);
 
	// //スタイルをセット。塗りつぶしだけ描画、枠線は無し
	paint.setStyle(Style.FILL);
 
	// // 円の描画(中心座標と半径)
	canvas.drawCircle(64, 64, 64, paint);
 
	// 描画の終了
	picture.endRecording();
 
	// PictureをAndengineで使える形に
	PictureBitmapTextureAtlasSource circleSource = new PictureBitmapTextureAtlasSource(
		picture) {
 
		@Override
		public PictureBitmapTextureAtlasSource deepCopy() {
		// TODO Auto-generated method stub
		throw new DeepCopyNotSupportedException();
		}
	};
 
	// TextureRegionの生成
	BitmapTextureAtlas circleAtlas = new BitmapTextureAtlas(
		activity.getTextureManager(), 128, 128);
	ITextureRegion circleTextureRegion = BitmapTextureAtlasTextureRegionFactory
		.createFromSource(circleAtlas, circleSource, 0, 0);
	circleAtlas.load();
 
	// Spriteの作成
	Sprite circle = new Sprite(100, 100, circleTextureRegion, vbom);
 
	// シーンに追加
	scene.attachChild(circle);

実行すると以下のようになります。

上の一連の流れをメソッドにまとめてやることで、いろんな大きさ、色の円を簡単に用意することができます。

角が丸い四角を描く

Canvas.drawCircle命令をCanvas.drawRoundRect命令に変えるだけです。角の丸さの半径を指定することができます。

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

TiledTextureRegionを作りたい場合

AnimatedSpriteやTiledSpriteにはTextureRegionではなくTiledTextureRegionが必要です。

この方法でTiledTextureRegionを作る場合は、
BitmapTextureAtlasTextureRegionFactory.createFromSource命令を
BitmapTextureAtlasTextureRegionFactory.createTiledFromSource命令に変えてタイルの数を指定します。
もちろん、タイル画像を生成するので、Canvasへの描画はタイルのレイアウトを考えて行います。