Поворот: angle, rotation

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

Свойство angle

  • Единицы измерения: градусы.
  • Направление вращения: положительные значения вращают объект по часовой стрелке, отрицательные — против часовой стрелки.
  • Пример использования:
let sprite = this.add.sprite(400, 300, 'player');
sprite.angle = 45; // поворот на 45 градусов по часовой стрелке
sprite.angle += 15; // добавление ещё 15 градусов

  • Особенности:

    • angle всегда автоматически нормализуется в диапазоне от -180 до 180 градусов.
    • Удобно использовать при необходимости работы с углами в привычных единицах измерения, например для UI или расчётов траекторий.

Свойство rotation

  • Единицы измерения: радианы.
  • Направление вращения совпадает с angle: положительные значения — по часовой стрелке.
  • Пример использования:
let sprite = this.add.sprite(400, 300, 'player');
sprite.rotation = Math.PI / 4; // поворот на 45 градусов
sprite.rotation += Math.PI / 6; // добавление ещё 30 градусов

  • Особенности:

    • Полезно при работе с тригонометрическими функциями (Math.sin, Math.cos), которые используют радианы.
    • rotation может принимать любое значение без автоматической нормализации, что позволяет делать плавные непрерывные анимации вращения.

Взаимосвязь angle и rotation

Свойства связаны формулой:

[ = ]

и обратно:

[ = ]

Это означает, что изменение одного свойства автоматически отражается на другом. Например:

sprite.angle = 90;
console.log(sprite.rotation); // 1.5707963267948966 радиан (π/2)

Центр вращения и pivot

По умолчанию вращение происходит вокруг центра объекта. Phaser позволяет изменять точку вращения с помощью свойства origin:

sprite.setOrigin(0, 0); // вращение вокруг верхнего левого угла
sprite.setOrigin(0.5, 0.5); // вращение вокруг центра (по умолчанию)
  • Значения от 0 до 1 задают относительное смещение внутри объекта.
  • Изменение origin важно для создания эффекта вращения вокруг нестандартной точки, например для стрелок или вращающихся платформ.

Плавная анимация вращения

Phaser поддерживает анимацию свойств с помощью tweens, включая angle и rotation:

this.tweens.add({
    targets: sprite,
    angle: 360,
    duration: 2000,
    repeat: -1
});
  • В этом примере объект будет непрерывно вращаться по часовой стрелке.
  • При работе с rotation формула аналогична:
this.tweens.add({
    targets: sprite,
    rotation: Math.PI * 2,
    duration: 2000,
    repeat: -1
});

Вращение и физика

Если объект участвует в системе физики Phaser (Arcade, Matter), важно учитывать:

  • В Arcade Physics свойство angle влияет только на визуальное отображение. Для физического вращения используется body.rotation.
  • В Matter.js вращение контролируется через body.setAngle() или body.setAngularVelocity():
sprite.body.setAngle(Math.PI / 4);
sprite.body.setAngularVelocity(0.05); // постоянная скорость вращения

Расчёт направления движения через angle и rotation

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

let speed = 200;
sprite.x += Math.cos(sprite.rotation) * speed * delta;
sprite.y += Math.sin(sprite.rotation) * speed * delta;
  • Используется rotation в радианах, так как функции Math.cos и Math.sin ожидают радианы.
  • Для angle необходимо предварительно преобразовать градусы в радианы:
let rad = Phaser.Math.DegToRad(sprite.angle);
sprite.x += Math.cos(rad) * speed * delta;
sprite.y += Math.sin(rad) * speed * delta;

Практические советы

  • Для интерфейсных элементов и визуальных поворотов удобнее использовать angle.
  • Для физических объектов, движения и тригонометрических вычислений — rotation.
  • Изменение origin критично для нестандартных точек вращения.
  • Анимация вращения через tweens позволяет создавать плавные эффекты без ручного обновления каждого кадра.

Эти инструменты позволяют точно контролировать ориентацию объектов в 2D-сцене, комбинировать визуальные эффекты и физическое поведение, создавая динамичные и отзывчивые игры на Phaser.

Оглавление