AndEngine TIPs‎ > ‎

ClipEntityで四角を切り出して表示

ClipEntityとは

AndEngineで画面を作っていくとき、画像などを色々配置した後に、特定の領域だけを切り出して表示したい場合があります。

それをAndEngineで実現するにはClipEntityという機能を使います。

AndEngineの新しいバージョンである「GLES Anchor-Center」にはこの機能があるのですが、通常の「GLES2」にはありません。 この2つのバージョンは、仕様が大きく異なるので、ClipEntityのためだけにバージョンを変えるのも気が引けてしまいます。

[参考]Andengine メモ@ほっぽこ開発 - Andengine小ネタ/Andengine GLES2 Anchor Centerについて:

と、思っていると、有志の方がGLES2用に書き換えてくれたソースコードを発見しました。 軽く使い方をテストしたので、ここで紹介したいと思います。

 [参考]AndEngine - Forums • ClipEntity for GLES2 (not AC) : Features:

実行結果

機能の紹介も兼ねて、先に実行結果をお見せします。このような感じになります。


上がClipEntityを使っていない状態。 下が、ClipEntityを使っている状態です。

下の方は四角い領域で切り出されているのがわかります。さらに、緑の四角は左右に動いているので、 動いてる様子を見ると切り出されているのがわかりやすいと思います。

以下で、使い方を紹介します。

導入方法

https://code.google.com/p/randomtitbits/source/browse/

でClipEntityのソースコードが公開されています。 DownLoadのzipをクリックしてダウンロードします。


ダウンロードしたzipファイルを展開すると中に、ClipEntity.javaというファイルがあります。

これを、AndEngineを使っている自分のプロジェクトにコピーします。


そのあと、ClipEntity.javaのパッケージ名を、自分のプロジェクトのパッケージ名に変更します。

これで準備は完了です。

使い方

ClipEntityは通常のEntityと同じように他のEntityをattachChild()することができます。

通常のEntityと異なるのは、ClipEnttyは幅と高さをもっているということです。

ClipEntityの子供であるSpriteやTextなんかのEntityは、ClipEntityの四角領域内しか画面に表示されません。

つまり

  • 幅と高さを持ったClipEntityを作る
  • 切り出したい領域に含まれるEntityを、作ったClipEntityにattachChildする

だけで使えます。

上の実行結果のソースコードは以下のような感じです。

ClipEntityを使ったサンプル

package com.example.clipentitytest;

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.Entity;
import org.andengine.entity.modifier.LoopEntityModifier;
import org.andengine.entity.modifier.PathModifier;
import org.andengine.entity.modifier.PathModifier.Path;
import org.andengine.entity.primitive.Rectangle;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.scene.background.Background;
import org.andengine.entity.text.Text;
import org.andengine.opengl.font.Font;
import org.andengine.opengl.font.FontFactory;
import org.andengine.ui.activity.SimpleBaseGameActivity;
import org.andengine.util.color.Color;

public class MainActivity extends SimpleBaseGameActivity {

	private Font font;

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

	}

	@Override
	protected void onCreateResources() {
		font = FontFactory.create(getFontManager(), getTextureManager(), 256,
				256, 32, true, android.graphics.Color.WHITE);
		font.load();
	}

	@Override
	protected Scene onCreateScene() {
		Scene scene = new Scene();
		scene.setBackground(new Background(Color.CYAN));

		// 普通のエンティティ
		Entity entity = new Entity(100, 100);
		scene.attachChild(entity);

		// 通常の四角
		Rectangle rect1 = new Rectangle(10, 50, 200, 200,
				getVertexBufferObjectManager());
		rect1.setColor(Color.RED);
		entity.attachChild(rect1);

		// 文字も追加
		Text text = new Text(-20, 100, font, "Hello AndEngine!",
				getVertexBufferObjectManager());
		rect1.attachChild(text);

		// 回転させた四角
		Rectangle rect2 = new Rectangle(-30, 0, 100, 100,
				getVertexBufferObjectManager());
		rect2.setColor(Color.BLUE);
		rect2.setRotation(45);
		entity.attachChild(rect2);

		// Modifierで動かす四角
		Rectangle rect3 = new Rectangle(-40, 60, 100, 100,
				getVertexBufferObjectManager());
		rect3.setColor(Color.GREEN);
		entity.attachChild(rect3);
		rect3.registerEntityModifier(new LoopEntityModifier(new PathModifier(2,
				new Path(new float[] { -40, 200, -40 }, new float[] { 60, 60,
						60 }))));

		// クリップエンティティ
		// 引数はx座標、y座標、幅、高さ
		ClipEntity clipEntity = new ClipEntity(100, 400, 200, 200);
		scene.attachChild(clipEntity);

		// 通常の四角
		Rectangle clipRect1 = new Rectangle(10, 50, 200, 200,
				getVertexBufferObjectManager());
		clipRect1.setColor(Color.RED);
		clipEntity.attachChild(clipRect1);

		// 文字も追加
		Text clipText = new Text(-20, 100, font, "Hello AndEngine!",
				getVertexBufferObjectManager());
		clipRect1.attachChild(clipText);

		// 回転させた四角
		Rectangle clipRect2 = new Rectangle(-30, 0, 100, 100,
				getVertexBufferObjectManager());
		clipRect2.setColor(Color.BLUE);
		clipRect2.setRotation(45);
		clipEntity.attachChild(clipRect2);

		// Modifierで動かす四角
		Rectangle clipRect3 = new Rectangle(-40, 60, 100, 100,
				getVertexBufferObjectManager());
		clipRect3.setColor(Color.GREEN);
		clipEntity.attachChild(clipRect3);
		clipRect3.registerEntityModifier(new LoopEntityModifier(
				new PathModifier(2, new Path(new float[] { -40, 200, -40 },
						new float[] { 60, 60, 60 }))));

		return scene;
	}

}

実行結果(再掲)

注意点(未検証ともいう)

ClipEntityで隠されていてもタッチ領域はおそらく残ったままです。切り出されて隠れた部分をタッチしたときの処理は工夫が要るかも。

また、ClipEntityの入れ子に関しても未検証。

Comments