Персонаж

У нас есть красивые заманчивые платформы, но по ним некому бегать. Давайте исправим это. Создайте новую переменную с именем 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, где анимации всегда принадлежали конкретному игровому объекту, в которых они были созданы.

Назад       Далее