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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const container = this.add.container(200, 200);

        const graphics = this.add.graphics();

        container.add(graphics);

        graphics.fillStyle(0xffff00, 1);

        //  Remember that the coordinates given here are now relative to those
        //  of the Container, not the screen
        graphics.fillRoundedRect(0, 0, 100, 100, 32);
    }
}

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

const game = new Phaser.Game(config);

Создание контейнера

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

Создается контейнер с помощью метода this.add.container(x, y), где `xиy` — это координаты его центра на игровом холсте (в мировых координатах).

const container = this.add.container(200, 200);

Добавление графики в контейнер

Объект Graphics используется для отрисовки примитивов: прямоугольников, кругов, линий. Сначала мы создаем экземпляр графики.

const graphics = this.add.graphics();

Затем, чтобы связать графику с контейнером, используем метод container.add(). Теперь graphics становится дочерним объектом container и будет отрисовываться относительно его позиции.

container.add(graphics);

Отрисовка в локальных координатах контейнера

Это самый важный момент. После добавления в контейнер система координат для объекта graphics меняется. Теперь точка (0, 0) на холсте графики соответствует центру самого контейнера, а не левому верхнему углу игрового экрана.

Сначала задаем стиль заливки. Затем рисуем прямоугольник со скругленными углами. Обратите внимание, что координаты (0, 0) и размеры (100, 100) задаются относительно контейнера.

graphics.fillStyle(0xffff00, 1);
graphics.fillRoundedRect(0, 0, 100, 100, 32);

В результате на экране появится желтый скругленный квадрат размером 100x100 пикселей, центр которого находится в точке (200, 200) мировых координат, так как именно там мы разместили контейнер.

Преимущества и практическое применение

Использование контейнера дает несколько преимуществ: 1. **Групповые трансформации**: Изменив позицию container с помощью container.setX(300), весь квадрат мгновенно переместится, сохраняя свое внутреннее расположение. 2. **Организация кода**: Логически связанные объекты группируются, что делает код чище. 3. **Производительность**: Контейнеры оптимизированы движком для отрисовки группы объектов.

Например, так можно легко создать сложную кнопку из графики и текста или персонажа, составленного из нескольких графических примитивов.

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

Контейнеры в Phaser — это фундаментальный инструмент для структурирования игровых объектов. Они позволяют работать с группами объектов как с единым целым, что упрощает код и логику взаимодействия. **Идеи для экспериментов:** 1. Добавьте в контейнер несколько разных фигур Graphics и текст, а затем анимируйте вращение или масштаб всего контейнера. 2. Создайте иерархию: поместите один контейнер внутрь другого и проследите за изменением системы координат. 3. Используйте контейнер для создания мини-карты или сложного элемента HUD, который нужно перемещать по экрану.