如何使用Pixijs获取在加载的精灵表资产中定义的图像
how to get images defined in loaded sprite sheet asset with Pixijs
使用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"
}
}
如何以编程方式获取精灵工作表中定义的图像列表?
PIXI将所有精灵存储在全局对象PIXI.TextureCache
中。
function onAssetsLoaded () {
// getAssets here
console.log(PIXI.TextureCache);
}
所以要得到一个单一的纹理,你可以做一些类似的事情
var texture1 = PIXI.TextureCache["image1.png"];
不过,你通常不需要这样做,因为添加精灵就像一样简单
var sprite = PIXI.Sprite.fromFrame("image1.png");
相关文章:
- OpenLayers-自定义图像在一层上的马赛克
- 如何使用JS捕捉带有垂直线的自定义图像光标
- 在画布中创建自定义图像对象
- 如何定义图像'另存为'大小
- 可以用我自己的自定义图像替换光标
- 如何在javascript中使画布显示自定义图像作为背景
- 如何在这里的地图中添加自定义图像标记
- Google Plus通过javascript共享,带有自定义图像
- JS--自定义图像属性
- 嵌入视频,将黑色背景更改为自定义图像或第一个视频场景
- “未捕获的类型错误:无法读取未定义的属性'嵌入'”在 pdfMake pdf 引擎中使用自定义图像时
- 自定义图像作为单选按钮
- 如何用自定义图像替换脸书按钮
- 谷歌地图不适用于自定义图像标记
- 具有自定义图像位置的全屏背景幻灯片(每张幻灯片)
- 在谷歌地图中按类型显示自定义图像标记图标
- 传单自定义图像坐标
- 在Highcharts中自定义图像和不同的文本
- 使用jQuery将光标更改为自定义图像
- 将自定义图像添加到Ext.tab.Panel上的项目中