О чем этот пример
В сложных играх часто возникает необходимость разделить игровую логику и пользовательский интерфейс на разные сцены. Это улучшает архитектуру и упрощает поддержку кода. Однако перед разработчиком встаёт вопрос: как эффективно обмениваться данными, например, счётом или количеством жизней, между этими независимыми сценами? В этой статье мы рассмотрим мощный встроенный механизм Phaser — Game Registry. С его помощью вы сможете создавать реактивные связи между сценами, где обновление данных в одной сцене автоматически отражается в другой, без прямых ссылок и жёстких связей.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class SceneA extends Phaser.Scene {
constructor ()
{
super('GameScene');
this.score = 0;
this.lives = 6;
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/skies/sky4.png');
this.load.image('crate', 'assets/sprites/crate.png');
}
create ()
{
// Store the score and lives in the Game Registry
this.registry.set('score', this.score);
this.registry.set('lives', this.lives);
this.add.image(400, 300, 'bg');
for (let i = 0; i < 64; i++)
{
let x = Phaser.Math.Between(0, 800);
let y = Phaser.Math.Between(0, 600);
let box = this.add.image(x, y, 'crate').setInteractive();
if (i % 2)
{
box.setTint(0xff0000);
}
}
this.input.on('gameobjectup', this.clickHandler, this);
}
clickHandler (pointer, box)
{
if (this.lives === 0)
{
return;
}
// Disable our box
box.input.enabled = false;
box.setVisible(false);
// If the box was tinted red, you lose a life
if (box.tintTopLeft === 16711680)
{
this.lives--;
this.registry.set('lives', this.lives);
}
else
{
this.score++;
this.registry.set('score', this.score);
}
}
}
class SceneB extends Phaser.Scene {
constructor ()
{
super({ key: 'UIScene', active: true });
this.scoreText;
this.livesText;
}
create ()
{
// Our Text object to display the Score
this.scoreText = this.add.text(10, 10, 'Score: 0', { font: '32px Arial', fill: '#000000' });
this.livesText = this.add.text(10, 48, 'Lives: 6', { font: '32px Arial', fill: '#000000' });
// Check the Registry and hit our callback every time the 'score' value is updated
this.registry.events.on('changedata', this.updateData, this);
}
updateData (parent, key, data)
{
if (key === 'score')
{
this.scoreText.setText('Score: ' + data);
}
else if (key === 'lives')
{
this.livesText.setText('Lives: ' + data);
}
}
}
let config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: [ SceneA, SceneB ]
};
let game = new Phaser.Game(config);
Что такое Game Registry?
Game Registry (this.registry) — это глобальное хранилище данных уровня игры. Это простой объект типа «ключ-значение», доступный из любой сцены. Его главное преимущество — система событий. Вы можете подписаться на изменение любого значения в реестре, что делает его идеальным инструментом для межсценного взаимодействия.
В отличие от передачи данных через параметры при запуске сцены, реестр позволяет динамически обновлять данные в реальном времени, создавая реактивную архитектуру.
Сцена А: Игровой мир и логика
Первая сцена (GameScene) отвечает за игровой процесс. В её конструкторе инициализируются начальные значения очков и жизней. В методе create() эти значения сохраняются в реестр, создавая их централизованные копии.
// Store the score and lives in the Game Registry
this.registry.set('score', this.score);
this.registry.set('lives', this.lives);Затем сцена создаёт множество интерактивных ящиков. Каждый чётный ящик окрашивается в красный цвет с помощью setTint(0xff0000). На все объекты вешается обработчик клика gameobjectup.
В функции clickHandler происходит основная логика: при клике ящик деактивируется и скрывается. Если его цвет был красным (проверка через свойство box.tintTopLeft === 16711680, что является числовым представлением красного цвета), игрок теряет жизнь. В противном случае — получает очко. После каждого изменения локальные переменные обновляются, и новое значение немедленно записывается обратно в реестр с помощью this.registry.set().
if (box.tintTopLeft === 16711680) {
this.lives--;
this.registry.set('lives', this.lives); // Обновляем значение в реестре
} else {
this.score++;
this.registry.set('score', this.score); // Обновляем значение в реестре
}Сцена B: Реактивный пользовательский интерфейс
Вторая сцена (UIScene) активна сразу (active: true) и отвечает за отображение HUD. В методе create() она создаёт текстовые объекты для показа счёта и жизней.
Ключевой момент — подписка на события реестра. Слушатель changedata срабатывает каждый раз, когда любое значение в реестре изменяется с помощью метода .set().
// Подписываемся на событие обновления данных в реестре
this.registry.events.on('changedata', this.updateData, this);Функция-обработчик updateData получает три аргумента: родительский объект, ключ изменённых данных и новое значение. Она проверяет ключ и обновляет соответствующий текстовый элемент.
updateData (parent, key, data) {
if (key === 'score') {
this.scoreText.setText('Score: ' + data); // Реактивно обновляем текст
} else if (key === 'lives') {
this.livesText.setText('Lives: ' + data); // Реактивно обновляем текст
}
}Таким образом, UI-сцена ничего не знает об игровой сцене. Она просто реагирует на изменения в глобальном хранилище данных.
Настройка игры и запуск сцен
Обе сцены передаются в конфигурацию игры в массиве scene. Порядок в массиве не критичен для работы реестра, но важен для порядка отрисовки. Сцена, объявленная с параметром active: true, запустится сразу.
let config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
scene: [ SceneA, SceneB ] // Обе сцены добавлены в игру
};
let game = new Phaser.Game(config);При таком подходе сцены работают параллельно и независимо, связываясь только через общий реестр.
Что попробовать дальше
Game Registry в Phaser — это элегантное и мощное решение для обмена данными между сценами. Оно позволяет создавать чистую, слабосвязанную архитектуру, где сцены не зависят друг от друга напрямую.
**Идеи для экспериментов:**
1. Реализуйте систему бустеров или временных бонусов, которые также записываются в реестр, а UI отображает их таймер.
2. Создадите третью сцену (например, экран паузы или меню), которая также будет читать данные из реестра и, возможно, приостанавливать игру, управляя специальным флагом isPaused в this.registry.
3. Используйте реестр для хранения конфигурации игры (сложность, настройки звука), чтобы разные сцены (меню, игра, настройки) могли её изменять и читать.