Поворот и свойство angle

В PixiJS каждая графическая сущность, будь то Sprite, Container или Graphics, обладает свойством angle, которое отвечает за вращение объекта вокруг его точки привязки (pivot). Поворот задаётся в градусах, а не в радианах, что упрощает визуальное позиционирование объектов.

const sprite = PIXI.Sprite.from('character.png');
sprite.angle = 45; // поворот на 45 градусов по часовой стрелке

Свойство angle работает напрямую с внутренним свойством rotation, где поворот хранится в радианах. В PixiJS это реализовано через геттер и сеттер:

  • angle — удобство для человека, градусы.
  • rotation — низкоуровневое свойство, радианы, точное для вычислений.
console.log(sprite.rotation); // 0.7853981633974483 ~ 45° в радианах

Положение точки вращения (pivot)

Точка, вокруг которой происходит вращение, по умолчанию находится в левом верхнем углу объекта (0,0). Для более естественного вращения, например, вокруг центра спрайта, нужно задать pivot:

sprite.pivot.set(sprite.width / 2, sprite.height / 2);
sprite.angle = 90; // объект повернётся вокруг центра

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

Связь angle и rotation

angle — это просто интерфейс к rotation:

sprite.angle = 180;
console.log(sprite.rotation); // 3.141592653589793

При присвоении значения angle автоматически пересчитывается rotation в радианы:

rotation = angle * Math.PI / 180

Обратное преобразование:

angle = rotation * 180 / Math.PI

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

Вращение при анимации

Для плавного вращения объектов в PixiJS чаще используют свойство angle внутри игрового цикла или через библиотеку анимации (например, GSAP). Пример поворота спрайта на 1 градус за кадр:

app.ticker.add(() => {
    sprite.angle += 1;
});

При таком подходе angle накапливается, и объект совершает непрерывное вращение.

Ограничения и особенности

  • Значения angle могут быть положительными и отрицательными; отрицательные значения поворачивают объект против часовой стрелки.
  • angle не нормализуется автоматически. Значение 370° эквивалентно 10°, но в свойстве останется 370. Для нормализации можно использовать:
sprite.angle = sprite.angle % 360;
  • При трансформации нескольких объектов в иерархии вращение родителя влияет на дочерние объекты. Установка pivot и position дочернего объекта позволяет создать сложные эффекты вращения.

Взаимодействие с другими трансформациями

Поворот через angle комбинируется с scale и position:

sprite.scale.set(2, 2); // увеличение в 2 раза
sprite.position.set(100, 100); // смещение на сцене
sprite.angle = 45; // вращение

PixiJS применяет трансформации в порядке: scale → rotation → position, что важно учитывать при сложной анимации и позиционировании объектов.

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

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

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

Оглавление