読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

PIXI.loader

Pixi.js

 画像やjsonファイルなどを最初にまとめて読み込むときはPIXI.loaderを使う。
 前回のサンプルをPIXI.loaderを使って書き直してみる。

 頂点データをjsonファイルに分離して、例えばmodel.jsonという名前で読み込むことにする。まあ実際のゲームではそうなるだろう。

// model.json
{
"verts": [0, 0, 300, 0, 0, 300, 400, 400],
"uvs": [0, 0, 1, 0, 0, 1, 1, 1],
"triangles": [0, 1, 2, 3, 2, 1]
}

 PIXI.loaderに読み込みたいファイルを好きなだけaddして、PIXI.loader.loadを呼び出す。

var stage = new PIXI.Container();
...

PIXI.loader
    .add('model', 'res/model.json')
    .add('ship', 'res/ship.png')
    .on('progress', function (loader) {
        console.log("*progress* " + loader.progress); // 途中経過も取れる
    })
    .load(onAssetsLoaded);

 ロードが終わった後に行う処理はonAssetsLoadedの中に移動。

...
function onAssetsLoaded(loader, res) 
{
    var verts = new Float32Array(res.model.data.verts);
    var uvs = new Float32Array(res.model.data.uvs);
    var triangles = new Uint16Array(res.model.data.triangles);

    var ship = new PIXI.mesh.Mesh(
        res.ship.texture,
        verts, uvs, triangles, 
        PIXI.mesh.Mesh.DRAW_MODES.TRIANGLES);
    stage.addChild(ship);
}

animate();
...

 こんな感じでしょうか。
 読み込んだデータを解放するメソッドは無さそう。
 

広告を非表示にする