メインコンテンツまでスキップ

スクリプトのロード順序

ESMスクリプト​

ESMスクリプトには明示的なロード順序がなく、特定の順序でロードされることに依存すべきではありません。代わりに、モジュール間の依存関係を宣言するためにモジュールインポート文を使用する必要があります。

クラシック スクリプト​

一般的に、すべてのスクリプトはアプリケーションの起動時にロードされます。ロード順序は、メインエディターメニューまたはシーン設定からアクセスできるプロジェクトの設定によって決定されます。

Loading Order

ロード順序パネルには、preloadとマークされたすべてのクラシック スクリプトと、それらがロードおよび実行される順序が表示されます。

Loading Order List

個々のスクリプトをドラッグアンドドロップで移動して、順序を編集できます。

スクリプトが最初にロードされると、即座に実行されます。つまり、スクリプトはロードされた順序で最初に実行されます。ただし、スクリプトのロード順序は、スクリプトコンポーネント内のスクリプトメソッドの実行順序には影響しません。たとえば、同じEntity上のスクリプトのinitializeメソッドは、ロード順序ではなく、Entityにリストされている順序で呼び出されます。

プリロード​

デフォルトでは、PlayCanvasの他のアセットと同様に、スクリプトアセットはpreloadとマークされます。これは、アプリケーションが起動する前にロードされることを意味します。スクリプトのプリロードを無効にした場合、通常の状況ではロードされません。これにより、スクリプトをプロジェクトに含めつつも、preloadのチェックを外すことでロードを防ぐことができます。非プリロードスクリプトを動的にロードするには、通常のアセットAPIを使用できます（AssetRegistry#loadを参照）。

スクリプトレジストリへの動的な変更を購読することが可能です：

this.app.scripts.on('add', (name, scriptType) => {
    console.log('script', name, 'has been loaded');
});

公開​

アプリケーションを公開するか、static形式でダウンロードすると、ビルドはクラシック スクリプトとESMスクリプトを異なる方法で処理します。どこまで処理するかは Concatenate Scripts と Minify Scripts のビルドオプションで制御します（PlayCanvasホスティングを参照）。プロジェクトの種類ごとに生成されるファイルについては、プロジェクトのダウンロードを参照してください。

npmのダウンロード形式は異なり、スクリプトをソースファイルのまま含むViteプロジェクトを生成します。そのため、このセクションの以降の内容とこれらのビルドオプションは適用されません。

クラシック スクリプト​

デフォルトでは、すべてのプリロードされたクラシック スクリプトが1つのスクリプトファイルに連結されます。これにより、すべてのスクリプトをロードするために必要なリクエスト数を減らすことで、ロード時間を最適化します。

ESMスクリプト​

ESMスクリプトを含むプロジェクトは、js/index.mjsをエントリーポイントとするESモジュールアプリケーションとしてビルドされます。Concatenate Scripts が有効な場合（デフォルト）、ビルドはESMスクリプトをエンジンと一緒にバンドルします。

  • バンドル出力: エンジンとアプリケーションの起動コードはjs/index.mjsにバンドルされます。プリロードされたESMスクリプトは1つの共有モジュールにまとめられ、起動時にjs/index.mjsから読み込まれます。
  • ツリーシェイキング: プロジェクトで使われないエンジンのコードはバンドルから除外されます。プロジェクト内のすべてのモジュールアセットはパスで読み込める状態に保たれるため、自作のモジュールはそのまま残ります。
  • コード分割: 動的なimport()でのみ読み込まれ、Preloadがオフになっているモジュールは別ファイルに分けられ、そのimport()が最初に実行されたときにダウンロードされます。プリロードされたモジュールは、静的にインポートしても動的にインポートしても、常に共有モジュールに含まれます。
  • ミニファイ: Minify Scripts を有効にすると、バンドルされたコードもミニファイされ、ダウンロードサイズが小さくなります。

コード分割を使うと、メニュー、オプションのツール、カットシーンなど、起動時に不要なコードの読み込みを後回しにできます。次の例ではcutscene.mjsのPreloadがオフになっているため、このファイルはアプリケーションの読み込み時ではなく、play()が最初に実行されたときにダウンロードされます。

import { Script } from 'playcanvas';

export class Intro extends Script {
    static scriptName = 'intro';

    async play() {
        const { Cutscene } = await import('./cutscene.mjs');
        new Cutscene(this.app).play();
    }
}

Concatenate Scriptsを無効にすると、各ESMスクリプトはそれぞれ独立したモジュールとしてビルドに書き出され、エンジンは別のモジュールとして読み込まれ、ミニファイは行われません。

ESMスクリプトとクラシック スクリプトの混在​

同じプロジェクトでESMスクリプトとクラシック スクリプトを併用できますが、ビルドはそれぞれを別々に扱います。

  • ESMスクリプトは上記のとおりバンドルされます。
  • クラシック スクリプトはESMバンドルには含まれません。Concatenate Scriptsが有効な場合は、クラシック スクリプトだけのプロジェクトと同様に、専用の1つのファイルに連結されます。
  • クラシック スクリプトはグローバルなpc名前空間を通じてエンジンにアクセスするため、ビルドにはツリーシェイキングされていないエンジン全体が含まれます。
警告

クラシック スクリプトでimport()を使ってESMモジュールを読み込まないでください。ビルドはESMモジュールを新しいパスに移動し、ESMスクリプト内のインポートだけを更新するため、エディターから起動したときに動作するimport()も、公開されたアプリケーションでは失敗します。クラシック スクリプトにimport()が含まれていると、コードエディターに警告が表示されます。