Концепция графа отображения (display list)

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

Основные элементы графа отображения

  1. DisplayObject Базовый класс для всех визуальных элементов. Обеспечивает:

    • Свойства позиционирования (x, y)
    • Масштабирование (scale.x, scale.y)
    • Вращение (rotation)
    • Альфа-прозрачность (alpha)
    • Видимость (visible)

    Все объекты в сцене, будь то текстуры, спрайты или контейнеры, наследуют DisplayObject.

  2. Sprite Представляет собой графический объект, основанный на текстуре. Основные особенности:

    • Быстрое отображение изображений
    • Поддержка трансформаций и фильтров
    • Возможность интерактивного взаимодействия
    const sprite = PIXI.Sprite.from('image.png');
sprite.x = 100;
sprite.y = 150;
sprite.scale.set(0.5, 0.5);

  3. Container Контейнер используется для группировки объектов, формируя ветви графа отображения. Он позволяет:

    • Управлять несколькими объектами как одним целым
    • Применять общие трансформации к дочерним элементам
    • Создавать сложные сцены с вложенной структурой
    const container = new PIXI.Container();
container.addChild(sprite);
container.x = 50;
container.y = 50;

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

    const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
container.addChild(graphics);

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

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

Пример комбинированной трансформации:

const parent = new PIXI.Container();
parent.x = 100;
parent.y = 100;

const child = new PIXI.Sprite.from('icon.png');
child.x = 50;
child.y = 50;

parent.addChild(child);
// Фактическая позиция child на сцене будет (150, 150)

Рендеринг и порядок отображения

  • Порядок добавления дочерних объектов в контейнер определяет порядок отрисовки: первый добавленный объект оказывается снизу, последний — поверх остальных.
  • Для изменения порядка без удаления объектов используется метод setChildIndex:
container.setChildIndex(sprite, 0); // перемещает sprite на задний план
  • Вложенные контейнеры создают сложные слои, где каждая ветвь обрабатывается рекурсивно.

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

Все объекты графа отображения могут быть интерактивными при установке свойства interactive = true. События, такие как click, pointerdown или pointermove, распространяются по иерархии графа и учитывают вложенные трансформации.

sprite.interactive = true;
sprite.on('pointerdown', () => {
    console.log('Sprite нажат');
});

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

Фильтры и маски

  • Фильтры применяются к контейнерам и спрайтам, влияя на всех дочерних объектов:
sprite.filters = [new PIXI.filters.BlurFilter()];
  • Маски ограничивают видимость содержимого контейнера:
const mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawCircle(75, 75, 50);
mask.endFill();

container.mask = mask;

Маски наследуются, и вложенные объекты отображаются только внутри заданной области.

Оптимизация графа отображения

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

Итоговая структура сцены

PixiJS строит сцену как древовидный граф объектов, где каждый объект:

  • Имеет родителя и ноль или больше дочерних объектов
  • Наследует трансформации родителя
  • Может быть интерактивным, фильтроваться и маскироваться

Эта архитектура обеспечивает гибкость в построении сцен, от простых спрайтов до сложных многослойных интерфейсов и анимаций.

Оглавление