表示モード

スクリプトを分割する ​

require() と module.exports ​

Akashic Engine のゲームロジックは .js ファイル (スクリプトアセット) に記述します。 ゲームが大規模になってきた場合、処理を複数の .js ファイルに分けて書くことができます。

これは次の手順で行います (akashic init で生成した JavaScript テンプレートの場合):

  • script/ ディレクトリに任意の .js ファイルを作成する
  • akashic scan assets を実行し、追加した .js ファイルをアセットとして game.json に登録する
  • 他のスクリプトから require() で sub.js を読み込んで利用する

例として、「赤い矩形を描画するだけのシーンを作る処理」を持つ redRectScene.js を考えます。それは次のような内容になります:

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

コード中で module.exports のプロパティに代入していることに注目してください。 このように代入した値が、外部から利用可能になります。 その他の部分に関しては、これまでの Akashic Engine のスクリプトと違いはありません。

ここでは create に代入された関数が他のファイルから利用できます。 このコードを akashic scan でアセットとして追加します。 すると require() 関数でそのファイルを読み込むことができるようになります。 require() の引数は、読み込む .js ファイルの相対パスです。

たとえば同じディレクトリの main.js から利用する場合は、次のようなコードになります。

javascript
const redRectScene = require("./redRectScene");

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

module.exports = main;

TIP

なお TypeScript テンプレートの場合は、 script/ ではなく src/ ディレクトリに .ts ファイルを作成することになります。 npm run build を実行すると自動的に game.json への登録が行われるようになっているので、アセット登録を意識する必要はありません。 他の .ts ファイルから import で読み込んで利用できます。 詳細はテンプレートの README.md を参照してください。