Цепочка трансформаций в иерархии

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

Ключевые свойства, влияющие на трансформацию:

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

Порядок применения трансформаций

PixiJS применяет трансформации в строгой последовательности:

  1. Сдвиг по точке pivot – смещение локальной системы координат относительно центра или указанной точки.
  2. Масштабирование (scale) – изменение размеров относительно pivot.
  3. Сдвиг (position) – перемещение объекта в родительской системе координат.
  4. Поворот (rotation) – вращение вокруг pivot после масштабирования и сдвига.

Эта последовательность имеет критическое значение: изменение порядка приведет к совершенно иному визуальному результату.

Свойство pivot и его роль

pivot определяет точку, вокруг которой объект будет вращаться и масштабироваться. Значение по умолчанию – (0, 0), что соответствует верхнему левому углу объекта.

Пример использования:

const sprite = PIXI.Sprite.from('character.png');
sprite.position.set(200, 150);
sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.rotation = Math.PI / 4;
app.stage.addChild(sprite);

В этом примере объект вращается вокруг своего центра, а не угла, что обеспечивает естественное движение.

Наследование трансформаций

Дочерние объекты автоматически наследуют все трансформации родителя. Если родитель повернется на 45°, все дети повернутся на тот же угол относительно позиции родителя. Аналогично работает масштабирование:

const container = new PIXI.Container();
container.scale.set(2, 2); // увеличиваем контейнер вдвое

const child = PIXI.Sprite.from('icon.png');
child.position.set(50, 50);

container.addChild(child);
app.stage.addChild(container);

Здесь child визуально будет вдвое больше и смещён на (100, 100) в глобальной системе координат.

Преобразование координат между локальной и глобальной системами

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

  • toLocal(point, from) – преобразует точку из координатного пространства from в локальные координаты объекта.
  • toGlobal(point) – преобразует локальную точку объекта в глобальные координаты сцены.

Пример:

const globalPoint = child.toGlobal(new PIXI.Point(0, 0));
const localPoint = child.toLocal(globalPoint, app.stage);

Использование этих методов необходимо при реализации перетаскивания, анимаций и коллизий.

Цепочка трансформаций и её визуальное влияние

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

Формула для глобальной позиции:

globalPosition = parentGlobalPosition + (localPosition * parentScale) rotated by parentRotation

Для сложных анимаций важно учитывать:

  • Поворот родителя изменяет ориентацию всех потомков.
  • Масштаб родителя влияет на размеры и перемещения детей.
  • Изменение pivot родителя сдвигает центр всех дочерних объектов.

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

  1. Сценические группы: персонажи с экипировкой, интерфейсные панели, эффекты частиц.
  2. Анимации: вращение колеса, движение транспорта с пассажирами, цепочки скелетной анимации.
  3. Интерактивность: обработка кликов и перетаскивания в сложных иерархиях.

Оптимизация работы с иерархией

  • Минимизировать уровни вложенности: каждый уровень добавляет вычислительную нагрузку на рендер.
  • Использовать cacheAsBitmap: для статических сложных контейнеров это ускоряет рендеринг.
  • Регулировать pivot и anchor: корректное размещение точек поворота упрощает анимацию и избегает лишних пересчетов.

Свойство transform и матрицы

Каждый DisplayObject имеет объект transform, содержащий localTransform и worldTransform — матрицы преобразования.

  • localTransform – отражает трансформацию относительно родителя.
  • worldTransform – глобальная матрица, итоговое положение объекта на сцене.

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

const matrix = new PIXI.Matrix();
matrix.translate(100, 50);
matrix.rotate(Math.PI / 6);
child.transform.setFromMatrix(matrix);

Использование матриц особенно полезно для игр с физикой, скелетной анимацией и пользовательскими эффектами.

Свойство parent и обход иерархии

Каждый объект знает своего родителя через свойство parent. Это позволяет:

  • Подниматься по иерархии для получения глобальной позиции.
  • Менять родителя через addChild/removeChild, перемещая объекты между контейнерами.
  • Реализовывать сложные и динамические сцены с множественными уровнями вложенности.
container.removeChild(child);
anotherContainer.addChild(child);

В этом случае все глобальные координаты пересчитываются автоматически.

Особенности анимации через цепочку трансформаций

  • При анимации родителя все потомки анимируются синхронно.
  • Анимация pivot у родителя может создавать необычные визуальные эффекты для детей.
  • При анимации нескольких уровней рекомендуется контролировать порядок трансформаций для предсказуемого результата.

Использование Tween-библиотек (например, GSAP) в сочетании с иерархией PixiJS позволяет создавать плавные и реалистичные анимации.

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

Оглавление