О чем этот пример
В разработке игр часто требуется перезапускать уровень или всю игровую механику без перезагрузки страницы. Пример демонстрирует, как организовать полный цикл перезапуска физической сцены в Phaser 3 с использованием Arcade Physics. Вы научитесь корректно останавливать и запускать сцены, управлять физическими телами и создавать плавные переходы между игровыми состояниями, что критично для игр с повторяющимися уровнями или режимами рестарта.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Preloader extends Phaser.Scene
{
constructor ()
{
super({ key: 'preloader' });
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
this.load.image('buttonBG', 'assets/sprites/button-bg.png');
this.load.image('buttonText', 'assets/sprites/button-text.png');
this.load.image('ayu', 'assets/pics/ayu.png');
}
create ()
{
console.log('%c Preloader ', 'background: green; color: white; display: block;');
this.anims.create({ key: 'diamond', frames: this.anims.generateFrameNames('gems', { prefix: 'diamond_', end: 15, zeroPad: 4 }), repeat: -1 });
this.anims.create({ key: 'prism', frames: this.anims.generateFrameNames('gems', { prefix: 'prism_', end: 6, zeroPad: 4 }), repeat: -1 });
this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });
this.scene.start('mainmenu');
}
}
class MainMenu extends Phaser.Scene
{
constructor ()
{
super({ key: 'mainmenu' });
window.MENU = this;
}
create ()
{
console.log('%c MainMenu ', 'background: green; color: white; display: block;');
const bg = this.add.image(0, 0, 'buttonBG');
const text = this.add.image(0, 0, 'buttonText');
this.add.container(400, 300, [ bg, text ]);
bg.setInteractive();
bg.once('pointerup', function ()
{
this.scene.start('game');
}, this);
}
}
class Game extends Phaser.Scene
{
constructor ()
{
super({ key: 'game' });
window.GAME = this;
this.controls;
this.track;
this.text;
}
create ()
{
console.log('%c Game ', 'background: green; color: white; display: block;');
this.physics.world.setBounds(0, 0, 800 * 2, 600 * 2);
const spriteBounds = Phaser.Geom.Rectangle.Inflate(Phaser.Geom.Rectangle.Clone(this.physics.world.bounds), -100, -100);
// Create loads of random sprites
const anims = [ 'diamond', 'prism', 'ruby', 'square' ];
for (let i = 0; i < 50; i++)
{
const pos = Phaser.Geom.Rectangle.Random(spriteBounds);
const block = this.physics.add.sprite(pos.x, pos.y, 'gems');
block.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
block.setBounce(1).setCollideWorldBounds(true);
if (Math.random() > 0.5)
{
block.body.velocity.x *= -1;
}
else
{
block.body.velocity.y *= -1;
}
block.play(Phaser.Math.RND.pick(anims));
if (i === 0)
{
this.track = block;
}
}
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
this.add.text(0, 0, 'Use Cursors to scroll camera.\nClick to Quit', { font: '18px Courier', fill: '#00ff00' }).setScrollFactor(0);
this.text = this.add.text(400, 0, '', { font: '16px Courier', fill: '#00ff00' });
this.input.once('pointerup', function ()
{
this.scene.start('gameover');
}, this);
}
update (time, delta)
{
this.controls.update(delta);
this.text.setText([
`x: ${this.track.x}`,
`y: ${this.track.y}`
]);
}
}
class GameOver extends Phaser.Scene
{
constructor ()
{
super({ key: 'gameover' });
window.OVER = this;
}
create ()
{
console.log('%c GameOver ', 'background: green; color: white; display: block;');
this.add.sprite(400, 300, 'ayu');
this.add.text(300, 500, 'Game Over - Click to start restart', { font: '16px Courier', fill: '#00ff00' });
this.input.once('pointerup', function (event)
{
this.scene.start('mainmenu');
}, this);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
physics: {
default: 'arcade',
arcade: {
gravity: { y: 100 },
debug: true
}
},
scene: [ Preloader, MainMenu, Game, GameOver ]
};
const game = new Phaser.Game(config);
Структура сцен и их жизненный цикл
Проект использует четыре сцены: Preloader, MainMenu, Game и GameOver. Каждая сцена наследуется от Phaser.Scene и регистрируется в конфигурации игры. Ключевой метод this.scene.start() позволяет переключаться между сценами, полностью останавливая текущую и запуская новую.
this.scene.start('game');При вызове start() старая сцена уничтожается, включая все созданные в ней объекты, физические тела и слушатели событий. Это обеспечивает «чистый» рестарт без утечек памяти.
Настройка физического мира и создание объектов
В сцене Game инициализируется физический мир Arcade с увеличенными границами. Объекты создаются как физические спрайты с помощью this.physics.add.sprite, что автоматически добавляет им тело (body) для обработки коллизий и движения.
this.physics.world.setBounds(0, 0, 800 * 2, 600 * 2);
const block = this.physics.add.sprite(pos.x, pos.y, 'gems');
block.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
block.setBounce(1).setCollideWorldBounds(true);Методы setVelocity, setBounce и setCollideWorldBounds настраивают поведение тела. Важно: при рестарте сцены все эти объекты будут автоматически удалены системой Phaser.
Управление камерой и отслеживание объектов
Для камеры используется Phaser.Cameras.Controls.SmoothedKeyControl, позволяющий плавно перемещать и зумировать вид с помощью клавиш. Конфигурация контрола привязывается к клавишам-стрелкам и клавишам Q/E.
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);В методе update контрол обновляется, а координаты первого созданного спрайта (this.track) выводятся в текстовый объект. Это показывает, как можно отслеживать состояние объектов до рестарта.
Запуск анимаций и работа с атласами
В сцене Preloader анимации создаются из атласа gems. Метод this.anims.generateFrameNames автоматически генерирует кадры на основе имен фреймов в JSON-атласе.
this.anims.create({
key: 'diamond',
frames: this.anims.generateFrameNames('gems', {
prefix: 'diamond_',
end: 15,
zeroPad: 4
}),
repeat: -1
});Анимации глобально регистрируются в this.anims и доступны во всех сценах. В Game случайная анимация проигрывается через block.play(Phaser.Math.RND.pick(anims)).
Обработка пользовательского ввода для перезапуска
Переход между сценами инициируется по событию pointerup. В MainMenu клик по кнопке запускает Game, а в Game и GameOver клик по любому месту переключает на следующую сцену.
bg.once('pointerup', function () {
this.scene.start('game');
}, this);Использование once вместо on гарантирует, что слушатель сработает только один раз, что важно при рестартах, чтобы избежать дублирования обработчиков.
Что попробовать дальше
Пример показывает полноценный цикл перезапуска игровой сцены с физикой в Phaser 3. Все объекты, контролы и слушатели корректно удаляются при смене сцены, что предотвращает накладки. Для экспериментов попробуйте: добавить сохранение счета между рестартами через this.registry, реализовать постепенный рестарт без перехода в меню, или использовать this.scene.restart() для перезапуска текущей сцены без переключения.