清单中的 Spritesheet + 图像预加载答案

【问题标题】：Spritesheet + image preloading in Manifest清单中的 Spritesheet + 图像预加载
【发布时间】：2015-08-08 10:04:54
【问题描述】：

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

{
	"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"}

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

"Uncaught TypeError: Cannot read property 'slice' of undefined"

这是我的精灵表 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]
    }
}

我只需要确保我的 sprite sheet 图像是预加载的。

【问题讨论】：

标签： easeljs createjs preloadjs

【解决方案1】：

最新版本的 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 的建议进行操作，并在队列中更早地预加载图像。

【讨论】：

感谢您的回复。我实际上确实尝试过使用 SpriteSheetLoader，但是当我创建新的 spritesheet 时，我收到以下错误：“”Uncaught TypeError: Cannot read property 'slice' of undefined”
您不必像@Lanny 提到的那样创建新的 SpriteSheet。只需执行以下操作：preload.queue.getResult('ui-elements-json') 将返回一个 SpriteSheet 实例。
喜欢这个吧？ var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json'));这就是我现在正在做的事情。呃 - 只是在移动设备上遇到了很多帧速率/性能问题，我似乎无法确定原因。即使我为精灵表预加载了图像，我仍然需要检查“完成”事件，然后才能缓存我附加资产的容器。
我在上面的答案中添加了一个示例以显示用法。正如@derz 所说，PreloadJS 将为您构造一个 SpriteSheet 实例。
非常感谢。这实际上正是我正在做的事情。但是，即使我预加载了图像，在创建新的精灵表实例时仍然存在“延迟”。所以我现在所做的是在创建我的实例之后（我有多个精灵表），我检查它们的完整事件，然后继续将我的资产添加到舞台上。这似乎有所帮助。

【解决方案2】：

您可以预加载精灵，而不是预加载 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

【讨论】：