Sprite: спрайты с анимацией

В Phaser спрайт представляет собой базовый визуальный объект, который может отображать графику, реагировать на физику, события и анимацию. Спрайт создаётся с помощью метода this.add.sprite(x, y, key), где x и y — координаты на сцене, а key — идентификатор загруженного изображения.

let player = this.add.sprite(100, 150, 'hero');

Спрайт можно перемещать, изменять его размер, вращение и прозрачность с помощью свойств x, y, scale, angle и alpha.

player.setScale(2);
player.angle = 45;
player.alpha = 0.8;

Анимации спрайтов

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

Создание анимации

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 5 }),
    frameRate: 10,
    repeat: -1
});

Ключевые параметры:

  • key — уникальный идентификатор анимации.
  • frames — набор кадров, используемых для анимации.
  • frameRate — скорость воспроизведения в кадрах в секунду.
  • repeat — количество повторений; -1 означает бесконечное повторение.

Воспроизведение анимации

player.anims.play('walk');

Анимацию можно приостанавливать, останавливать или воспроизводить один раз:

player.anims.pause();
player.anims.stop();
player.anims.play('walk', true); // повторное воспроизведение с начала

Контроль анимации и событий

Phaser предоставляет события анимации, позволяющие выполнять действия при смене кадров или окончании анимации:

player.on('animationcomplete', function(animation, frame) {
    console.log(`Анимация ${animation.key} завершена`);
});
player.on('animationupdate', function(animation, frame) {
    console.log(`Текущий кадр: ${frame.index}`);
});

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

Физика и спрайты

Спрайты могут взаимодействовать с физическим миром Phaser, используя Arcade Physics, Matter.js или другие встроенные системы. Для Arcade Physics спрайт превращается в физический объект с помощью метода this.physics.add.sprite:

let ball = this.physics.add.sprite(200, 300, 'ball');
ball.setCollideWorldBounds(true);
ball.setBounce(0.8);
ball.setVelocity(150, -200);

Свойства физики:

  • setCollideWorldBounds(true) — ограничивает движение объектом внутри сцены.
  • setBounce(value) — задаёт отскок при столкновениях.
  • setVelocity(x, y) — задаёт скорость объекта.

Интерактивные спрайты

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

player.setInteractive();
player.on('pointerdown', function(pointer) {
    player.setTint(0xff0000); // изменение цвета при нажатии
});

Методы setInteractive и события pointerdown, pointerup, pointerover, pointerout позволяют создавать интерактивные элементы интерфейса и управления.

Оптимизация работы со спрайтами

  • Использовать Sprite Sheets для анимаций, чтобы минимизировать загрузку отдельных изображений.
  • Группировать спрайты через this.add.group для удобного управления несколькими объектами.
  • Применять setActive(false) и setVisible(false) для временного отключения спрайтов, что снижает нагрузку на рендеринг и физику.
let enemies = this.add.group();
enemies.create(50, 100, 'enemy');
enemies.create(150, 200, 'enemy');
enemies.getChildren().forEach(e => e.setActive(false));

Масштабирование и трансформации спрайтов

  • setScale(x, y) — изменение размера по осям.
  • angle — поворот в градусах.
  • flipX / flipY — зеркальное отражение по горизонтали или вертикали.
  • setOrigin(x, y) — изменение точки привязки спрайта, что важно для вращения и позиционирования.
player.setOrigin(0.5, 0.5);
player.flipX = true;

Работа с несколькими анимациями

Спрайт может иметь несколько анимаций, переключающихся в зависимости от состояния игры:

if (cursors.left.isDown) {
    player.anims.play('walkLeft', true);
} else if (cursors.right.isDown) {
    player.anims.play('walkRight', true);
} else {
    player.anims.play('idle', true);
}

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

Итоговые рекомендации

Для сложных проектов важно:

  • Структурировать анимации и спрайты в отдельные каталоги и менеджеры.
  • Использовать события анимации для синхронизации логики.
  • Оптимизировать производительность через группы и отключение неактивных спрайтов.

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

Оглавление