サイトのトップへ戻る

AndEngineドキュメント 日本語訳

Part 15. ステージクリアウィンドウ。

独自のゲームを作成するためのアイディアを伝え、基本的なゲームプレイを作成しました。 それでは、ステージクリア後に評価/スコアを表示する、シンプルなステージクリアウィンドウについて説明します。 多くのゲームで使用されているやり方を使い、プレイヤーを一つ星から三つ星の間で評価します。
  • ステージクリアウィンドウとして以下の画像を使用します。 (yeap, I know my art skills are beautiful!)
Picture
  • 以下のタイルspriteを使用して、評価としての星の数(一つ星から三ツ星)を表示します。以下の画像は、2タイルのタイルspriteです。
    Picture

ステージクリアウィンドウにはタイルspriteを三つ貼り付け、評価として受け取る星の数(1から3)に基づいてタイルインデックスを変更します。



1. 必要なリソースを読み込む:
  • ResourcesManager クラスを開いて、テクスチャ領域用のフィールドを二つ新規に作成します (一つはTiledTextureRegionで、星を表示するために使用されます。)
    // Level Complete Window
    public ITextureRegion complete_window_region;
    public ITiledTextureRegion complete_stars_region;
    
  • loadGameGraphics()内で以下のRegionを読み込みます:
    complete_window_region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(gameTextureAtlas, activity, "levelCompleteWindow.png");
    complete_stars_region = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(gameTextureAtlas, activity, "star.png", 2, 1);
    

assets/gfx/gameから、 levelCompleteWindow.pngファイルとstar.pngファイルを読み込んでいます。



2. ステージクリアウィンドウを作成する:
この記事を書くために、私はカスタムステージクリアウィンドウの表示と作成を司るシンプルなクラスを急いで作成しました。 コードを確認してください。コードの下に必要な情報を記載しています。
package com.matimdev.extras;

import org.andengine.engine.camera.Camera;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.sprite.Sprite;
import org.andengine.entity.sprite.TiledSprite;
import org.andengine.opengl.vbo.VertexBufferObjectManager;

import com.matimdev.manager.ResourcesManager;

public class LevelCompleteWindow extends Sprite
{
    private TiledSprite star1;
    private TiledSprite star2;
    private TiledSprite star3;
    
    public enum StarsCount
    {
        ONE,
        TWO,
        THREE
    }
    
    public LevelCompleteWindow(VertexBufferObjectManager pSpriteVertexBufferObject)
    {
        super(0, 0, 650, 400, ResourcesManager.getInstance().complete_window_region, pSpriteVertexBufferObject);
        attachStars(pSpriteVertexBufferObject);
    }
    
    private void attachStars(VertexBufferObjectManager pSpriteVertexBufferObject)
    {
        star1 = new TiledSprite(150, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        star2 = new TiledSprite(325, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        star3 = new TiledSprite(500, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        
        attachChild(star1);
        attachChild(star2);
        attachChild(star3);
    }
    
    /**
     * Change star`s tile index, depends on stars count.
     * @param starsCount
     */
    public void display(StarsCount starsCount, Scene scene, Camera camera)
    {
        // Change stars tile index, based on stars count (1-3)
        switch (starsCount)
        {
            case ONE:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(1);
                star3.setCurrentTileIndex(1);
                break;
            case TWO:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(0);
                star3.setCurrentTileIndex(1);
                break;
            case THREE:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(0);
                star3.setCurrentTileIndex(0);
                break;
        }
        
        
        // Hide HUD
        camera.getHUD().setVisible(false);
        
        // Disable camera chase entity
        camera.setChaseEntity(null);
        
        // Attach our level complete panel in the middle of camera
        setPosition(camera.getCenterX(), camera.getCenterY());
        scene.attachChild(this);
    }
}
  • 拡張としてSpriteを使用しています。ステージクリアウィンドウのために以前読み込んだテクスチャ領域を使って、コンストラクタを変更(単純化)しています。
  • 三つのTiledSprite(星)の作成およびステージクリアウィンドウへの貼り付けを司るメソッドを作成します。
  • ウィンドウの表示を司るメソッドを作成します。 また、表示する星の数(一個か二個か三個)を指定するenum も作成します。 display()メソッド呼び出し時にパラメータとして設定された星の数に応じて、TiledSprite星のインデックスを変更します。 (そのためコンストラクタに TWO を渡した場合、二つの星が黄色になり一つは灰色になります)。 本当に簡単だと思います。また引数パラメータとして Camera と Scene を受け取っています。 cameraオブジェクトは、ウィンドウを表示している間、HUD を非表示にしてcameraの追跡エンティティを無効にするために必要です。


3. ステージクリアウィンドウを初期化する:
では、ウィンドウ用のコードの作成は完了したので、それを初期化しましょう。 GameScene クラスを開いて、ウィンドウ用の新しいフィールドを作成します。
private LevelCompleteWindow levelCompleteWindow;
  • createScene() メソッド内でそれを初期化します:
    levelCompleteWindow = new LevelCompleteWindow(vbom);
    


4. ステージクリアウィンドウを表示する:
今、ウィンドウの表示を制御するものを作成する必要があります。今回の例では、spriteを作成して、プレイヤーでそれに触れるとステージクリアウィンドウが表示されます。
  • 足場やコインを読み込んだように、それをxmlから読み込みます。まずは新しいタグを作成します:
    private static final Object TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_LEVEL_COMPLETE = "levelComplete";
    
  • ステージの解析を司るコード内に新たに確認を追加します(足場やコインなどの時と同じように)
    else if (type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_LEVEL_COMPLETE))
    {
        levelObject = new Sprite(x, y, resourcesManager.complete_stars_region, vbom)
        {
            @Override
            protected void onManagedUpdate(float pSecondsElapsed) 
            {
                super.onManagedUpdate(pSecondsElapsed);
    
                if (player.collidesWith(this))
                {
                    levelCompleteWindow.display(StarsCount.TWO, GameScene.this, camera);
                    this.setVisible(false);
                    this.setIgnoreUpdate(true);
                }
            }
        };
        levelObject.registerEntityModifier(new LoopEntityModifier(new ScaleModifier(1, 1, 1.3f)));
    }
    
    どういった処理を行っているかというと、updateの度にプレイヤーと衝突しているかどうかを確認する sprite を、新しく作成しています。 もし衝突していた場合は、ステージクリア画面を表示します。 このケースでは二つ星評価になります (パラメータを変更することで評価を変更可能です)。

    どのように動作するかデモンストレーションをするには、 1.lvl ファイル (ステージデータファイル)を以下のように編集して置き換えます:
    <?xml version="1.0" encoding="utf-8"?>
    <level width="1400" height="780">    
        <entity x="100" y="100" type="platform1"/>
        <entity x="200" y="200" type="platform1"/>
        <entity x="400" y="200" type="platform2"/>
        <entity x="530" y="200" type="platform2"/>
        <entity x="660" y="200" type="platform2"/>
        <entity x="880" y="240" type="platform3"/>
        <entity x="1100" y="330" type="platform3"/>
        <entity x="400" y="270" type="coin"/>
        <entity x="500" y="400" type="coin"/>
        <entity x="600" y="400" type="coin"/>
        <entity x="1280" y="550" type="levelComplete"/>
        <entity x="60" y="140" type="player"/>
    </level>
    
    もと遊べるように、このステージを少し編集しました。ステージクリアオブジェクトを"ステージ"の最後に追加しました。 どのように動作するかテストしてみてください。ステージクリアウィンドウが表示されるでしょう (例として、黄色星二つと灰色星一つの状態で) 
    Picture
ゲームのソースコード全てのダウンロードする:
jumper_game_tutorial.rar
ファイルをダウンロードする

最初の記事で述べたように、AndEngine GLES2 Anchor-Center ブランチが必要ということを忘れないでください( box2d 物理拡張も同じ)。 多くの人がGLES2 ブランチを使ってエラーが発生したと不満を言い続けているので、私はこのことを啓蒙しなければならないのです。

注意: サンプルコードは教育目的のみに使用することができ、 同意なしにそれ以外の目的で使用することはできません。

前の記事