Tutorials

アセットレジストリの使用

*クリックしてフォーカス。SpaceキーでAとBの2つのモデルを切り替えることができます。'L'でCモデルを読み込みます。'C'でCモデルを表示します。

簡単なゲームや製品の場合、Editor内のすべてのアセットを設定します。アプリケーションが起動する前にプリロードされ、アプリは正常に動作します。

より高度な製品の場合、コード内でアセットにアクセスし、参照を変更、プロパティを修正、データのストリーミングを行いアプリケーションをより迅速に読み込むこともできます。必要に応じてアセットを読み込みます。これを行うにはAssetRegistryを使用します。

このチュートリアルでは、キーを押して、モデルコンポーネントのモデルを入れ替えることのできる小さなシーンを構築します。また、プリロードされていない3つ目のモデルを動的に読み込みます。完了したプロジェクトはここでを見ることができます。

設定

プロジェクトは次のように設定されます

3つのモデルアセットがアップロードされています:AはAという文字のモデル、BはBという文字のモデル、*CはCという文字のモデルです。

AssetRegistry

pc.AssetRegistrythis.app.assets.としてすべてのスクリプトで使用できます。レジストリには、それらが読み込まれているかどうかに関わらず、プロジェクトに追加されたすべてのランタイムアセットの詳細が入力されます。Asset Registryを使用してアプリケーションに必要なアセットを見つけてください。

このケースでは3つのスクリプトを、 abcとして定義してEditorでアセットに割り当てます。その後、スクリプトで自動的に使用可能になります。

プレロードされたアセットを使用

if (app.keyboard.isPressed(pc.KEY_SPACE)) {
    if (this.entity.model.model !== this.b.resource) {
        // update the model component to the new model
        this.entity.model.model = this.b.resource;
    }
} else {
    if (this.entity.model.model !== this.a.resource) {
        // restore original model
        this.entity.model.model = this.a.resource;
    }
    //...
}

このプロジェクトでは、ABのアセットはプリロードとしてマークされています。読み込み画面中に、これらのアセットがダウンロードされることを意味します。アプリケーションの起動と同時に使用できるようになります。アセットが読み込まれると、読み込まれたリソースはasset.resourceとして利用可能です。asset.resourcenullの場合、アセットは読み込まれません。

'A'と'B'モデルがプリロードされるので、アプリケーション実行時に利用可能になります。このコードは、スペースバーが押されていることを確認します。押されている場合、モデルコンポーネントのモデルをアセットのリソースプロパティになるよう変更します。この場合、asset.resourcepc.Modelオブジェクトになります。asset.resourceプロパティがそれぞれの異なるアセットタイプ(オーディオ、テクスチャ、など)の関連するタイプになります。

実行時にアセットを読み込む

if (this.app.keyboard.isPressed(pc.KEY_C)) {
    if (this.c.resource) {
        if (this.entity.model.model !== this.c.resource) {
            this.entity.model.model = this.c.resource;
        }
    }
} else {
    if (this.entity.model.model !== this.a.resource) {
        this.entity.model.model = this.a.resource;
    }
}

Cはモデルは、プリロードとしてマークされていないので、上記のコードでは使用する前にリソースが読み込まれていることを確認します。asset.resourceが空の場合、リソースは読み込まれていないので、モデルコンポーネントを変更することができません。 Cモデルが読み込まれている場合、this.c.resourcepc.Modelプロパティとなり、割り当てることができます。

if (this.app.keyboard.isPressed(pc.KEY_L)) {
    this.app.assets.load(this.c);
}

Lキーを押すと、 Cモデルを読み込みます。これを行うにはthis.app.assets.load()にアンロードされたアセットを渡します。アセットがすでに読み込まれている場合、このメソッドは何も行いません。

アセットが読み込まれるとasset.resourcepc.Modelのインスタンスになり、Cキーを押してそれを割り当てることができます。

完全なスクリプト

var UpdateAsset = pc.createScript('updateAsset');

UpdateAsset.attributes.add('a', {
    type: 'asset',
    assetType: 'model'
});

UpdateAsset.attributes.add('b', {
    type: 'asset',
    assetType: 'model'
});

UpdateAsset.attributes.add('c', {
    type: 'asset',
    assetType: 'model'
});

// initialize code called once per entity
UpdateAsset.prototype.initialize = function() {
    this.app.keyboard.preventDefault = true;
};

// update code called every frame
UpdateAsset.prototype.update = function(dt) {
    var app = this.app;

    if (app.keyboard.isPressed(pc.KEY_SPACE)) {
        if (this.entity.model.model !== this.b.resource) {
            // update the model component to the new model
            this.entity.model.model = this.b.resource;
        }
    } else {
        if (this.entity.model.model !== this.a.resource) {
            // restore original model
            this.entity.model.model = this.a.resource;
        }

        if (app.keyboard.isPressed(pc.KEY_C)) {
            if (this.c.resource) {
                if (this.entity.model.model !== this.c.resource) {
                    this.entity.model.model = this.c.resource;
                }
            }
        } else {
            if (this.entity.model.model !== this.a.resource) {
                this.entity.model.model = this.a.resource;
            }
        }


    }


    if (app.keyboard.isPressed(pc.KEY_L)) {
        app.assets.load(this.c);
    }
};

アセットレジストリのイベント

この例では示していないのは、アセットが読み込まれたことを知る方法です。これを行うには、"load"イベントのようなpc.AssetRegistryイベントを使用します。サンプルコードです:

// find the asset in the registry
var asset = this.app.assets.find("A");
// set up a one-off event listener for the load event
this.app.assets.once("load", function (asset) {
    // asset.resource is now ready
}, this);

"load"イベントは非常に幅広いです。読み込まれるすべてのアセットに発生するので、アセットが他の場所に読み込まれている場合、それがあなたのアセットか分かりません。代わりに、"load:id"イベントを使用して、イベントを絞り込むことができます。

// find the asset in the registry
var asset = this.app.assets.find("A");
// set up a one-off event listener for the load event
this.app.assets.once("load:" + asset.id, function (asset) {
    // asset.resource is now ready
}, this);

上記のイベントは、その特定のアセットのためにのみ稼動します。とても便利です。

最後に、良く発生する一つの特定のコーディングパターンがあります。それを行うための便利な方法を提供しています。

var asset = this.app.assets.find("A");
if (!asset.resource) {
    this.app.assets.once("load:" + asset.id, function (asset) {
        // do something with asset.resource
    });
    this.app.assets.load(asset);
} else {
    // do something with asset.resource
}

このコードは必要とされるアセットを読み込みますが、少し長いので代わりにasset.ready()メソッドを使用することができます。このコードは、上記と同じ機能を実行します。

var asset = this.app.assets.find("A");
asset.ready(function (asset) {
    // do something with asset.resource
});
this.app.assets.load(asset);

asset.ready()メソッドはアセットが読み込まれるとすぐにそのコールバックを呼びます。また、アセットがすでに読み込まれている場合、すぐにそれを呼び出します。アセットがすでに読み込まれている場合、 app.assets.load()は何もしません。

This site is translated by the community. If you want to get involved visit this page