サイトのトップへ戻る

AndEngineドキュメント 日本語訳

Part 6. メインメニューシーンとそのサブシーン:

前の記事では、リソースマネージャーと scene 管理システムを実装し、スプラッシュスクリーン sceneを作成しました。 それでは、メニューシーンとそのサブシーンの作成に取り掛かりましょう - (パート2の記事に記載されたクラス図を参照してください)



1. メニューシーンのリソースを読み込む:
  • まずは背景が必要です。以下の画像を使用しましょう:
    Picture
    これのファイル名をmenu_background.pngとし、assets/gfx/menu フォルダ内に配置します。
  • また、プレイとオプションの二つのボタンも必要です。以下を使用しましょう:
    Picture Picture
    上記のファイル名を play.pngoptions.pngにします - そしてさっきと同じようにこれらの画像をassets フォルダに配置します。それでは、 ResourcesManager クラスを開いてこれらのゲーム素材を読み込みましょう。
  • メニューテクスチャとテクスチャ領域用にフィールドを作成します:
    public ITextureRegion menu_background_region;
    public ITextureRegion play_region;
    public ITextureRegion options_region;
        
    private BuildableBitmapTextureAtlas menuTextureAtlas;
    
  • 前に作成した loadMenuGraphics() メソッド内でゲーム素材を読み込みます。:
    BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/menu/");
    menuTextureAtlas = new BuildableBitmapTextureAtlas(activity.getTextureManager(), 1024, 1024, TextureOptions.BILINEAR);
    menu_background_region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(menuTextureAtlas, activity, "menu_background.png");
    play_region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(menuTextureAtlas, activity, "play.png");
    options_region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(menuTextureAtlas, activity, "options.png");
           
    try 
    {
        this.menuTextureAtlas.build(new BlackPawnTextureAtlasBuilder<IBitmapTextureAtlasSource, BitmapTextureAtlas>(0, 1, 0));
        this.menuTextureAtlas.load();
    } 
    catch (final TextureAtlasBuilderException e)
    {
            Debug.e(e);
    }
    

今回は BuildableBitmapTextureAtlas を作成しているので、テクスチャ内で特定の画像の位置を設定する必要はありません。 ではこれで、メニュー用ゲーム素材の読み込みコードが完成しました。



2. メニューシーンを作成する:
MainMenuScene という名前のJavaクラスを新たに作成します。拡張に以前作成したBaseSceneを使用します。 前と同じように、eclipse によって未実装メソッドの追加を求められるでしょう。
  • getSceneType()メソッド内で、適切なscene typeを戻り値として返します:
    @Override
    public SceneType getSceneType()
    {
        return SceneType.SCENE_MENU;
    }
    
  • onBackPressed()メソッド内にアプリの終了を司るコードを記述します。
    @Override
    public void onBackKeyPressed()
    {
        System.exit(0);
    }
    
    この方法で、 activity.finish()では終了しきれない場合でも、activity を完全に終了させるようにします。
  • 新たにcreateBackground() メソッドを作成して、メニュシーン用の背景を作りましょう。
    private void createBackground()
    {
        attachChild(new Sprite(400, 240, resourcesManager.menu_background_region, vbom)
        {
            @Override
            protected void preDraw(GLState pGLState, Camera pCamera) 
            {
                super.preDraw(pGLState, pCamera);
                pGLState.enableDither();
            }
        });
    }
    
    上記で行ったこと: 背景テクスチャ領域を使用して、画面中央に背景用の新しいspriteを作成します。 また、グラデーション品質を向上させるためディザリングを有効にしています。
  • createScene() メソッド内でこのメソッドを実行します。
    @Override
    public void createScene()
    {
        createBackground();
    }
    
それでは独自のメニューボタンを作成しましょう。このために、AndEngine に内蔵されているMenuScene クラスを使用します。コードは以下の通りです:
private MenuScene menuChildScene;
private final int MENU_PLAY = 0;
private final int MENU_OPTIONS = 1;

private void createMenuChildScene()
{
    menuChildScene = new MenuScene(camera);
    menuChildScene.setPosition(400, 240);
    
    final IMenuItem playMenuItem = new ScaleMenuItemDecorator(new SpriteMenuItem(MENU_PLAY, resourcesManager.play_region, vbom), 1.2f, 1);
    final IMenuItem optionsMenuItem = new ScaleMenuItemDecorator(new SpriteMenuItem(MENU_OPTIONS, resourcesManager.options_region, vbom), 1.2f, 1);
    
    menuChildScene.addMenuItem(playMenuItem);
    menuChildScene.addMenuItem(optionsMenuItem);
    
    menuChildScene.buildAnimations();
    menuChildScene.setBackgroundEnabled(false);
    
    playMenuItem.setPosition(playMenuItem.getX(), playMenuItem.getY() + 10);
    optionsMenuItem.setPosition(optionsMenuItem.getX(), optionsMenuItem.getY() - 110);
    
    menuChildScene.setOnMenuItemClickListener(this);
    
    setChildScene(menuChildScene);
}

二つのボタン用に(プレイボタンとオプションボタン)、二つのsprite MenuItemを作成しています。 また、 ScaleMenuItemDecoratorも使用しています。これはmenu itemsをアニメーションにします(触れている間、ボタンが大きく表示されます)。 これは本当に簡単なエフェクトです。独自エフェクトを簡単に作成することもできますが、このチュートリアルの目的としてはこれで十分です。 また、これらのMenuItemをメニューシーンに追加しています。そして背景との見栄えを踏まえてこれらのMenuItemを配置しています。

それでは、createScene() メソッド内でこのメソッドを実行します。

@Override
public void createScene()
{
     createBackground();
     createMenuChildScene();
}
このままプロジェクトを実行すると、Eclipse で menu click listenerの設定に関するエラーが発生します。 menu click listenerは、メニューボタンが押された後に特定のアクションを実行するために使用されます。 エラーをなくすめに、まずIOnMenuItemClickListener クラスを実装します。 Eclipse に、未実装メソッドを追加するよう求められるでしょう。
public boolean onMenuItemClicked(MenuScene pMenuScene, IMenuItem pMenuItem, float pMenuItemLocalX, float pMenuItemLocalY)
{
        switch(pMenuItem.getID())
        {
        case MENU_PLAY:
            return true;
        case MENU_OPTIONS:
            return true;
        default:
            return false;
    }
}

今のところはこのままで良いでしょう。メニューボタンのアクションは後で作成します。



3.メニューシーンの表示を初期化し、制御する:
メニューシーンの作成は完了しました。今から、SceneManager内でそれを初期化し、そのリソースの読み込み・メニューシーンの初期化・メニューのリソースを読み込んだ後のメニューシーンへ切り替え、といった処理を司るコードを作成する必要があります。
  • SceneManagerを開いて、メニューシーンの作成を司るメソッドを作成します。
    public void createMenuScene()
    {
        ResourcesManager.getInstance().loadMenuResources();
        menuScene = new MainMenuScene();
        setScene(menuScene);
        disposeSplashScene();
    }
    
    上記ではメニューリソースを読み込み、メニューシーンを初期化し、メニューシーンに切り替え、最後に必要なくなったスプラッシュスクリーンsceneを破棄しています。
  • activityを開いて、onPopulateScene内でこのメソッドを実行します
    public void onPopulateScene(Scene pScene, OnPopulateSceneCallback pOnPopulateSceneCallback) throws IOException
    {
        mEngine.registerUpdateHandler(new TimerHandler(2f, new ITimerCallback() 
        {
            public void onTimePassed(final TimerHandler pTimerHandler) 
            {
                mEngine.unregisterUpdateHandler(pTimerHandler);
                SceneManager.getInstance().createMenuScene();
            }
        }));
        pOnPopulateSceneCallback.onPopulateSceneFinished();
    }
    
こうして、前に作成したスプラッシュスクリーンsceneがメニューリソースが読み込まれるまで表示され、そしてメニューシーンが初期化されて表示されます。 プロジェクトを実行した後、メニューが読み込まれている間プラッシュスクリーンが表示されるでしょう。そしてその後メニューシーンが表示されます。:
Picture

これで完了です。やっとメニューシーンが完成したと言えるでしょう。 後で、メニューボタン用のアクションに、ゲームシーンやオプションメニューのサブシーンを表示するような実行アクションを紐付ける必要があります。

前の記事 次の記事