О чем этот пример
Создание платформера — отличный способ изучить физику в Phaser. В этом примере мы не просто заставляем персонажа прыгать по платформам, а добавляем интерактивности: платформы реагируют на прикосновение игрока, а звёзды отскакивают от них. Статья разбирает ключевые приёмы управления столкновениями, настройки групп физических объектов и обработки взаимодействий, которые можно адаптировать для своих игр.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
cursors;
player;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('block', 'assets/sprites/block.png');
this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
create ()
{
this.createAnims();
this.physics.world.checkCollision.up = false;
this.physics.world.checkCollision.down = false;
this.add.image(400, 300, 'sky');
const platforms = this.physics.add.group({
defaultKey: 'ground'
});
platforms.create(400, 500);
platforms.create(450, 400);
platforms.create(500, 300);
platforms.create(550, 200);
platforms.create(600, 100);
for (const platform of platforms.getChildren())
{
platform.body.immovable = true;
platform.body.moves = false;
}
const block = this.physics.add.staticImage(100, 300, 'block');
this.player = this.physics.add.sprite(100, 150, 'dude');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
this.cursors = this.input.keyboard.createCursorKeys();
const stars = this.physics.add.group({
allowGravity: false,
bounceX: 1,
bounceY: 1,
velocityY: 50
});
stars.createMultiple([
{ key: 'star', quantity: 6, setXY: { x: 450, y: 150, stepX: 50, stepY: 5 } },
{ key: 'star', quantity: 6, setXY: { x: 400, y: 250, stepX: 50, stepY: 5 } },
{ key: 'star', quantity: 6, setXY: { x: 350, y: 350, stepX: 50, stepY: 5 } }
]);
this.physics.add.collider(this.player, platforms, (player, platform) =>
{
platform.body.moves = true;
platform.body.checkCollision.none = true;
});
this.physics.add.collider(this.player, block);
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(this.player, stars, this.collectStar, null, this);
}
update ()
{
const { left, right, up } = this.cursors;
if (left.isDown)
{
this.player.setVelocityX(-150);
this.player.anims.play('left', true);
}
else if (right.isDown)
{
this.player.setVelocityX(150);
this.player.anims.play('right', true);
}
else
{
this.player.setVelocityX(0);
this.player.anims.play('turn');
}
if (up.isDown && this.player.body.onFloor())
{
this.player.setVelocityY(-300);
}
}
collectStar (player, star)
{
star.disableBody(true, true);
}
createAnims ()
{
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
});
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
debug: false,
gravity: { y: 300 }
}
},
scene: Example
};
const game = new Phaser.Game(config);
Отключаем стандартные проверки столкновений
Первым делом в методе create() мы изменяем глобальные настройки физического мира Arcade. Это позволяет тонко контролировать, в каких направлениях будут проверяться столкновения.
this.physics.world.checkCollision.up = false;
this.physics.world.checkCollision.down = false;В данном случае отключаются проверки сверху и снизу для всех тел в мире. Это может быть полезно, например, для создания односторонних платформ или нестандартного поведения при прыжках. Обратите внимание, что это влияет на все тела, созданные после этого вызова.
Создание и настройка интерактивных платформ
Платформы создаются как группа физических тел с помощью this.physics.add.group(). Ключевой параметр defaultKey указывает, какая текстура будет использоваться по умолчанию для всех создаваемых в группе объектов.
const platforms = this.physics.add.group({
defaultKey: 'ground'
});
platforms.create(400, 500);
platforms.create(450, 400);
// ... другие платформыПосле создания каждая платформа настраивается в цикле. Свойство immovable = true делает тело неподвижным при столкновении, а moves = false отключает влияние гравитации и других сил на само тело.
for (const platform of platforms.getChildren())
{
platform.body.immovable = true;
platform.body.moves = false;
}Коллайдер с реакцией: изменяем платформу при касании
Самая интересная часть примера — это коллайдер между игроком и платформами. В отличие от обычного статичного столкновения, здесь мы передаём callback-функцию, которая срабатывает при каждом контакте.
this.physics.add.collider(this.player, platforms, (player, platform) =>
{
platform.body.moves = true;
platform.body.checkCollision.none = true;
});При столкновении с игроком платформа меняет свои свойства: moves = true позволяет гравитации воздействовать на неё (хотя из-за следующей строки это неявно), а checkCollision.none = true полностью отключает для этого тела все проверки столкновений. В результате платформа после касания игроком "отключается" от физического мира.
Группа звёзд с особыми физическими свойствами
Звёзды создаются как ещё одна физическая группа. Обратите внимание на параметры, заданные при её создании.
const stars = this.physics.add.group({
allowGravity: false,
bounceX: 1,
bounceY: 1,
velocityY: 50
});* allowGravity: false — отключает гравитацию для всех звёзд.
* bounceX: 1 и bounceY: 1 — задают идеально упругий отскок (коэффициент 1).
* velocityY: 50 — устанавливает начальную вертикальную скорость для каждого объекта группы.
Метод createMultiple позволяет создать сразу несколько объектов с разными стартовыми позициями.
stars.createMultiple([
{ key: 'star', quantity: 6, setXY: { x: 450, y: 150, stepX: 50, stepY: 5 } },
// ... другие ряды звёзд
]);Коллайдер this.physics.add.collider(stars, platforms) заставляет звёзды отскакивать от платформ, используя заданные коэффициенты bounce.
Сбор предметов и управление персонажем
Взаимодействие игрока и звёзд обрабатывается через overlap, так как нам нужно не физическое отталкивание, а логика сбора. При наложении объектов вызывается метод collectStar.
this.physics.add.overlap(this.player, stars, this.collectStar, null, this);
collectStar (player, star)
{
star.disableBody(true, true);
}Метод disableBody(true, true) отключает физическое тело звезды и скрывает её игровой объект (спрайт).
Управление в методе update() стандартно для платформеров: проверка нажатия клавиш курсора для движения по горизонтали и воспроизведение анимаций. Прыжок (setVelocityY) возможен только когда игрок стоит на полу (this.player.body.onFloor()).
if (up.isDown && this.player.body.onFloor())
{
this.player.setVelocityY(-300);
}Что попробовать дальше
Этот пример демонстрирует, как выйти за рамки базовой физики Arcade, управляя свойствами тел в реальном времени и создавая интерактивные реакции мира на действия игрока. Для экспериментов попробуйте: изменить callback в коллайдере с платформами, чтобы они не отключались, а, например, начинали падать; задать звёздам случайные начальные скорости; или создать цепную реакцию, где падающая платформа активирует следующую.