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

В PixiJS порядок отрисовки определяется последовательностью добавления объектов в контейнер и их z-индексом. Каждый визуальный элемент, будь то Sprite, Graphics или Text, принадлежит к контейнеру (Container). Контейнеры могут быть вложенными, создавая иерархию сцены.

По умолчанию PixiJS отрисовывает объекты в порядке их добавления: первый добавленный элемент находится на заднем плане, последний — на переднем. Этот порядок можно изменять с помощью свойства zIndex, что позволяет гибко управлять слоями независимо от последовательности добавления в контейнер.

const sprite1 = new PIXI.Sprite(texture1);
const sprite2 = new PIXI.Sprite(texture2);

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

sprite1.zIndex = 2;
sprite2.zIndex = 1;

container.sortChildren(); // Пересортировка по zIndex

Ключевой момент: после изменения zIndex необходимо вызвать sortChildren(), иначе порядок визуально не изменится.

Свойство zIndex и его влияние

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

Особенности использования zIndex:

  • Работает только при вызове container.sortChildren().
  • Поддерживает отрицательные значения, что позволяет помещать объекты за базовым уровнем.
  • Не влияет на вложенные контейнеры напрямую; каждый контейнер сортирует своих детей независимо.
const bg = new PIXI.Sprite(bgTexture);
bg.zIndex = -1;

const player = new PIXI.Sprite(playerTexture);
player.zIndex = 5;

container.addChild(bg);
container.addChild(player);
container.sortChildren();

Иерархия контейнеров и порядок отрисовки

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

const uiLayer = new PIXI.Container();
uiLayer.zIndex = 10;

const gameLayer = new PIXI.Container();
gameLayer.zIndex = 1;

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

gameLayer.sortChildren();
uiLayer.sortChildren();
app.stage.sortChildren();

Примечание: для корректного отображения важно сортировать всех контейнеров сцены, если используется zIndex.

Псевдослои и оптимизация

Для крупных сцен часто используют псевдослои, когда объекты группируются по смыслу (фон, враги, игроки, эффекты, интерфейс) в отдельные контейнеры. Это облегчает управление порядком и повышает производительность:

  • Контейнер с фоном: zIndex = 0
  • Контейнер с врагами: zIndex = 1
  • Контейнер с игроком: zIndex = 2
  • Контейнер с интерфейсом: zIndex = 10

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

Взаимодействие с альфа-каналом и прозрачностью

PixiJS использует painter’s algorithm, поэтому объекты с прозрачностью могут накладываться визуально иначе, чем ожидается, если z-индексы не выставлены корректно. При работе с полупрозрачными элементами:

  • Объекты с alpha < 1 должны располагаться на верхних слоях.
  • Для сложных сцен с прозрачными частями рекомендуется заранее продумывать z-индексы.

Влияние фильтров и масок

Фильтры и маски создают новые рендер-пасс и могут изменять порядок визуального наложения:

  • Применение фильтра к контейнеру создаёт отдельный рендер-слой, и все дети этого контейнера рисуются в новом пространстве.
  • Маски ограничивают видимость объекта, но не меняют z-позицию за пределами контейнера.

Это важно учитывать при работе с эффектами постобработки или сложными визуальными сценами.

Практические советы по использованию zIndex

  1. Для динамически изменяющихся сцен сразу группировать объекты по слоям, чтобы минимизировать вызовы sortChildren().
  2. Для анимаций использовать zIndex вместо повторного удаления и добавления объектов в контейнер.
  3. Для сложных UI и игровых слоев держать высокие значения zIndex (например, 100+) для интерфейса, чтобы исключить случайное перекрытие.

Сводная таблица поведения zIndex

Свойство / Действие Эффект на отрисовку
addChild() Добавление в конец контейнера
zIndex (без sortChildren) Визуально не влияет
zIndex + sortChildren() Сортировка по значению zIndex
Отрицательные zIndex Объект перемещается за базовый слой
Вложенные контейнеры Сортируются отдельно, порядок родителя сохраняется
Альфа < 1 Может накладываться неправильно без правильного zIndex

Эффективное управление порядком отрисовки и z-индексом позволяет создавать сложные сцены в PixiJS с корректным наложением объектов, прозрачностью и фильтрами, обеспечивая оптимизацию и визуальную предсказуемость.

Оглавление