Відображення конкретного спрайту із спрайта за допомогою Phaser

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

У попередній рамці, яку я використав, мені вдалося створити окремі менші спрайти з більшого спрайтового аркуша, який я використовував. Але я не можу зрозуміти, як це зробити у Фазер, якщо це взагалі можливо.

Тож я розглядав завантаження зображення як спрайтовий лист, але, схоже, спрайети використовуються лише для анімації, і ви дійсно не можете відобразити певний "кадр" Spritesheet (виправте мене, якщо я помиляюся).

Я думаю, що мені потрібно зробити це завантажити зображення у вигляді плиткових карт, однак, конкретне зображення, яке я використовую, не поставилося з файлом 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.

Після завантаження створіть свій спрайт:

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

Це говорить Фазеру використовувати зображення разом із клавішею spriteSheetKeyяк його текстуру. За замовчуванням він перейде до кадру 0 аркуша спрайта, але ви можете змінити його sprite.frameна будь-яке інше дійсне число.

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