Класс Container: основа иерархии объектов

Класс PIXI.Container в библиотеке PixiJS является фундаментальным строительным блоком для организации сцены и управления иерархией графических объектов. Он представляет собой контейнер, способный хранить дочерние элементы, такие как спрайты, графику, текст и другие контейнеры. Через контейнеры реализуется концепция сцены как дерева объектов, где каждый дочерний элемент наследует трансформации родителя.

Создание и базовое использование

Создать контейнер можно следующим образом:

const container = new PIXI.Container();

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

Пример добавления спрайтов в контейнер:

const sprite1 = PIXI.Sprite.from('image1.png');
const sprite2 = PIXI.Sprite.from('image2.png');

container.addChild(sprite1);
container.addChild(sprite2);

Метод addChild добавляет объект в контейнер, после чего он отображается на сцене относительно контейнера.

Основные свойства и методы

Свойства трансформации контейнера включают:

  • x, y — координаты позиции контейнера на сцене.
  • scale — объект с x и y, задающий масштаб по осям.
  • rotation — угол вращения в радианах.
  • pivot — точка поворота и масштабирования.
  • alpha — прозрачность контейнера (наследуется дочерними объектами).
  • visible — видимость контейнера и всех его детей.

Методы управления иерархией:

  • addChild(child) — добавляет один или несколько дочерних объектов.
  • addChildAt(child, index) — вставляет объект на конкретную позицию.
  • removeChild(child) — удаляет объект из контейнера.
  • removeChildren(beginIndex, endIndex) — удаляет несколько объектов сразу.
  • getChildAt(index) — возвращает дочерний объект по индексу.
  • getChildByName(name) — поиск дочернего объекта по имени.

Пример изменения позиции дочернего объекта через контейнер:

container.x = 100;
container.y = 50;

Все дочерние объекты автоматически смещаются вместе с контейнером.

Вложенные контейнеры

Контейнеры могут содержать другие контейнеры, создавая дерево сцены:

const parentContainer = new PIXI.Container();
const childContainer = new PIXI.Container();

parentContainer.addChild(childContainer);

const sprite = PIXI.Sprite.from('image.png');
childContainer.addChild(sprite);

В этом случае:

  • Позиция, масштаб и вращение родителя влияют на всех потомков.
  • Можно легко перемещать целые группы объектов как единое целое.
  • Вложенные контейнеры позволяют структурировать сложные сцены, например, уровни игры или интерфейсные панели.

Глубокая работа с детьми

Для динамических сцен часто требуется управлять массивом дочерних объектов:

container.children.forEach(child => {
    child.rotation += 0.01;
});

Контейнер предоставляет доступ к массиву children, что позволяет:

  • Перебирать все элементы.
  • Сортировать их по z-индексу или другим критериям.
  • Выполнять массовые изменения свойств.

z-индекс и порядок отрисовки

По умолчанию порядок отрисовки определяется порядком добавления дочерних объектов. Для управления поверхностью:

sprite1.zIndex = 10;
sprite2.zIndex = 5;

container.sortChildren();
  • Свойство zIndex определяет визуальный приоритет.
  • Метод sortChildren пересчитывает порядок отрисовки в контейнере на основе zIndex.

Интерфейс событий

Контейнеры поддерживают события, но сами по себе не интерактивны без включения:

container.interactive = true;

container.on('pointerdown', (event) => {
    console.log('Контейнер нажат');
});
  • Установка interactive = true позволяет обрабатывать события мыши и касаний.
  • События распространяются на дочерние объекты, если они интерактивны.

Оптимизация

Контейнеры могут влиять на производительность, особенно при большом количестве объектов:

  • Использовать Container для группировки объектов с общими трансформациями.
  • Минимизировать глубокую вложенность там, где это не нужно.
  • Для статичных сцен применять cacheAsBitmap:
container.cacheAsBitmap = true;

Это позволяет рендерить контейнер один раз в текстуру, экономя ресурсы при повторной отрисовке.

Применение в игровых и UI-сценах

Контейнеры активно применяются для:

  • Группировки игровых объектов (игровые персонажи, эффекты, объекты уровня).
  • Создания интерфейсов (панели, меню, кнопки).
  • Анимации целых блоков объектов через Tween или GSAP.
  • Разделения слоев сцены (фон, средний план, передний план).

Пример слоев с контейнерами:

const backgroundLayer = new PIXI.Container();
const gameLayer = new PIXI.Container();
const uiLayer = new PIXI.Container();

app.stage.addChild(backgroundLayer, gameLayer, uiLayer);

Каждый слой можно перемещать и изменять независимо, сохраняя общую структуру сцены.

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

Оглавление