Question

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

~/Library/Preferences/PyCharm40

ui-elements-json是一个在TexturePacker中创建的精灵表，包含各种UI元素。我的问题是在我用以下内容创建spritesheet之前，实际图像没有加载：

-Djava.ext.dirs=/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/lib/ext

这意味着它没有被预加载。至少我看不到它被加载到我的开发人员面板中。我可以手动将图像添加到Manifest文件中，如下所示：

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

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

“未捕获的TypeError：无法读取未定义的属性'slice'”

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

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

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

Answer 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建议的操作，并在队列中预先加载图像。

Answer 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

清单中的Spritesheet +图像预加载

2 个答案: