Концепция сцены в Phaser 3

В Phaser 3 сцена является фундаментальной единицей организации игрового процесса. Сцена представляет собой отдельный контекст, содержащий объекты, логику обновления, обработку ввода и визуальные элементы. Каждая сцена работает независимо, что позволяет эффективно структурировать игру на уровни, меню, заставки и игровые режимы.

Структура сцены

Сцена в Phaser 3 создаётся как класс, расширяющий Phaser.Scene. Основная структура включает:

class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        // Загрузка ресурсов
    }

    create() {
        // Инициализация объектов
    }

    update(time, delta) {
        // Логика обновления сцены
    }
}
  • constructor(config) – ключевой метод для задания уникального ключа сцены, необходимого для её управления.
  • preload() – этап загрузки ассетов: изображений, аудио, спрайт-листов, шрифтов.
  • create() – инициализация игровых объектов и настройка логики сцены после загрузки ресурсов.
  • update(time, delta) – основной цикл обновления, где time – текущее игровое время, а delta – разница между кадрами, используемая для плавного движения объектов.

Жизненный цикл сцены

Жизненный цикл сцены включает несколько ключевых событий:

  1. init(data) – вызывается перед preload. Используется для передачи данных между сценами.
  2. preload() – загрузка ресурсов.
  3. create() – создание игровых объектов и настройка взаимодействий.
  4. update(time, delta) – обновление логики сцены каждый кадр.
  5. shutdown() – вызывается при остановке сцены, освобождение ресурсов.
  6. destroy() – полное удаление сцены, очистка всех ссылок.

Эта последовательность позволяет управлять состоянием игры на высоком уровне, изолируя логику разных элементов.

Управление сценами

Phaser 3 предоставляет Scene Manager, который позволяет:

  • Запуск сцены:
this.scene.start('AnotherScene');
  • Добавление сцены без запуска:
this.scene.add('MenuScene', MenuScene);
  • Остановка сцены:
this.scene.stop('MainScene');
  • Пауза и возобновление:
this.scene.pause('MainScene');
this.scene.resume('MainScene');

Каждая сцена может взаимодействовать с другими через ключи сцены, передавая данные через объект data.

Множественные сцены и наложение

Phaser 3 поддерживает одновременную работу нескольких сцен:

  • Наложение (Overlay) – одна сцена поверх другой, часто используется для интерфейса или HUD.
this.scene.launch('HUDScene');
  • Параллельное выполнение – сцены могут обновляться независимо, каждая со своим циклом update.

Использование нескольких сцен позволяет строить сложные структуры игры без смешивания логики.

Передача данных между сценами

Данные передаются при запуске сцены или через Scene Manager:

this.scene.start('LevelScene', { level: 2, score: 500 });

В целевой сцене данные доступны через init(data):

init(data) {
    this.level = data.level;
    this.score = data.score;
}

Также можно использовать глобальные объекты this.registry для хранения данных между сценами.

Работа с событиями сцены

Phaser 3 использует систему событий для управления сценами:

  • scene.events.on(‘wake’, callback, context) – срабатывает при возобновлении сцены.
  • scene.events.on(‘sleep’, callback, context) – при приостановке.
  • scene.events.on(‘shutdown’, callback, context) – при остановке сцены.

События позволяют отслеживать изменения состояния и синхронизировать объекты.

Практическая организация

Рекомендации по структуре сцены:

  1. Разделять загрузку ресурсов (preload) и создание объектов (create).
  2. Использовать update исключительно для логики, связанной с обновлением объектов.
  3. Передавать данные через init или Scene Manager, избегая глобальных переменных.
  4. Для интерфейса создавать отдельные сцены с наложением на игровую сцену.
  5. Использовать события для синхронизации и управления состоянием.

Ключевые преимущества концепции сцен

  • Модульность – каждая сцена изолирована, упрощает тестирование и отладку.
  • Гибкость – легкая смена уровней и игровых режимов.
  • Управление ресурсами – сцены загружают и очищают свои ресурсы, снижая нагрузку на память.
  • Параллельная работа – несколько сцен могут одновременно обрабатывать логику и рендер, например, игру и интерфейс.

Взаимодействие с объектами и таймерами

Сцена управляет всеми игровыми объектами и таймерами:

this.add.sprite(400, 300, 'player');
this.time.addEvent({
    delay: 1000,
    callback: () => console.log('Таймер сработал'),
    loop: true
});
  • this.add – создание визуальных объектов.
  • this.physics – работа с физикой.
  • this.time – планирование событий и анимаций.

Таким образом, сцена становится полноценной средой, где управляется весь игровой процесс.

Оглавление