О чем этот пример
При создании игр с физикой Arcade в Phaser часто возникает необходимость контролировать взаимодействие объектов при столкновении. По умолчанию, два физических тела при столкновении отталкиваются друг от друга, что не всегда желательно. В этой статье мы разберем, как использовать метод `setPushable(false)` для создания объектов, которые невозможно сдвинуть, и как это можно применить для создания статичных препятствий или NPC.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
cursors;
currentPlayer;
player2;
player1;
preload ()
{
// this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
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.add.image(400, 300, 'sky');
const ground = this.physics.add.staticGroup();
ground.create(400, 568, 'ground').setScale(2).refreshBody();
this.player1 = this.physics.add.sprite(100, 450, 'dude').setBounce(0.2).setCollideWorldBounds(true);
this.player2 = this.physics.add.sprite(500, 450, 'dude').setTint(0xff0000).setBounce(0.2).setCollideWorldBounds(true);
this.player1.name = 'Purple';
this.player2.name = 'Red';
this.player2.setPushable(false);
this.currentPlayer = this.player1;
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
});
this.cursors = this.input.keyboard.createCursorKeys();
this.physics.add.collider(this.player1, ground);
this.physics.add.collider(this.player2, ground);
this.physics.add.collider(this.player1, this.player2);
// this.physics.add.collider(player2, player1);
window.body1 = this.player1.body;
window.physics = this.physics;
window.showit = false;
this.input.on('pointerdown', () =>
{
if (this.currentPlayer === this.player1)
{
this.currentPlayer = this.player2;
}
else
{
this.currentPlayer = this.player1;
}
}, this);
this.add.text(10, 10, 'Click to change character', { fontSize: '22px', fill: '#ecf0f1' });
}
update ()
{
if (this.cursors.left.isDown)
{
this.currentPlayer.setVelocityX(-160);
this.currentPlayer.anims.play('left', true);
}
else if (this.cursors.right.isDown)
{
this.currentPlayer.setVelocityX(160);
this.currentPlayer.anims.play('right', true);
}
else
{
this.currentPlayer.setVelocityX(0);
this.currentPlayer.anims.play('turn');
}
if (this.cursors.up.isDown && this.currentPlayer.body.touching.down)
{
this.currentPlayer.setVelocityY(-330);
window.showit = true;
}
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: true
}
},
scene: Example
};
const game = new Phaser.Game(config);
Зачем нужны неподвижные объекты?
В физическом движке Arcade столкновение двух динамических тел по умолчанию приводит к их взаимному отталкиванию. Это стандартное поведение, но иногда требуется его изменить. Например: - Создание массивных или закрепленных объектов (столбы, стены, скалы), которые игрок не может сдвинуть. - Реализация NPC или врагов, которые стоят на месте и не реагируют на толчки от игрока. - Оптимизация: отключение ненужных расчетов физики для объектов, которые не должны двигаться.
В примере у нас два спрайта игрока. Один из них (player2) помечен как неподвижный. Это означает, что player1 может сталкиваться с ним, но не сможет его сдвинуть.
Настройка сцены и создание объектов
В методе create() загружаются ассеты и настраивается физический мир. Ключевой момент — создание двух физических спрайтов и настройка их свойств.
this.player1 = this.physics.add.sprite(100, 450, 'dude').setBounce(0.2).setCollideWorldBounds(true);
this.player2 = this.physics.add.sprite(500, 450, 'dude').setTint(0xff0000).setBounce(0.2).setCollideWorldBounds(true);Оба спрайта имеют отскок (setBounce) и привязаны к границам мира (setCollideWorldBounds). player2 дополнительно подкрашивается красным цветом с помощью setTint для визуального различия.
Следующая строка — самое важное:
this.player2.setPushable(false);Метод setPushable(false) применяется к player2. Это означает, что данный объект не будет реагировать на импульсы от столкновений с другими динамическими телами в системе Arcade Physics. Он остается статичным с точки зрения толкания, но при этом все еще является динамическим телом, на которое действует гравитация и с которым можно сталкиваться.
Организация столкновений и управления
Для работы физики необходимо настроить коллайдеры. В примере созданы коллайдеры между игроками и землей, а также между двумя игроками.
this.physics.add.collider(this.player1, ground);
this.physics.add.collider(this.player2, ground);
this.physics.add.collider(this.player1, this.player2);Коллайдер this.physics.add.collider(this.player1, this.player2) обеспечивает обнаружение и реакцию на столкновение между двумя спрайтами. Из-за setPushable(false) на player2, столкновение будет обработано, но player1 не сможет сдвинуть красного персонажа.
Управление в игре переключается между двумя персонажами по клику мыши. Это реализовано через слушатель события pointerdown. В методе update() движение и анимация применяются только к currentPlayer — активному в данный момент персонажу.
if (this.cursors.left.isDown)
{
this.currentPlayer.setVelocityX(-160);
this.currentPlayer.anims.play('left', true);
}Таким образом, вы можете управлять любым из двух спрайтов, но физическое свойство pushable у player2 остается неизменным, независимо от того, кто находится под управлением.
Практические аспекты и отладка
В конфигурации игры включен режим отладки физики (debug: true). Это позволяет видеть хитбоксы (ограничивающие прямоугольники) всех физических тел, что незаменимо при настройке столкновений.
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: true
}
}Свойство pushable является особенностью Arcade Physics. Важно помнить:
- Оно влияет только на реакцию тела на импульсы от *других* тел. На объект по-прежнему действуют силы, заданные напрямую (например, setVelocity).
- Если оба тела в паре коллайдера имеют setPushable(false), они просто не будут сдвигаться друг относительно друга при столкновении.
- Это свойство можно динамически менять в runtime: someSprite.setPushable(true).
В исходном примере есть закомментированная строка // this.physics.add.collider(player2, player1);. Она не нужна, так как коллайдер между двумя телами создается один раз и является двусторонним.
Что попробовать дальше
Метод setPushable — это простой, но мощный инструмент для тонкой настройки физических взаимодействий в Phaser. Он позволяет создавать более разнообразный и предсказуемый игровой мир. Для экспериментов попробуйте:
1. Применить setPushable(false) к группе статических объектов, чтобы сделать их "тяжелыми".
2. Динамически менять это свойство в зависимости от игровых событий (например, враг становится неподвижным при атаке).
3. Создать головоломку, где игрок должен толкать одни объекты, обходя другие, которые сдвинуть нельзя.