Оживите своих персонажей в 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;
}
}Этот код создаст игровой элемент, который может перемещаться по синему фону. Для простоты в примере просто используется оранжевый блок для игрового персонажа. Выглядит это так:
Создание листа спрайтов
Первый шаг – создание анимации. Есть много способов создания анимации, но это выходит за рамки того, что мы можем здесь рассмотреть. Для наших целей просто важно сохранить свою анимацию в виде листа спрайтов.
Лист спрайтов – это отдельный файл изображения, содержащий набор кадров анимации. Каждый кадр в анимации помещается рядом с последующим. Все кадры должны быть одинакового размера. Анимационные программы разделят изображение на отдельные кадры в зависимости от размеров одного кадра.
Изображения хранятся в массиве. Как и все массивы, это означает, что первое изображение находится в нулевой позиции. Итак, в приведенном выше примере анимация вниз начинается с нуля и заканчивается на трех. Левая анимация начинается с четырех и заканчивается с семи.
Добавление таблицы спрайтов в Phaser
Загрузка листа спрайтов аналогична загрузке изображения в Phaser. Однако вашей программе потребуется немного больше информации о файле изображения. Раньше мы загружали наше изображение этим текстом:
this.load.image('gamePiece', 'img/gamePiece.png');Однако для листов спрайтов требуется еще несколько параметров. Также необходимо указать размеры рамы. Итак, чтобы загрузить лист спрайтов, нам нужно настроить код следующим образом:
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});Код очень похож. Большая разница в том, что мы добавили третий параметр, который определяет ширину и высоту наших кадров анимации. В этом случае размер кадров составляет 60 на 60 пикселей.
В этом примере будет использоваться простой лист спрайтов. Мы добавили в игровой спрайт стрелку и мигающие индикаторы. Стрелка будет указывать в направлении, в котором движется наш спрайт, когда в этом направлении будет мигать индикатор. Если персонаж не движется, анимация будет циклически проходить по всем кадрам.
Создание анимации
Прежде чем мы сможем оживить нашего персонажа, мы должны создать анимацию. Мы уже загрузили лист спрайтов, теперь мы должны сказать, какие кадры есть в анимации. Чтобы создать анимацию, добавьте в функцию create следующий код:
this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});Выше анимация движения вверх .
- Ключевое слово anims – это сокращение от анимации. В более ранних версиях использовалась полная анимация ключевых слов, но в текущем выпуске используется этот ярлык.
- Ключ – это название анимации. Вы будете использовать клавишу для вызова анимации.
- FrameRate управляет количеством кадров, отображаемых в секунду. В этом примере будет только два кадра в секунду.
- Следующая строка указывает, какое изображение и кадры используются в анимации. Анимация вверх использует изображение gamePiece и начинается с кадра 0 и заканчивается на кадре 2.
- Если вы хотите, чтобы анимация повторялась непрерывно, установите для параметра repeat значение -1. В противном случае вы можете указать, сколько раз анимация должна повторяться до остановки.
Вам нужно будет создать анимацию для каждого направления и состояния ожидания.
Как оживить своего персонажа
Добавить анимацию персонажу довольно просто. Сложная часть – это переход между анимациями. Вы можете установить начальную анимацию в функции создания.
gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");Первая строка создает игрока. Это то же самое, что и создание спрайта с одним изображением, как мы делали раньше. Вторая строка устанавливает вращение анимации. Вращение – это анимация ожидания, которая проходит через все кадры с нуля по одиннадцать.
Теперь, когда вы перезагрузите игру, начнется воспроизведение анимации ожидания. Но вы заметите, что он продолжает играть даже после того, как вы переместите своего персонажа. Настроить анимацию на основе движения немного сложнее.
Возникает соблазн изменить анимацию, когда игрок нажимает кнопку, как мы это делали для установки движения. Проблема с этим подходом заключается в том, что мы проверяем, нажимает ли игрок клавишу в функции обновления. Функция обновления запускается каждый кадр. Если мы поместим туда анимацию, она будет перезапускаться каждый кадр, когда игрок нажимает клавишу.
Чтобы решить эту проблему, нам нужно использовать другой метод. Вместо того, чтобы проверять, является ли ключ Down , мы хотим знать, является ли ключ JustDown . JustDown истинен только при первом нажатии клавиши. Если ключ удерживается, это неправда. Если мы установим анимацию с помощью JustDown, анимация не будет сбрасывать каждый кадр.
Вам нужно будет создать переменную для ключевого ввода, который вы хотите отслеживать в функции создания:
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 упрощает добавление анимации, поэтому вы можете сосредоточиться на самом сложном: создании анимации!
При создании собственного листа спрайтов не забывайте эти указатели:
- Все кадры анимации должны иметь одинаковые размеры.
- Кадры будут храниться в массиве, который начинается с нуля.
- Для анимации часто требуются триггеры, отличные от триггеров, задающих движение.