プリロード

Web では、ユーザーをできるだけ早くアプリケーションに誘導することが重要です。PlayCanvas のアセットシステムは、アプリケーション開始前に必要なアセットを確実に準備するためのプリロード機能を提供しています。

プリロードフラグ

すべてのアセットには preload プロパティがあります。true に設定すると、アプリケーションの initialize フェーズが開始される前にアセットがダウンロードされ、リソースが作成されます。

アプリケーション開始時にすぐに必要なアセットにはプリロードを使用してください。これにより、アプリケーションが既に実行されている状態でアセットが「ポップイン」するのを防ぎます。

ヒント

PlayCanvas エディタでは、アセットのプロパティパネルでプリロードフラグを設定できます。デフォルトでは、新しいアセットはプリロードが有効になっています。

アセットはいつ読み込まれるか？

アセットは以下のルールに従って読み込まれます。

プリロードアセット（preload = true）は、アプリケーション開始前に読み込まれます
参照されたアセットは、有効なコンポーネントがそれらを参照したときに読み込まれます。シーンで有効になっているエンティティの場合、これはプリロード完了直後に発生します
依存アセットは、親アセットが読み込まれたときに読み込まれます。たとえば、モデルが読み込まれると、参照されているマテリアルが読み込まれ、さらにそれらが参照するテクスチャが読み込まれます

ストリーミング vs プリロード

アセットがプリロードされていない場合、必要なときにストリーミングされます。コンポーネントはこれを適切に処理し、アセットの準備ができ次第動作を開始します。ただし、テクスチャの読み込みが完了する前にモデルが表示されるなど、視覚的な「ポップアップ」が発生する場合があります。

タグを使用したアセットグループの読み込み

ポップアップを避けるために、表示する前にアセットのグループを読み込むことができます。アセットタグを使用してアセットを論理的なグループに整理します。

// レベル 1 用にタグ付けされたすべてのアセットを検索
const assets = this.app.assets.findByTag('level-1');
let loadedCount = 0;

// 各アセットを読み込む
for (const asset of assets) {
    asset.once('load', () => {
        loadedCount++;
        if (loadedCount === assets.length) {
            // すべての level-1 アセットが読み込まれた
            this.startLevel();
        }
    });
    this.app.assets.load(asset);
}

より複雑なタグクエリも使用できます。

// 'level-1' と 'enemy' の両方のタグが付いたアセット
const enemies = this.app.assets.findByTag('level-1', 'enemy');

// 'level-1' または 'level-2' のタグが付いたアセット
const assets = this.app.assets.findByTag(['level-1', 'level-2']);

ベストプラクティス

必須アセットをプリロードする - UI 要素、プレイヤーモデル、すぐに必要なものすべて
大きなアセットはストリーミングする - BGM、遠景、オプションコンテンツ
レベルごとにタグを使用する - レベルやエリアごとにアセットをグループ化して一緒に読み込む
読み込み進捗を表示する - ストリーミングコンテンツにはローディングインジケータを表示する