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

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

Версия 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 spaceman = this.add.sprite(150, 300, 'spaceman');
        const bunny = this.add.sprite(400, 300, 'bunny');
        const elephant = this.add.sprite(650, 300, 'elephant');

        const layer = this.add.layer();

        layer.add([ spaceman, bunny, elephant ]);

        console.log(layer);

        //  And this one is not in the Layer
        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);

Что такое слой (Layer) в Phaser 3

Слой (Phaser.GameObjects.Layer) — это специальный игровой объект, выступающий в роли контейнера для других объектов. Его главная задача — позволить разработчику управлять группой объектов как единым целым. Это особенно полезно для: - Включения/выключения видимости группы (например, для скрытия интерфейса). - Применения общих трансформаций (позиция, вращение, масштаб). - Управления порядком отрисовки (глубиной) всей группы объектов относительно других элементов сцены. - Организации кода и логической группировки связанных элементов (например, все спрайты врагов или элементы HUD).

Важно: объекты, добавленные в слой, остаются также и в общем списке дочерних объектов сцены. Слой не «забирает» их у родителя, а добавляет себя в их цепочку отображения.

Создание слоя и добавление спрайтов

В методе create() сцены мы сначала создаем несколько спрайтов стандартным способом, используя метод this.add.sprite(). Каждый спрайт позиционируется по своим координатам.

Затем создается сам слой. После создания в него можно добавить массив уже существующих игровых объектов.

const spaceman = this.add.sprite(150, 300, 'spaceman');
const bunny = this.add.sprite(400, 300, 'bunny');
const elephant = this.add.sprite(650, 300, 'elephant');

const layer = this.add.layer();

layer.add([ spaceman, bunny, elephant ]);

Обратите внимание: спрайт с логотипом Phaser создается, но **не** добавляется в слой. Это демонстрирует, что объекты вне слоя управляются независимо.

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

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

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

При установке layer.visible = false все спрайты внутри слоя (космонавт, заяц, слон) мгновенно исчезают. При повторном клике и установке true — снова появляются. Спрайт с логотипом, не входящий в слой, остается видимым всегда. Это наглядно показывает практическую пользу слоев для быстрого скрытия/показа целых групп игровых элементов.

Отладка и внутренняя структура слоя

Для понимания того, что происходит «под капотом», в коде примера есть строка console.log(layer). Выводя слой в консоль браузера, вы можете исследовать его свойства.

Наиболее полезные из них: - layer.list: массив, содержащий все игровые объекты, добавленные в данный слой. - layer.length: количество объектов в слое. - layer.visible: текущее состояние видимости всего слоя.

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

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

Слои в Phaser 3 — это простой, но мощный инструмент для организации игровых объектов. Они позволяют эффективно управлять группами спрайтов, применяя к ним общие свойства и трансформации, что делает код чище, а логику — проще. **Идеи для экспериментов:** 1. Попробуйте изменить свойство layer.alpha для плавного появления/исчезновения группы. 2. Используйте layer.setScale(0.5) для одновременного масштабирования всех объектов в слое. 3. Поэкспериментируйте с глубиной: создайте два слоя и управляйте их свойством layer.depth, чтобы один слой отрисовывался поверх другого. 4. Добавляйте и удаляйте объекты из слоя динамически в процессе игры с помощью методов layer.add() и layer.remove().