[PlayCanvas] Assetの動的読み込み

はじめに

PlayCanvasのアセットはPreloadにチェックが入ってるものは全て起動時に読み込みます。それでは重いですし、何より全てのアセットが起動時に必要とも限らないので、必要最低限のアセットだけにPreloadにチェックを入れ、他のアセットは必要に応じて動的に読み込む必要があります。

方法

読み込むだけ

アセットの読み込みはapp.assets.load()を使用するだけです。

Sample

var Sample = pc.createScript('sample');

Sample.attributes.add('picture', {type: 'asset'});

Sample.prototype.initialize = function() {
    this.app.assets.load( this.picture );
};

load()はまだ読み込まれていないデータをロードするメソッドです。すでに読み込まれている場合は何もしません。

読み込みを待ってから処理を実行する

先の方法は読み込むだけなので、読み込まれたら反映をする必要があります。それを実現する為にready()を使用します。

Sample

var Sample = pc.createScript('sample');

Sample.attributes.add('picture', {type: 'asset'});

Sample.prototype.initialize = function() {
    this.picture.ready( this.onLoaded );
    this.app.assets.load( this.picture );
};

Sample.prototype.onLoaded = function( asset ) {
    this.entity.element.textureAsset = asset ;
};

ready()は読み込みが完了していた時に処理を行うメソッドです。
すでに読み込まれていれば即時実行されます。

まとめて読み込む

上記の方法は、1つのアトリビュートに1つの処理を書いているので、数が増えれば当然煩雑になります。ある程度決まったルールがあるのであれば、アセットタグを使用した読み込みを実装するべきです。

Sample

var Sample = pc.createScript('sample');

Sample.prototype.initialize = function() {
    var assets = this.app.assets.findByTag( 'Tag' );

    var self = this;
    assets.forEach(( elm )=>{
        self.app.assets.load( elm );
    });
};

おわりに

覚書程度ですが、一先ず基本的な手段を書きました。
凝ったことをしなければ、これで十分なはずです。(多分)

おまけ

ここからはただの個人的覚書

一連の処理をメソッド化する

紹介したコードを全ての場所に書いていたらはっきり言って手間ですし汚くなるのは目に見えてるので、一連の動作をメソッド化します。

function checkLoad( asset, callback ){
    const app = pc.Application.getApplication();

    if( asset ){
        asset.ready( callback );
        app.assets.load( asset );
    }
}

プロジェクト外のリソースを読み込む

定期的にキャラを追加するゲームだったとして、キャラを追加する度にプロジェクトにインポートしてビルドしてサーバーに上げるのは非効率なので、そういったデータは別に管理するとなったとしましょう。そういったデータを読み込む方法としてloadFromUrl()というメソッドが用意されています。

var Sample = pc.createScript('sample');

Sample.prototype.initialize = function() {
    const url = "";
    const type = "texture";
    this.app.assets.loadFromUrl( url, type, this.onLoaded );
};

Sample.prototype.onLoaded = function( asset ) {
    this.entity.element.textureAsset = asset ;
};