磯野ー！２Dゲーム開発しようぜー！ Android編 その４

長々と続いてきたカツオと中島のゲーム開発も今回で終了だ。今回はTextとEntityModifier周りを解説する。前回までは以下。

磯野ー！２Dゲーム開発しようぜー！　HTML5編　その１
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その２
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その３
磯野ー！２Dゲーム開発しようぜー！　Android編　その１
磯野ー！２Dゲーム開発しようぜー！　Android編　その２
磯野ー！２Dゲーム開発しようぜー！　Android編　その３


Text

private Font _font;
@Override
    protected void onCreateResources() {
        _font = FontFactory.create(this.getFontManager(), this.getTextureManager(), 256, 256, Typeface.create(Typeface.DEFAULT, Typeface.BOLD), 24, Color.WHITE_ARGB_PACKED_INT);
        _font.load();
    }
    @Override
    protected Scene onCreateScene() {
        _scene = new Scene();
        Text text = new Text(100, 10, _font, "Click on the characters!", this.getVertexBufferObjectManager());
        text.setColor(new Color(0, 0, 0));  // 色ごとにFontを用意するのは難儀なので、WhiteでFontを読み込み、後から色を設定する
        _scene.attachChild(text);
    }

文字を表示するのは一見簡単そうなのだけど柔軟さに欠けるので中々に面倒くさい。第一にフォント読み込み時に色を指定するので文字色を後から任意に変更できない。また色毎にフォントを読み込むのは難儀だ。それなので白色フォントで読み込んだ後にEntityの色変更メソッドを通して任意の色へと設定している。第二にフォント読み込み時の領域確保に指定する値の最適値が判然としない。文字の大きさと文字数から判断するしかないのだけど直感的でないので良く分からない。多量の文字を表示するなら大きくなければならないし、かといって無駄に領域を確保するとメモリを無駄に圧迫するのでやっかいな部分だ。最後にこれはバグなのだけど、コンストラクタで指定した文字列よりも長い文字列をsetTextで後から設定すると例外が発生する。そういう状況が起こりえる場合の回避策はコンストラクタで長い文字列を渡しておくしかないだろう。

フォントを指定して読み込む方法は下記を参照してほしい。
src/org/andengine/examples/CustomFontExample.java


EntityModifier

final ButtonSprite ship = new ButtonSprite(50, 50, _shipRegion.getTextureRegion(0), this.getVertexBufferObjectManager());
        final AnimatedSprite shipAnimation = new AnimatedSprite(10, 10, _shipRegion, this.getVertexBufferObjectManager());
        shipAnimation.animate(50);
        shipAnimation.setPosition(50, 50);  // コンストラクタで指定しているけれど、このコードがないとRotationの挙動がおかしい
        ship.setOnClickListener( new ButtonSprite.OnClickListener(){
            @Override
            public void onClick(ButtonSprite pButtonSprite, float pTouchAreaLocalX, float pTouchAreaLocalY) {
                _scene.detachChild(pButtonSprite);
                shipAnimation.setRotation(0);
                SequenceEntityModifier shipModifier =
                    new SequenceEntityModifier(
                        new IEntityModifier.IEntityModifierListener() {
                            @Override
                            public void onModifierStarted(IModifier<ientity> pModifier, IEntity pItem) {
                            }
                            @Override
                            public void onModifierFinished(final IModifier<ientity> pEntityModifier, final IEntity pEntity) {
                                MainActivity.this.mEngine.runOnUpdateThread(new Runnable() {
                                    @Override
                                    public void run() {
                                        _scene.attachChild(ship);
                                        _scene.detachChild(shipAnimation);
                                        pEntity.unregisterEntityModifier((IEntityModifier)pEntityModifier);
                                    }
                                });
                            }
                        },
                        new RotationByModifier(0.5f, 90)
                        ,new MoveModifier(1.0f, 50, CAMERA_WIDTH+50, 50, 50, EaseExponentialOut.getInstance())
                        ,new RotationByModifier(0.1f, 180)
                        ,new MoveModifier(1.0f, CAMERA_WIDTH+50, 50, 50, 50, EaseExponentialOut.getInstance())
                        ,new RotationByModifier(0.5f, 90)
                    );
                shipAnimation.registerEntityModifier(shipModifier);
                _scene.attachChild(shipAnimation);
            }
        });
        _scene.registerTouchArea(ship);
        _scene.attachChild(ship);

EntityModifier周りだけを抜き取ると余計にわけが分からなくなりそうなのでそこらへんをごっそりと持ってきているけれど、注目して欲しいのは10行目から。SequenceEntityModifierを指定すると順番にEntityの値を変更していくことができる。12行目から27行目までは開始と終了のイベントハンドラーでそれ以降が値の変更を記述している。Tweenjsと同様の働きをする。同時に2つ以上の値を変更したい場合は下記のようにParallelEntityModifierを使用する。

// 省略
new RotationByModifier(0.5f, 90),
new ParallelEntityModifier(
 new ScaleModifier(3, 0.5f, 5),
 new RotationByModifier(3, 90)
),
new RotationByModifier(0.5f, 90),
// 省略

またTweenjsと同様にどのように値を変更させるかEase関数を使って指定ができる。Ease関数の種類は下記を参照してほしい。
AndEngine / src / org / andengine / util / modifier / ease /
実際に挙動を見るのが一番早いのでAndEngineExamplesをローカルに設定してEase関数周りのサンプルを動作させてみるのが一番良いだろう。その際にはExtensionsも必要なので忘れずに取得しよう。詳しくはAndEngineのReadMeを参照してほしい。

EntityModifierの開始、終了のイベントハンドラーでUI要素をいじくる場合は注意してほしい。左記２つの関数はワーカスレッドから呼び出されるのでUI要素をいじくるとアプリがクラッシュする。それなので17行目のようにmEngine.runOnUpdateThreadでUIスレッドを呼び出して処理しよう。

EntityModifierのざっくりとした説明は以上になるけれど、今回EntityModifierをいじくりまわしていていくつか不明な点があった。１つ目は、EnityModifierを使いまわせないかとEnityModifier.reset()をいじくりまわしてみたけれど上手くいかなかったこと。２つ目は、unregisterEntityModifierの使いどころ。Entityが不要なEntityModifierをいつまでも参照しているのが嫌だったので一応呼んでいるけれど、AndEngineのサンプルコードを参考にしてもunregisterEntityModifierを呼んでいるものがなかった。AndEngineのコードを追っかけていけば分かることなのだろうけれど現状はどうするのが一番良いのかは不明。


これでAndEngineの解説を終わりとする。AndEngineの基本的な使い方がどういったものか理解できたかと思う。今回は実装しなかったけれどもちろんゲームのメインループにあたる機能や、あたり判定の便利機能などなどゲーム開発に必要な機能は大体そろっている。そういった今回解説しなかった機能はAndEngineExamplesで詳説されているのでそちらを参照してほしい。

磯野ー！２Dゲーム開発しようぜー！ Android編 その３

今回は画像周りを解説する。前回までは以下。

磯野ー！２Dゲーム開発しようぜー！　HTML5編　その１
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その２
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その３
磯野ー！２Dゲーム開発しようぜー！　Android編　その１
磯野ー！２Dゲーム開発しようぜー！　Android編　その２


BitmapTextureAtlas
AndEngineで画像を扱う場合はまずBitmapTextureAtlasでサイズを指定し画像のための領域を作り、そこに実際の画像をどしどし読み込む形になる。コードにすると以下のような形。

    private BitmapTextureAtlas _charactersAtlas;
    private TiledTextureRegion _shipRegion;
    private TiledTextureRegion _squareRegion;

    @Override
    protected void onCreateResources() {
        BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");

        _charactersAtlas = new BitmapTextureAtlas(this.getTextureManager(), 1024, 256); // 指定のサイズで領域を作る
        _shipRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(_charactersAtlas, this, "BlueShip.png", 0, 0, 6, 1);
        _squareRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(_charactersAtlas, this, "WalkingSquare.png", 0, 100, 5, 1);
        _charactersAtlas.load();
    }

BitmapTextureAtlasのコンストラクタで指定する数値は2のべき乗である必要がある。つまり2,4,8,16,32,64,128,256...というわけだ。上記のコードが実行されると下図のような様子になる。



BlueShip.pngは600*100なので幅512では収まらないので幅1024になっているし、WalkingSquare.pngとあわせての必要な高さが230になっているので高さは256となっている。そのため画像のように無為な領域が多量に発生してしまっている。無駄なメモリ使用を減らすためにも画像はすき間無くつめられるようなサイズを意識して用意するとよいだろう。ちなみにBitmapTextureAtlasにあまりにも大きい領域を指定するとアプリがクラッシュすることもあるので注意しよう。4096などを指定すると危うそうだ。


TiledTextureRegion
BitmapTextureAtlasのほかにもここではTiledTextureRegionを使ってスプライトシートアニメーションを読み込むことを明示している。下記のコードで船のアニメーションが簡単に実現できる。

final AnimatedSprite shipAnimation = new AnimatedSprite(10, 10, _shipRegion, this.getVertexBufferObjectManager());
shipAnimation.animate(50); //アニメーション速度
_scene.attachChild(shipAnimation);

また下記のようにTiledTextureRegionから指定のフレームを使ってスプライトオブジェクトを作ることも可能。

final Sprite ship = new Sprite(50, 50, _shipRegion.getTextureRegion(0), this.getVertexBufferObjectManager());

TextureRegion
単純に画像をただ表示するだけならば下記のようにすればよい。

    private BitmapTextureAtlas _backgroundAtlas;
    private TextureRegion _backgroundRegion;
   @Override
    protected void onCreateResources() {
        BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");

        _backgroundAtlas = new BitmapTextureAtlas(this.getTextureManager(), 512, 512);
        _backgroundRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(_backgroundAtlas, this, "Background02.png", 0, 0);
        _backgroundAtlas.load();
    }

    @Override
    protected Scene onCreateScene() {
        _scene = new Scene();
        Sprite bg = new Sprite(0, 0, _backgroundRegion, this.getVertexBufferObjectManager());
        bg.setScaleCenter(0, 0);
        bg.setScale(CAMERA_WIDTH/400f, CAMERA_HEIGHT/300f);
        _scene.attachChild(bg);
    }

BitmapTextureAtlas周りが理解できればAndEngineの画像周りはしごくシンプルだ。次回はEntityModifier周りを解説してこのシリーズも終了となる。

磯野ー！２Dゲーム開発しようぜー！ Android編 その２

今回からはAndEngineを使ってのゲーム開発を解説する。前回までは以下。

磯野ー！２Dゲーム開発しようぜー！　HTML5編　その１
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その２
磯野ー！２Dゲーム開発しようぜー！　HTML5編　その３
磯野ー！２Dゲーム開発しようぜー！　Android編　その１


サンプルコード
今回使用するコードはhttps://github.com/yooontheearth/andengine-sampleから取得できる。


概要
AndEngineはOpenGLベースのゲームライブラリで現在はバージョンGLES2となっている。AndEngine周りのチュートリアルを探すと大体前バージョンであるGLES1が見つかると思うけれど、GLES2になって仕様が若干変わっているので注意してもらいたい。AndEngine GLES2のコードは以下。
https://github.com/nicolasgramlich/AndEngine


セットアップ
Eclipseのセットアップ方法はよくあるので今回はIntellij IDEAでのセットアップ方法を解説する。今回使用するIDEAのバージョンは12.04のCEだ。


アプリケーションの新規作成の図。Project SDKを4.2としているけれど、AndEngine GLES2は2.2以降で動作する（らしい）。ちなみにちぬあたりMEGAはAndroid 2.3の実機にインストールしたところ問題なく動作した。


AndEngineを追加する準備の図。File→Project Structure→Modulesを選択→上部の緑の十字をクリック→New Moduleを選択する。


AndEngineを追加するの図。Library Moduleを選択→Content rootにダウンロードしたAndEngineのフォルダを選択して（※Package nameは「org.andengine」と入力するように）Finishをクリックする。


AndEngineを確認の図。Module SDKは4.2のこと。AndEngineは3.0以降のConstantをいくつか参照しているので最新のSDKを参照しないとコンパイルエラーになる。


AndEngineを参照するの図。andengine sampleを選択→Dependenciesタブ→右の緑の十字をクリック→Module Dependencyを選択→AndEngineを選択する。AndEngineの参照ができたらExportにチェックしておこう。


では早速コードを見ていこう。

src/com.matsuosoftware.game.andengine_sample/MainActivity.java

public class MainActivity extends SimpleBaseGameActivity {
    public static final int CAMERA_WIDTH = 480;
    public static final int CAMERA_HEIGHT = 320;
    private Camera _camera;

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

    @Override
    protected void onCreateResources() {
        BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");

        // 画像などのResourceを読み込む
    }

    @Override
    protected Scene onCreateScene() {
        _scene = new Scene();
        _scene.setTouchAreaBindingOnActionDownEnabled(true);

        // this.mEngine.registerUpdateHandler()に登録するオブジェクトがいわゆるゲームのメインループになる
        // _sceneに画像をぺたぺた貼り付けていく

        return _scene;
    }
}

上記はもっともシンプルな構成のActivityだ。ちなみに上記を実行しても何も表示されない。AndEngineはSimpleBaseGameActivityから派生したActivityひとつだけで動作する。開発者はSceneオブジェクトにぺたぺたと画像を貼り付けつつ、this.mEngine.registerUpdateHandler(Obj)で登録したObjのonUpdateが定期的に呼ばれるのでそこで当たり判定などを行いつつ開発をすすめていく。ただ基本は上記の3つのメソッドで、エンジンを作り、リソースを読み込み、シーンを使って描画するという流れだ。


次回以降は上記のコードにドシドシ肉付けを行っていく。