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

В Phaser спрайтлисты (sprite sheets) представляют собой изображения, содержащие несколько кадров анимации, расположенных в сетке. Каждый кадр имеет одинаковый размер и может быть использован для создания анимаций персонажей, эффектов или элементов интерфейса. Для корректной работы с таким изображением необходимо правильно задать параметры сетки кадров при загрузке спрайтлиста.

Метод this.load.spritesheet

Для загрузки спрайтлиста используется метод this.load.spritesheet в сцене Phaser. Его базовый синтаксис:

this.load.spritesheet(key, url, {
    frameWidth: number,
    frameHeight: number,
    startFrame?: number,
    endFrame?: number,
    margin?: number,
    spacing?: number
});
  • key — уникальный идентификатор ресурса, используемый для доступа к спрайтам и создания анимаций.
  • url — путь к изображению спрайтлиста.
  • frameWidth — ширина одного кадра в пикселях.
  • frameHeight — высота одного кадра в пикселях.
  • startFrame — номер первого кадра, который будет доступен (по умолчанию 0).
  • endFrame — номер последнего кадра (по умолчанию определяется исходя из размеров изображения и сетки).
  • margin — внешняя граница вокруг всего спрайтлиста, которая не включается в кадры.
  • spacing — расстояние между кадрами внутри спрайтлиста.

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

Пример загрузки спрайтлиста с параметрами сетки

this.load.spritesheet('hero', 'assets/hero.png', {
    frameWidth: 64,
    frameHeight: 64,
    margin: 1,
    spacing: 2
});

В этом примере:

  • Каждый кадр имеет размер 64×64 пикселя.
  • Вокруг спрайтлиста есть 1 пиксель отступа (margin).
  • Между кадрами находится 2 пикселя пространства (spacing).

Такая конфигурация позволяет Phaser корректно нарезать спрайтлист и создавать анимации без визуальных артефактов.

Автоматическая генерация кадров

После загрузки спрайтлиста Phaser автоматически создаёт объект Texture с набором кадров. Каждый кадр доступен через ключ спрайта и индекс кадра:

this.add.sprite(100, 100, 'hero', 0); // отображает первый кадр
this.add.sprite(200, 100, 'hero', 5); // отображает шестой кадр

Индексация кадров начинается с 0 и идёт слева направо, сверху вниз по сетке.

Анимации из спрайтлиста

Создание анимаций из спрайтлиста выполняется с помощью метода this.anims.create. Основные параметры:

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 9 }),
    frameRate: 12,
    repeat: -1
});
  • key — уникальное имя анимации.
  • frames — массив кадров, получаемый через generateFrameNumbers, где указываются start и end.
  • frameRate — скорость воспроизведения анимации (кадров в секунду).
  • repeat — количество повторов анимации (-1 означает бесконечный цикл).

Параметры margin и spacing на практике

Обычно margin используется, когда изображение спрайтлиста содержит рамку вокруг всей сетки кадров, например, для предотвращения наложения текстур при сглаживании. Параметр spacing важен, если кадры имеют внутренние отступы, что встречается в коммерческих наборах спрайтов или при экспортировании из графических редакторов. Неправильное указание этих параметров приводит к смещению кадров, появлению линий соседних кадров или разрыву анимации.

Особенности работы с разной сеткой кадров

Если кадры имеют разный размер, стандартный метод spritesheet неприменим. В таких случаях используется атлас текстур (Texture Atlas) с JSON-файлом, где каждому кадру задаются конкретные координаты и размеры. В отличие от sprite sheet, здесь нет строгой регулярной сетки, и Phaser может точно вырезать кадры любой формы и размера.

Рекомендации по оптимизации

  • Размер каждого кадра лучше делать кратным степеням двух (32, 64, 128) для оптимизации работы графического ускорителя.
  • Минимизировать spacing и margin при возможности, чтобы снизить размер текстуры.
  • Всегда проверять визуально вырезанные кадры с помощью метода this.add.sprite до создания анимаций.

Правильная настройка параметров сетки кадров позволяет создавать плавные и точные анимации, избегая артефактов и проблем с отображением, что критично для динамических игр и интерактивных приложений на Phaser.

Оглавление