Оживление персонажей в Phaser

Добавление анимации в ваши игры на Phaser выведет их на новый уровень. Вот как это сделать

В Phaser легко добавлять анимацию в игры. Анимация оживляет персонажей видеоигр. Один из способов включить анимацию в игру – анимировать движения персонажа. Можно даже создать анимацию в состоянии покоя, которая будет выполняться, когда игрок вообще не двигается. Это придаст вашим персонажам больше индивидуальности

Настройка игры

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

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

var config = {
  type: Phaser.AUTO,
  backgroundColor: 0xCCFFFF ,
  width: 600,
  height: 600,
  physics: {
    default: 'arcade'
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};
 
var gamePiece;
var keyInputs;
var game = new Phaser.Game(config);
 
function preload(){
  this.load.image('gamePiece', 'img/gamePiece.png');

 
function create(){
  gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
  keyInputs = this.input.keyboard.createCursorKeys();

 
function update(){
  if(keyInputs.left.isDown){
    gamePiece.x = gamePiece.x - 2;
  }
  if(keyInputs.right.isDown){
    gamePiece.x = gamePiece.x + 2;
  }
  if(keyInputs.up.isDown){
    gamePiece.y = gamePiece.y - 2;
  }
  if(keyInputs.down.isDown){
    gamePiece.y = gamePiece.y + 2;
  }

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

Создание спрайтового листа

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

Похожие: Лучшие инструменты пиксель-арта для создания пиксельно идеальных работ

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

Image Credit: isaiah658/Open Clipart.

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

Добавление спрайт-листа в Phaser

Загрузка спрайт-листа аналогична загрузке изображения в Phaser. Однако вашей программе потребуется немного больше информации о файле изображения. Ранее мы загружали наше изображение с таким текстом:

this.load.image('gamePiece', 'img/gamePiece.png');

Спрайт-листы, однако, нуждаются в нескольких дополнительных параметрах. Мы также должны указать размеры кадра. Итак, чтобы загрузить спрайт-лист, нам нужно изменить код следующим образом:

this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
  frameWidth: 60,
  frameHeight: 60
});

Код очень похож. Большая разница в том, что мы добавили третий параметр, задающий ширину и высоту кадров анимации. В данном случае кадры имеют размер 60 пикселей на 60 пикселей

Image Credit: isaiah658/Open Clipart.

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

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

Прежде чем мы сможем анимировать нашего персонажа, мы должны создать анимацию. Мы уже загрузили спрайт-лист, теперь нам нужно указать, какие кадры входят в анимацию. Чтобы создать анимацию, добавьте следующий код в функцию create:

this.anims.create({
  key: 'up',
  frameRate: 2,
  frames: this.anims.generateFrameNumbers('gamePiece', {start: 0, end:2}),
  repeat: -1
});

Выше показана анимация для направления вверх

• Ключевое слово anims – это сокращение от анимации. В предыдущих версиях использовалось полное ключевое слово animations , но в текущей версии используется это сокращение.
• Ключ key – это имя анимации. Вы будете использовать ключ для вызова анимации.
• FrameRate управляет количеством кадров, показываемых в секунду. В данном примере будет только два кадра в секунду.
• Следующая строка указывает, какое изображение и кадры используются в анимации. Анимация вверх использует изображение gamePiece , начинается с кадра 0 и заканчивается на кадре 2.
• Если вы хотите, чтобы анимация зацикливалась непрерывно, установите значение repeat равным -1. В противном случае вы можете ввести, сколько раз анимация должна повториться перед остановкой.

Вам нужно будет создать анимацию для каждого направления и состояния простоя

Похожие: PowToon упрощает создание анимированных видео и слайд-шоу

Как анимировать персонажа

Добавить анимацию к персонажу довольно просто. Самое сложное – это переход между анимациями. Вы можете задать начальную анимацию в функции создания

gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play('spin');

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

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

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

Чтобы решить эту проблему, нам нужно использовать другой метод. Вместо того чтобы проверять, нажата ли клавиша isDown , мы хотим узнать, нажата ли клавиша JustDown.JustDown истинно только при первом нажатии клавиши. Если клавиша удерживается, это не так. Если мы зададим анимацию с помощью JustDown, анимация не будет сбрасываться каждый кадр

В функции create необходимо создать переменную для входа клавиши, который вы хотите отслеживать:

leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

Затем необходимо проверить, нажата ли клавиша в функции обновления:

if(Phaser.Input.Keyboard.JustDown(upKey)){
  gamePiece.anims.play('up');

Теперь при первом нажатии клавиши ‘вверх’ игра перейдет к анимации ‘вверх’. Вам нужно будет написать аналогичное if-выражение для каждой клавиши направления

Нам осталось сделать еще одно последнее изменение. Сейчас, когда игрок перестает нажимать на клавишу, последняя анимация продолжает воспроизводиться. Мы хотим, чтобы она возвращалась к нашей анимации бездействия. Для этого мы используем метод JustUp. Как и JustDown , он сработает, когда игрок отпустит клавишу

if(Phaser.Input.Keyboard.JustUp(upKey)){
  gamePiece.anims.play('spin');

Как только игрок перестанет нажимать клавишу вверх, анимация вернется к нашей анимации холостого вращения. Вам нужно будет написать аналогичное утверждение для каждой клавиши направления

Чтобы посмотреть окончательный код, перейдите на pastebin

Следующий шаг: Создайте собственную анимацию

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

Создавая свой собственный спрайт-лист, не забывайте об этих указателях:

• Все кадры анимации должны иметь одинаковые размеры.
• Кадры будут храниться в массиве, который начинается с нуля.
• Анимации часто требуются триггеры, отличные от триггеров, задающих движение.