Жизненный цикл игры: boot, preload, create, update

Phaser — мощная библиотека для создания 2D-игр на JavaScript, построенная вокруг концепции жизненного цикла сцены. Понимание последовательности и назначения ключевых методов жизненного цикла позволяет управлять загрузкой ресурсов, инициализацией объектов и логикой игры.

Boot

Метод boot (или сцена начальной инициализации) отвечает за предварительную подготовку окружения игры. На этом этапе можно:

  • Настроить параметры масштабирования (scale), ориентацию и адаптацию к экрану.
  • Инициализировать глобальные переменные и объекты, которые будут использоваться в последующих сценах.
  • Подготовить обработчики событий, например, для изменения размера окна (resize) или ввода с клавиатуры и мыши.

Boot-сцена обычно не содержит визуальных объектов или ресурсов, она только задаёт структурные основы игры.

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

    preload() {
        // Здесь можно загрузить минимальные ассеты для экрана загрузки
        this.load.image('loadingBar', 'assets/loading.png');
    }

    create() {
        this.scene.start('PreloadScene');
    }
}

Ключевой момент: Boot-сцена всегда короткая и минималистичная, её цель — подготовка, а не сама игра.

Preload

Сцена preload отвечает за загрузку всех игровых ресурсов: текстур, спрайтов, звуков, шрифтов. Phaser предоставляет мощные методы для организации асинхронной загрузки с визуальной индикацией прогресса.

Основные методы загрузки:

  • this.load.image(key, url) — загрузка одиночного изображения.
  • this.load.spritesheet(key, url, config) — загрузка спрайт-листа с указанием ширины и высоты кадров.
  • this.load.audio(key, url) — загрузка звукового файла.
  • this.load.bitmapFont(key, textureURL, fontDataURL) — загрузка шрифтов для отрисовки текста.

Пример создания прогресс-бара:

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

    preload() {
        const progressBar = this.add.graphics();
        const progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(240, 270, 320, 50);

        this.load.on('progress', (value) => {
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
        });

        this.load.on('complete', () => {
            progressBar.destroy();
            progressBox.destroy();
        });

        this.load.image('player', 'assets/player.png');
        this.load.image('background', 'assets/background.png');
        this.load.audio('theme', 'assets/theme.mp3');
    }

    create() {
        this.scene.start('MainScene');
    }
}

Особенность preload: сцена блокирует выполнение до полной загрузки всех ресурсов, что предотвращает появление пустых объектов на экране.

Create

Метод create используется для инициализации игровых объектов и сцены после загрузки ресурсов. Здесь:

  • Создаются спрайты и группы (this.add.sprite, this.physics.add.group).
  • Настраиваются физические свойства (velocity, collideWorldBounds, gravity).
  • Добавляются анимации, таймеры и пользовательский интерфейс.
  • Можно запустить музыку и звуковые эффекты.

Пример создания спрайта игрока с физикой:

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

    create() {
        this.add.image(400, 300, 'background');

        this.player = this.physics.add.sprite(100, 450, 'player');
        this.player.setBounce(0.2);
        this.player.setCollideWorldBounds(true);

        this.cursors = this.input.keyboard.createCursorKeys();

        this.sound.play('theme', { loop: true });
    }
}

Важная особенность: create вызывается один раз, сразу после завершения preload. Все объекты создаются готовыми к взаимодействию.

Update

Метод update — это сердце игрового цикла, вызывается на каждом кадре игры (обычно 60 раз в секунду). Здесь реализуется логика движения, взаимодействия объектов, проверка столкновений и обработка ввода.

Пример управления игроком с помощью клавиш:

update() {
    if (this.cursors.left.isDown) {
        this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
        this.player.setVelocityX(160);
    } else {
        this.player.setVelocityX(0);
    }

    if (this.cursors.up.isDown && this.player.body.touching.down) {
        this.player.setVelocityY(-330);
    }
}

Особенности update:

  • Вызывается постоянно после метода create.
  • Подходит для всех динамических изменений: движения, анимации, проверки состояния игры.
  • Часто комбинируется с таймерами, событиями и логикой столкновений (this.physics.add.collider).

Взаимодействие сцен и жизненного цикла

Phaser поддерживает несколько сцен, каждая со своим циклом boot → preload → create → update. Сцены могут:

  • Переключаться (scene.start, scene.stop).
  • Запускаться параллельно (scene.launch).
  • Передавать данные между собой через параметры.

Пример передачи данных при переходе сцены:

this.scene.start('NextScene', { score: 100 });

В следующей сцене эти данные доступны через this.scene.settings.data.score.

Жизненный цикл boot → preload → create → update обеспечивает структурированную последовательность работы игры: подготовка среды, загрузка ресурсов, создание объектов и динамическая логика на каждом кадре. Понимание этого цикла позволяет строить масштабируемые и оптимизированные игры на Phaser с чёткой организацией сцен и ресурсов.

Оглавление