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

Question

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

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

UI-элементы-JSON является спрайты листа создан в TexturePacker, содержащего различные элементы пользовательского интерфейса. Моя проблема заключается в том, что фактическое изображение не загружается, пока я не создать spritesheet с:

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

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

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

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

«Неподготовлено TypeError: Can not 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] 
 
    } 
 
}

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

Answer 1

Вместо преднагрузки ваш JSON файл можно предварительно загрузить спрайт

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

После этого вы можете использовать его в Sprite-объект конфигурации:

"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

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