Таблица спрайтов + предварительная загрузка изображения в манифесте

Я создал внешний файл манифеста, который содержит список всех ресурсов для предварительной загрузки. Пример:

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

ui-elements-json — это лист спрайтов, созданный в TexturePacker и содержащий различные элементы пользовательского интерфейса. Моя проблема в том, что фактическое изображение НЕ загружается, пока я не создам таблицу спрайтов с помощью:

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

Это означает, что он не загружается заранее. По крайней мере, я не вижу, чтобы он загружался в моей панели разработчика. Я могу вручную добавить изображение в файл манифеста следующим образом:

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

Но это почти так, как будто изображение загружается дважды, и у меня начинаются проблемы с производительностью. Если я добавлю «type»: «spritesheet» в свой манифест, я увижу, что изображение теперь предварительно загружается, и это здорово, но когда я создаю лист спрайтов, я получаю следующую ошибку:

«Uncaught TypeError: не удается прочитать свойство« фрагмент »неопределенного»

Вот упрощенная версия моего 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]
    }
}

Мне просто нужно убедиться, что мое изображение листа спрайтов предварительно алодно.


createjs easeljs preloadjs
person cds    schedule 26.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В последней версии 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, и предварительно загрузить изображение раньше в очереди.

person Lanny    schedule 26.05.2015
comment
Спасибо за ответ. На самом деле я пытался использовать SpriteSheetLoader, но когда я создаю новый лист спрайтов, я получаю следующую ошибку: Uncaught TypeError: Cannot read property 'slice' of undefined - person cds; 27.05.2015
comment
Вам не нужно создавать новый SpriteSheet, как упоминал @Lanny. Просто сделайте что-нибудь вроде: preload.queue.getResult('ui-elements-json'), который уже вернет экземпляр SpriteSheet. - person derz; 27.05.2015
comment
Как это правильно? var ss = new createjs.SpriteSheet(preload.queue.getResult('ui-elements-json')); Это то, что я делаю сейчас. Тьфу, у меня так много проблем с частотой кадров/производительностью на мобильных устройствах, и я не могу определить причину. Несмотря на то, что я предварительно загружаю изображения для листа спрайтов, мне также нужно проверить полное событие, прежде чем я смогу кэшировать контейнеры, в которые я прикрепил свои активы. - person cds; 27.05.2015
comment
Я добавил образец к приведенному выше ответу, чтобы показать использование. Как сказал @derz, PreloadJS создаст для вас экземпляр SpriteSheet. - person Lanny; 27.05.2015
comment
Очень признателен. Собственно именно этим я и занимаюсь. Однако, несмотря на то, что я предварительно загружаю изображения, все равно возникает задержка при создании нового экземпляра листа спрайтов. Итак, что я сделал сейчас, так это после создания своих экземпляров (у меня есть несколько листов спрайтов) я проверяю их полные события, а затем продолжаю добавлять свои активы на сцену. Кажется, это помогло. - person cds; 27.05.2015
comment
SpriteSheetLoader был создан для решения этой проблемы. Вы не включаете изображения в свою очередь и позволяете загрузчику предварительно загрузить их (он использует внутреннюю очередь загрузки). Как только SpriteSheet будет готов, изображения тоже должны быть готовы. В GitHub есть пример, показывающий это использование. - person Lanny; 27.05.2015

arrow_upward
0
arrow_downward

Вместо предварительной загрузки файла 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

person derz    schedule 26.05.2015