如何使用 Pixijs 获取在加载的精灵表资产中定义的图像答案

【问题标题】：how to get images defined in loaded sprite sheet asset with Pixijs如何使用 Pixijs 获取在加载的精灵表资产中定义的图像
【发布时间】：2015-04-09 02:49:59
【问题描述】：

使用 Pixijs 我可以如下加载资源：

var assetsToLoader = ["sprite-sheet-1.json", "sprite-sheet-2.json"];
loader = new PIXI.AssetLoader(assetsToLoader);
loader.onComplete = onAssetsLoaded
loader.load();
function onAssetsLoaded () {
   // getAssets here  
}

在 sprite-sheet-1.json

{"frames": {

    "image1.png":
    {
        "frame": {"x":0,"y":0,"w":40,"h":40},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
        "sourceSize": {"w":40,"h":40}
    },
    "image2.png":
    {
        "frame": {"x":40,"y":0,"w":40,"h":40},
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40},
        "sourceSize": {"w":40,"h":40}
    }},
    "meta": {
        "app": "http://www.texturepacker.com",
        "version": "1.0",
        "image": "../img/sprite-sheet-1.png.png",
        "format": "RGBA8888",
        "size": {"w":279,"h":40},
        "scale": "1",
        "smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$",
        "extraMeta": "this is Extra"
    }
}

如何以编程方式获取精灵表中定义的图像列表？

【问题讨论】：

标签： javascript canvas pixi.js

【解决方案1】：

PIXI 将您的所有精灵存储在全局对象PIXI.TextureCache 中。

function onAssetsLoaded () {
   // getAssets here  
   console.log(PIXI.TextureCache);
}

所以要获得单一纹理，您可以执行类似的操作

var texture1 = PIXI.TextureCache["image1.png"];

您通常不需要这样做，因为添加 Sprite 就像

var sprite = PIXI.Sprite.fromFrame("image1.png");

【讨论】：