Phaser.js: всё об играх и разработке

О чем этот пример

При разработке игр часто возникает необходимость управлять порядком отрисовки сцен. Например, вы хотите, чтобы фоновый слой внезапно стал передним планом для драматического эффекта. Phaser 3 предоставляет для этого простой, но мощный метод `swapPosition`. В этой статье мы разберем, как работает этот метод на практическом примере, и объясним, почему это полезно для управления визуальной иерархией в вашей игре.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Background extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'background', active: true });
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        this.face = this.add.image(-10, 300, 'face');
    }
}

class Demo extends Phaser.Scene
{
    constructor ()
    {
        super({ key: 'demo', active: true });
    }

    preload ()
    {
        // this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('arrow', 'assets/sprites/longarrow.png');
    }

    create ()
    {
        this.arrow = this.add.image(400, 300, 'arrow').setOrigin(0, 0.5);

        this.input.once('pointerdown', function ()
        {

            this.scene.swapPosition('background');

        }, this);
    }

    update (time, delta)
    {
        this.arrow.rotation += 0.01;
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'phaser-example',
    scene: [ Background, Demo ]
};

const game = new Phaser.Game(config);

Суть метода `swapPosition`

Метод swapPosition принадлежит менеджеру сцен (this.scene) и позволяет моментально поменять местами две активные сцены в списке рендеринга. Это влияет на порядок, в котором сцены отрисовываются на холсте: сцена, которая была "позади", может оказаться "спереди", и наоборот.

В отличие от перезапуска сцены или сложных манипуляций с видимостью, swapPosition выполняет эту операцию мгновенно и без побочных эффектов для состояния сцен. Это идеально для визуальных трюков, переключения интерфейсов или динамического изменения слоев игры.

Анализ кода: структура сцен

В примере создаются две сцены: Background и Demo. Обратите внимание на параметр active: true в их конструкторах. Это ключевой момент — обе сцены активны и запущены одновременно.

Сцена Background загружает изображение лица и размещает его частично за левым краем экрана.

this.face = this.add.image(-10, 300, 'face');

Сцена Demo загружает спрайт стрелки, размещает его в центре и задает точку вращения (setOrigin). В ее методе update стрелка постоянно вращается, визуализируя активность сцены.

this.arrow = this.add.image(400, 300, 'arrow').setOrigin(0, 0.5);
this.arrow.rotation += 0.01;

Изначально, так как Background указана первой в массиве сцен конфигурации, она отрисовывается первой, а сцена Demo — поверх нее. Поэтому мы видим вращающуюся стрелку на фоне изображения лица.

Механика переключения

Взаимодействие с игрой происходит в сцене Demo. В ее методе create устанавливается обработчик однократного нажатия указателя (клика или касания).

this.input.once('pointerdown', function ()
{
    this.scene.swapPosition('background');
}, this);

При срабатывании события вызывается this.scene.swapPosition('background'). Система находит активную сцену с ключом 'background' и меняет ее позицию в списке рендеринга с позицией текущей сцены ('demo').

После этого вызова порядок отрисовки инвертируется. Сцена Demo уходит на задний план, а сцена Background выходит на передний. Визуально это выглядит так, будто неподвижное черно-белое лицо резко "перекрывает" вращающуюся стрелку.

Конфигурация игры и важные нюансы

Обе сцены передаются в массив при создании экземпляра игры. Важен их порядок в этом массиве — он определяет начальный порядок слоев (z-index).

scene: [ Background, Demo ]

Важное ограничение метода swapPosition: он работает только между **активными** сценами. Сцена должна быть запущена (не находиться в состоянии сна или ожидания). В нашем примере это обеспечено параметром active: true. Если бы одна из сцен была неактивна, вызов метода не дал бы эффекта.

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

Что попробовать дальше

Метод swapPosition — это ваш инструмент для мгновенного и эффективного управления слоями в Phaser 3. Он открывает простор для экспериментов: попробуйте использовать его для создания эффекта "всплывающего" фона в головоломке, резкой смены планов в визуальной новелле или для переключения сложных интерфейсных панелей в стратегической игре. Вы можете вызывать его по таймеру, при достижении определенного счета или в ответ на другие игровые события, чтобы добавить динамики в визуальное представление вашего проекта.