Корневой контейнер stage

В PixiJS центральной точкой для организации всех визуальных элементов является корневой контейнер, традиционно называемый stage. Он представляет собой основной контейнер сцены, к которому присоединяются все спрайты, текстовые объекты, графические элементы и другие контейнеры. Управление сценой через stage обеспечивает централизованный контроль над рендерингом и иерархией объектов.

Создание и инициализация stage

В PixiJS корневой контейнер создается с помощью класса PIXI.Container. Обычно это делается один раз при инициализации приложения:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});

document.body.appendChild(app.view);

const stage = app.stage; // Корневой контейнер

Ключевые моменты:

  • app.stage — это экземпляр PIXI.Container.
  • Все визуальные элементы добавляются именно в этот контейнер или в его дочерние контейнеры.
  • stage автоматически управляется рендерером app.renderer.

Иерархия объектов

stage может содержать как спрайты (PIXI.Sprite), так и другие контейнеры (PIXI.Container). Такая организация позволяет создавать сложные сцены с вложенными уровнями.

const container = new PIXI.Container();
stage.addChild(container);

const sprite = PIXI.Sprite.from('character.png');
container.addChild(sprite);

Особенности:

  • Изменение позиции, масштаба или поворота контейнера влияет на все его дочерние элементы.
  • Можно динамически добавлять и удалять элементы, управляя их видимостью через visible или удаляя их из контейнера через removeChild.

Работа с позиционированием и трансформацией

Корневой контейнер обычно располагается в начале координат (0,0) канваса, но его дочерние элементы могут иметь произвольные координаты и трансформации. Важные свойства:

  • position — координаты контейнера (x, y).
  • scale — масштаб по осям x и y.
  • rotation — вращение в радианах.
  • pivot — точка поворота и масштабирования относительно локальных координат.
container.position.set(400, 300);
container.pivot.set(50, 50);
container.rotation = Math.PI / 4;

Управление порядком отображения

Порядок добавления объектов в stage определяет их z-индекс на экране. Объект, добавленный позже, будет отображаться выше ранее добавленного.

const sprite1 = PIXI.Sprite.from('background.png');
const sprite2 = PIXI.Sprite.from('foreground.png');

stage.addChild(sprite1);
stage.addChild(sprite2); // sprite2 будет сверху

Для динамического изменения порядка можно использовать:

  • addChildAt(child, index) — добавление на конкретный уровень.
  • setChildIndex(child, index) — изменение текущего уровня объекта.
  • swapChildren(child1, child2) — обмен позициями двух объектов.

Оптимизация рендеринга

Корневой контейнер играет ключевую роль в производительности сцены. Некоторые техники:

  • Группировка объектов: часто объекты с одинаковыми текстурами добавляют в один контейнер, чтобы уменьшить количество переключений текстур.
  • Использование visible: временно скрытые объекты не рендерятся, что снижает нагрузку.
  • Кеширование контейнеров: свойство cacheAsBitmap позволяет сохранять сложные контейнеры как один битмап, ускоряя рендеринг статических элементов.
container.cacheAsBitmap = true;

События и интерактивность

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

  • interactive = true — делает объект интерактивным.
  • on('pointerdown', callback) — обработка кликов или касаний.
  • Наследование событий работает по иерархии: если событие не обработано дочерним элементом, оно может всплыть к родителю.
stage.interactive = true;
stage.on('pointerdown', (event) => {
    console.log('Клик по сцене', event.data.global);
});

Работа с несколькими слоями

Часто сцены организуют в слои через дочерние контейнеры stage:

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

stage.addChild(backgroundLayer);
stage.addChild(mainLayer);
stage.addChild(uiLayer);

Преимущества слоя:

  • Простое управление порядком отображения.
  • Разделение логики (фон, игровые объекты, интерфейс).
  • Легкое применение глобальных эффектов на слой.

Интеграция с анимацией

stage является центральной точкой для анимации, используя цикл app.ticker:

app.ticker.add((delta) => {
    mainLayer.rotation += 0.01 * delta;
});
  • delta учитывает скорость обновления кадров.
  • Все дочерние элементы автоматически обновляются при рендеринге stage.

Использование масок и фильтров

Корневой контейнер может содержать дочерние объекты с масками и фильтрами, применяемыми к целым контейнерам:

const mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawRect(0, 0, 200, 200);
mask.endFill();

mainLayer.mask = mask;
stage.addChild(mask);
  • Маски применяются ко всем дочерним объектам контейнера.
  • Фильтры (filters) позволяют накладывать эффекты на группу элементов.

Особенности рендеринга

  • stage автоматически рендерится при вызове app.renderer.render(stage).
  • При использовании нескольких Application важно, что каждый stage связан со своим рендерером.
  • Изменение свойств stage влияет на всю сцену, что позволяет легко управлять глобальными эффектами или перемещением всей сцены.

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

Оглавление