より大規模なゲームを作るために

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

# シーンの切り替え

Akashic Engine では、タイトル場面・プレイ場面・スコア場面のように、ゲームの場面ごとにそれぞれ対応するシーンを作成しそれらを切り替えて表示できます。シーンの切り替えには Game オブジェクトに用意されたメソッドを利用します。

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

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

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

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

function createSceneA() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    scene.append(createRect(scene, "red"));
    scene.pointDownCapture.add(function() {
      g.game.replaceScene(createSceneB());
    });
  });
  return scene;
}

function createSceneB() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    scene.append(createRect(scene, "blue"));
    scene.pointDownCapture.add(function() {
      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;

# ファイル分割

Akashic Engine のスクリプトを複数のファイルに分けて記述した場合、 require() を使って他のファイルの関数を読み込んで利用します。

MainScene.js に以下のコードが記述されているとします。

module.exports.create = function() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    var rect = new g.FilledRect({
      scene: scene,
      cssColor: "red",
      width: 32,
      height: 32
    });
    scene.append(rect);
  });
  return scene;
};

mainScene.js はシーンの作成処理を独立させたファイルです。コード中で module.exportscreate 関数を代入しています。このコードを akashic scan でアセットとして追加すると関数を他のファイルから利用できます。

例えば main.js から利用する場合は、次のようなコードになります。

var MainScene = require("./MainScene");

function main() {
  g.game.pushScene(MainScene.create());
}

module.exports = main;

# より高度な情報

ここまでの説明で Akashic Engine を利用してゲームを作るのに必要な情報を一通り説明しました。より詳細な情報については以下もご覧ください。