シーンを切り替える

このページのサンプルコードをダウンロード

# シーン

シーンは、主に次の役割を担うクラスです。

• アセットの読み込みと管理
  • シーン内で利用するアセットを宣言し、必要ならローディング画面を出して読み込みを待つ
  • シーンの終了時に不要なアセットを解放する
• エンティティの管理
  • シーンに append() されているエンティティを表示する
  • シーンの終了時にエンティティを破棄する
• ゲーム処理の記述
  • アセット読み込み完了や、毎フレームのタイミングを通知する

Akashic のコンテンツには、最低でも一つのシーンが必要です。 ここまでの例でも、akashic init が生成するテンプレートでも、必ず new g.Scene() でシーンを生成して利用していました。

シーンが一つである必要はありません。 タイトル場面・プレイ場面・スコア場面のように、ゲームの場面ごとにそれぞれ対応するシーンを作成しそれらを切り替えて表示できます。

シーンの切り替えには Game オブジェクトに用意されたメソッドを利用します。

• g.game.replaceScene()
• g.game.pushScene()
• g.game.popScene()

replaceScene() は現在のシーンを破棄して次のシーンに遷移します。 pushScene() を利用すると現在のシーンを保存して次のシーンに遷移します。 pushScene() でシーン遷移した場合、popScene() で元のシーンに戻ることができます。

以下のプログラムでは replaceScene() を利用して、画面のタップまたはクリックで 2 つのシーンを切り替えています。

function main() {
  g.game.pushScene(createSceneA());
}

function createSceneA() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    scene.append(createRect(scene, "red"));
    scene.onPointDownCapture.add(() => {
      g.game.replaceScene(createSceneB());
    });
  });
  return scene;
}

function createSceneB() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    scene.append(createRect(scene, "blue"));
    scene.onPointDownCapture.add(() => {
      g.game.replaceScene(createSceneA());
    });
  });
  return scene;
}

function createRect(scene, color) {
  return new g.FilledRect({
    scene: scene,
    cssColor: color,
    width: 32,
    height: 32
  });
}

module.exports = main;