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

При создании сложных игровых сцен с большим количеством объектов управление каждым из них по отдельности становится трудозатратным. Phaser предлагает простое, но мощное решение — Layer (слой). Layer — это контейнер для игровых объектов, который позволяет применять общие свойства и действия (например, видимость, позицию, масштаб) ко всем его дочерним элементам сразу. В этой статье мы разберем, как создать слой, добавить в него спрайты и централизованно управлять их состоянием.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('spaceman', 'assets/sprites/exocet_spaceman.png');
        this.load.image('bunny', 'assets/sprites/bunny.png');
        this.load.image('elephant', 'assets/sprites/elephant.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo-small.png');
    }

    create ()
    {
        const layer = this.add.layer();

        console.log(layer);

        //  These 3 sprites are in the Layer

        layer.add(this.make.sprite({ x: 150, y: 300, key: 'spaceman'}, false));
        layer.add(this.make.sprite({ x: 400, y: 300, key: 'bunny'}, false));
        layer.add(this.make.sprite({ x: 650, y: 300, key: 'elephant'}, false));

        //  And this one is not
        this.add.sprite(400, 50, 'logo');

        this.input.on('pointerdown', () => {

            layer.visible = !layer.visible;

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Создание и наполнение слоя

Создание слоя в Phaser выполняется с помощью метода this.add.layer(). После создания слой изначально пуст.

Чтобы добавить объекты в слой, используется метод layer.add(). В примере в слой добавляются три спрайта, созданные через фабрику this.make.sprite(). Это позволяет создать спрайт без немедленного добавления его на экран, а затем поместить его в контейнер — слой.

const layer = this.add.layer();

layer.add(this.make.sprite({ x: 150, y: 300, key: 'spaceman'}, false));
layer.add(this.make.sprite({ x: 400, y: 300, key: 'bunny'}, false));
layer.add(this.make.sprite({ x: 650, y: 300, key: 'elephant'}, false));

Четвертый спрайт (логотип) добавляется напрямую на сцену с помощью this.add.sprite(), поэтому он не является частью слоя и будет управляться независимо.

Централизованное управление видимостью

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

При клике мыши (pointerdown) значение layer.visible переключается на противоположное с помощью логического оператора НЕ (`!`). Это действие мгновенно скрывает или показывает все три спрайта, находящиеся в слое, одним вызовом.

this.input.on('pointerdown', () => {
    layer.visible = !layer.visible;
});

Спрайт с логотипом, не входящий в слой, остается на экране независимо от состояния слоя, что наглядно демонстрирует разницу между управлением группой объектов и одним объектом.

Практическое применение и отладка

Слои полезны не только для управления видимостью. Через слой можно также управлять положением (`x,y), масштабом (scale), углом поворота (angle`) и другими свойствами всей группы объектов.

Для отладки и понимания структуры созданного слоя в консоль выводится сам объект слоя.

console.log(layer);

Это позволяет в инструментах разработчика браузера изучить его свойства, такие как list (массив дочерних объектов) и length (их количество). Такой подход помогает убедиться, что объекты были добавлены корректно.

Сравнение Layer и других контейнеров

Важно понимать разницу между Layer и другими способами группировки, например, Group из физического модуля (this.physics.add.group).

* **Layer** — это объект для рендеринга и общего управления трансформациями (положение, видимость, масштаб). Он не предоставляет встроенной физической симуляции. * **Group** из Phaser.Physics.Arcade — это, в первую очередь, контейнер для управления физическими телами (проверка столкновений, перекрытие).

Выбор зависит от задачи. Если нужно просто сгруппировать статичные или анимированные спрайты для удобного скрытия/перемещения — используйте Layer. Если объекты должны сталкиваться по законам физики — создавайте Group.

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

Layer в Phaser — это эффективный инструмент для организации игровых объектов. Он упрощает код, позволяя управлять целыми группами спрайтов одной строкой. Для экспериментов попробуйте: 1. Изменить позицию всего слоя через layer.setX(100). 2. Добавить в слой разные типы объектов (текст, графику). 3. Создать вложенную структуру из нескольких слоев для сложной иерархии сцены.