Отображение определенного спрайта из таблицы спрайтов с помощью Phaser

Я пытаюсь сделать карточную игру, используя Phaser, фреймворк HTML5 JS. Поскольку я ужасный художник и не могу создавать свои собственные, я использую бесплатную таблицу спрайтов с изображениями игральных карт, которые я нашел в Интернете. Проблема в том, что я не могу понять, как отображать отдельные карты с помощью Phaser.

В предыдущей структуре, которую я использовал, я мог создавать отдельные меньшие спрайты из большего листа спрайтов, который я использовал. Но я не могу понять, как это сделать в Phaser, если это вообще возможно.

Поэтому я посмотрел на загрузку изображения в виде таблицы спрайтов, но кажется, что таблицы спрайтов используются только для анимации, и вы не можете отобразить конкретный «кадр» таблицы спрайтов (пожалуйста, исправьте меня, если я ошибаюсь).

Я думаю, что мне нужно сделать, это загрузить изображение в виде мозаичной карты, однако конкретное изображение, которое я использую, не поставляется с файлом json, указывающим макет (и при этом я не могу найти тот, который сделал). Будучи новичком в javascript, у меня возникли проблемы с чтением исходного кода Phaser, чтобы узнать, как форматировать файл json.

Итак, в общем, как лучше всего отобразить отдельную карточку из таблицы спрайтов игральных карт в Phaser, если у меня нет файла json, в котором указаны данные карты?

var sprite = game.add.sprite(x, y, 'spritesheet_name');
sprite.frame = 0;

Спрайт-листы не ограничиваются анимацией, это всего лишь один из способов их использования. Анимация - это просто способ отображения разных кадров в разное время. Путем ручной установки рамки спрайта вы можете отобразить определенную часть таблицы спрайтов.

Phaser поддерживает два типа листов спрайтов: «классические», где каждый кадр имеет одинаковый размер, и «текстурные атласы», которые создаются с помощью стороннего приложения, такого как Texture Packer, Shoebox или Flash CC, и идут со связанным файлом JSON.

Вы загружаете «классические», game.load.spritesheetгде вы должны указать ширину и высоту фреймов и, при необходимости, количество, то есть:

game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);

Для загрузки текстурного атласа вы можете использовать game.load.atlas. Вы найдете множество примеров этого в репозитории Phaser examples.

После загрузки создайте свой спрайт:

var sprite = game.add.sprite(x, y, 'spriteSheetKey');

Это говорит Phaser использовать изображение с ключом в spriteSheetKeyкачестве текстуры. По умолчанию он переходит к кадру 0 листа спрайта, но вы можете изменить его sprite.frameна любое другое допустимое число.

Если в спрайте использовался атлас текстуры, проще изменить фрейм на основе имени фрейма: sprite.frameName = 'card4'где имя фрейма точно соответствует указанному в json-файле текстурного атласа (откройте его и посмотрите, чтобы увидеть!).