У нас есть красивые заманчивые платформы, но по ним некому бегать. Давайте исправим это.
Создайте новую переменную с именем player
и добавьте следующий код в функцию create
. Вы можете посмотреть код в part5.html
:
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
Здесь описаны спрайт, реагирующий на физику мира и его анимация.
Первая часть кода создает спрайт:
player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
Здесь создается новый спрайт с именем player
в позиции (100;450). Спрайт был создан с помощью Physics Game Object Factory (метод this.physics.add
), что означает, что он по умолчанию имеет динамическое физическое тело.
После создания спрайта мы устанавливаем ему значение ему небольшое значение отскока в 0,2. Это означает, что когда он ударяется, он слегка подпрыгивает. Далее мы устанавливаем столкновение с границами игрового мира. По умолчанию игровой мир соответствует размерам нашей игры. Так как мы установили размер для игры 800 х 600, игрок не сможет покинуть эту область. Границы игры остановят игрока по краям экрана, даже сверху.
Если вы вернетесь назад к функции preload
, то увидите, что «dude» был загружен в виде спрайт-листа, а не изображения. Это потому, что он содержит кадры анимации. Вот как выглядит полный спрайт:
Всего 9 кадров: 4 для бега влево, 1 для движения лицом к камере и 4 для бега вправо.
Примечание: Phaser поддерживает переворачивание спрайтов , чтобы уменьшить количество необходимых кадров, но мы не будем использовать его в этом руководстве.
Мы задаем две анимации, которые мы называем left
для перемещения влево и right
для перемещения вправо. Вот анимация left
:
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
Анимация left
использует кадры 0, 1, 2 и 3 и работает со скоростью 10 кадров в секунду. Значение -1 свойства repeat
указывает, что анимация будет циклично повторяться.
Аналогично выполняется анимация движения в противоположном направлении - right
, и для анимации вращения turn
.
Примечание. В Phaser 3 Animation Manager является глобальным. Созданные в нем анимации доступны для всех игровых объектов. Они имеют общие данные анимации, но имеют свои собственные временные шкалы. Это позволяет нам определять анимацию только один раз, а затем применять ее к тем игровым объектам, которые нам нужны. Это отличается от Phaser 2, где анимации всегда принадлежали конкретному игровому объекту, в которых они были созданы.