Точка трансформации pivot

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

Основные свойства

  1. pivot.x и pivot.y Определяют координаты точки трансформации относительно локальной системы координат объекта. По умолчанию pivot равен (0, 0), что соответствует верхнему левому углу объекта.

  2. position Свойство position задаёт положение объекта на сцене относительно его родителя. При изменении pivot положение визуально изменяется, так как центр трансформации смещается.

  3. anchor у спрайтов Для объектов типа PIXI.Sprite свойство anchor выполняет ту же роль, что и pivot, но его значения нормализованы от 0 до 1. Преобразование между anchor и pivot выглядит так:

    sprite.pivot.x = sprite.width * sprite.anchor.x;
sprite.pivot.y = sprite.height * sprite.anchor.y;

Изменение pivot

Прямое присваивание координат позволяет смещать центр трансформации:

const sprite = PIXI.Sprite.from('character.png');
sprite.pivot.set(sprite.width / 2, sprite.height / 2); // центр объекта
sprite.position.set(400, 300);
sprite.rotation = Math.PI / 4; // вращение вокруг нового центра

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

Влияние pivot на трансформации

  • Вращение (rotation) Вращение всегда происходит вокруг точки pivot. Если pivot не в центре, вращение создаёт эффект орбитального движения.

  • Масштабирование (scale) Масштабирование также происходит относительно pivot. Смещение pivot к краю объекта приведёт к изменению положения видимого центра при увеличении/уменьшении.

  • Комбинированные трансформации При одновременном изменении position, rotation и scale порядок операций имеет значение. PixiJS выполняет сначала масштабирование и вращение относительно pivot, а затем смещает объект по position.

Использование pivot в иерархии контейнеров

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

const container = new PIXI.Container();
const wheel = PIXI.Sprite.from('wheel.png');
wheel.pivot.set(wheel.width / 2, wheel.height / 2); // центр колеса
wheel.position.set(100, 100);
container.addChild(wheel);

wheel.rotation = Math.PI / 6; // вращение колеса вокруг центра

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

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

  1. Вращающиеся объекты Колёса, стрелки часов, вентиляторы — все элементы вращаются относительно центра, установленного через pivot.

  2. Анимации персонажей Для скелетной анимации pivot смещается к точкам сочленений (локоть, колено, плечо) для реалистичного движения.

  3. UI-элементы Кнопки и панели можно анимировать с эффектом “выдвижения” или “поворота” вокруг конкретной точки, используя pivot.

Особенности и ошибки

  • Если не учитывать pivot, визуальное положение объекта будет неожиданно смещаться при вращении или масштабировании.
  • Для спрайтов с заданным anchor менять pivot напрямую можно, но нужно помнить о пересчёте: pivot = width * anchor.x.
  • При анимации нескольких объектов с разными pivot важно корректно настроить иерархию контейнеров, чтобы локальные трансформации не конфликтовали.

Резюме работы с pivot

  • pivot — центр трансформаций: вращение, масштаб, смещение.
  • Для спрайтов удобнее использовать anchor, автоматически пересчитывающий pivot.
  • Любое вращение и масштабирование учитывает текущий pivot, что требует внимательного расчёта для сложных анимаций.
  • Правильная настройка pivot упрощает создание реалистичных движений и управление интерфейсом.

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

Оглавление