Как импортировать несколько изображений как один спрайт в Createjs EaselJS?

Question

У меня есть несколько изображений, слитых как одно изображение спрайта. Эти изображения не являются частью какой-то анимации, это просто разные статические изображения.

Мне нужно как-то загрузить их в Createjs/EaselJS, но я не знаю шаблон json для данных spritesheet.

Все результаты поиска указывают на то, как сделать спрайт-анимацию, но мне не нужна анимация, только статические изображения по идентификатору.

Кто-нибудь может привести пример, как этого добиться?

Answer 1

Вот пример для вашего файла JSON:

{
    "frames": [
        [0, 0, 120, 200],
        [140, 0, 350, 400]]
}

Каждый элемент в "кадрах" описывает один кадр вашего злого изображения. Есть 4 значения в каждом кадре. Первые 2 обозначают позицию фрейма в спрайте. [0, 0] левый верхний угол для кадра № 1 и [140, 0] для кадра № 2. Другие 2 значения описывают размер кадра (120x200 и 350x400 в моем случае).

Загрузите этот json и ваше изображение в EaselJS, а затем создайте его как Sprite. Как это:

var ssheet = new createjs.SpriteSheet(ss);  
var sprite = new createjs.Sprite(ssheet);

Не используйте метод воспроизведения, так как это не анимация в вашем случае. Просто вызовите gotoAndStop(0) для первого кадра и gotoAndStop(1) для второго кадра.

Теперь добавьте свой спрайт на сцену.