在pixi v3中加載精靈圖片

我正在嘗試學習Pixi.js的遊戲編碼，但我最難的時間是最基本的任務之一：加載精靈圖紙。真正的問題是，Pixi v3打破了舊的加載精靈的方式，顯然是PIXI.AssetLoader()。我可以找到的所有教程都使用該方法，但是當我嘗試使用它時，PIXI拋出一個錯誤，告訴我使用它們的PIXI.loader.Loader類。我更喜歡使用最近版本的庫，所以這很公平。在pixi v3中加載精靈圖片

我擡頭一看這裏的文檔： http://pixijs.github.io/docs/PIXI.loaders.Loader.html

的問題是，該文件是稀疏的（它甚至不描述屬於類的方法）。我可以弄清楚如何將單個圖像作爲紋理加載......我想......但我想加載精靈表單！最令人沮喪的是主頁突出宣佈支持精靈表加載。你是怎麼做到的？

盡我根據我所能蒐集是這樣得：

這是我的精靈表JSON：

{ 
    "frames": { 
    "exampleFrame1.png": { 
     "frame": {"x":0, "y":0, "w":100, "h":100}, 
     "rotated": false, 
     "trimmed": false, 
     "spriteSourceSize": {"x":0, "y":0, "w":100, "h":100}, 
     "sourceSize": {"w": 100, "h": 100} 
    } 
    }, 

    "meta": { 
    "image": "./images/example-sprite-sheet.png" 
    } 
}

這是請求精靈代碼：

var sprite; 
var loader = new PIXI.loaders.Loader("./images", 5); 
loader.add('example-sprites', 'example-sprite-sheet.json'); 
loader.on('complete', onAssetLoad); 
loader.load(); 

function onAssetLoad(){ 
    sprite = PIXI.Sprite.fromFrame("exampleFrame1.png"); 
    //attach sprite to stage etc... 
}

我可能沒有上面的代碼，但我在Pixi的文檔中找不到任何東西，甚至他們網站上的所有教程和示例都使用了破損的PIXI.AssetLoader()方法。

有沒有人知道如何做我想在Pixi v3中做的事情？或者更好的是，有沒有人知道我在哪裏可以找到我需要的信息？

來源

2015-11-03 Cappielung

你的代碼看起來不錯。我想你只需要「圖像」後斜槓：

var loader = new PIXI.loaders.Loader("./images/", 5);

此外，這是沒有必要的，但你可以使用「一次」而不是「對」的事件處理程序，如果你只是想需要傾聽爲它一次。

loader.once('complete', onAssetLoad);

去這裏的一些偉大的例子： http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

來源

2015-11-04 00:34:35 Karmacon

謝謝！我不知何故錯過了那個例子頁面。結果是，我只是不太清楚Sprite Sheets是如何通過TexturePacker這樣的工具生成的，誠實地說。 – Cappielung

在pixi v3中加載精靈圖片

回答

相關問題