Spritesheet + предварительная загрузка изображений в Manifest

Question

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

{
 "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" в свой манифест, я увижу, что изображение теперь загружается заранее, и это здорово, но при создании листа Sprite я получаю следующую ошибку:

"Uncaught TypeError: Невозможно прочитать свойство 'slice' из неопределенного"

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

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

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