0

我创建了一个外部清单文件，其中包含要预加载的所有资产的列表。例子：

{
	"path":"assets/",
	"manifest": [
		{"id":"background", "src":"images/game-background.jpg"},
		{"id":"ui-elements-json", "src":"images/ui-elements.json"}
		
	]
}

ui-elements-json 是在 TexturePacker 中创建的包含各种 UI 元素的精灵表。我的问题是，在我创建 spritesheet 之前，实际图像不会加载：

var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json'));

这意味着它没有被预加载。至少我看不到它被加载到我的开发者面板中。我可以像这样手动将图像添加到清单文件中：

{"id":"ui-elements", "src":"assets/images/ui-elements.png"}

但这几乎就好像图像被加载了两次，我开始遇到一些性能问题。如果我在清单中添加“type”：“spritesheet”，我可以看到图像现在可以预加载，这很好，但是当我创建 Sprite Sheet 时，我收到以下错误：

“未捕获的类型错误：无法读取未定义的属性‘切片’”

这是我的精灵表 json 的简化版本。据我所知，它的格式正确。

{
    "images": ["assets/images/ui-elements.png"],
    "frames": [
        [511, 2, 1378, 46], 
        [797, 755, 133, 128], 
        [871, 885, 133, 128], 
        [564, 132, 133, 128]

    ],
    "animations": {
            "ui-Infobar":[0], 
            "ui-autospin-down":[1], 
            "ui-autospin-hover":[2], 
            "ui-autospin":[3]
    }
}

我只需要确保我的精灵表图像是预先加载的。

4

2 回答 2

2

最新版本的 PreloadJS 有一个 SpriteSheetLoader 类，它会在相关图像被认为完成之前进行内部预加载。只需{"type": "spritesheet"}在清单中添加 JSON。这还具有为您构造一个 SpriteSheet 实例的好处，当您从队列中请求项目时，您将获得该实例。

{
    "path":"assets/",
    "manifest": [
        {"id":"background", "src":"images/game-background.jpg"},
        {"id":"ui-elements-json", "src":"images/ui-elements.json", "type":"spritesheet"}

    ]
}

然后使用 SpriteSheet：

var ss = preloadjs.getResult("ui-elements-json");
var sprite = new createjs.Sprite(ss);

您可能会看到重复加载的原因是因为 PreloadJS 将默认使用 XHR 加载图像，但 SpriteSheet 类将在内部使用标签加载方法，因为它更简单。

您也可以按照@derz 的建议进行操作，并在队列中更早地预加载图像。

于 2015-05-26T21:14:41.250 回答
0

您可以预加载精灵，而不是预加载 JSON 文件：

{"id":"ui-elements-sprite", "src":"assets/images/ui-elements.png"}

之后你可以在你的 Sprite-Config 对象中使用它：

"images": [preload.queue.getResult('ui-elements-sprite')]

请记住，如果同一张图像被加载两次（第二次从缓存中加载），这应该没什么大不了的，所以没有真正的性能问题。

否则你也可以使用SpriteSheetLoader. 在此处查看文档：http: //createjs.com/Docs/PreloadJS/classes/SpriteSheetLoader.html 或此处的示例： https ://github.com/CreateJS/PreloadJS/blob/master/examples/SpriteSheet.html

于 2015-05-26T18:51:56.950 回答