Как реализовать поворот персонажа?

Question

[Ensiouel]

Предположим у меня есть персонаж, с 8 картинками, каждая из которых направлена в определенную сторону, то есть условимся:
Север, Запад, Юг, Восток
Северо-Запад, Юго-восток, Юго-запад и др
И у меня возник вопрос, как сделать так, что персонаж поворачивался в одну из сторон, относительно курсора мыши, то не сама картинка поворачивалась, а выбирался нужный тайл, в интернете не нашел, т.к не могу корректно задать запрос

Answer 1

[Владимир Проскурин]

Можно посчитать угол линии между персонажем и мышкой. Есть такая формула

Atan2(mouseY - playerY, mouseX - playerX) * 180 / Math.PI;

и теперь у вас есть угол от 0 до 360, можете менять спрайт в зависимости от значения этого угла.

Comments

[Ensiouel]

Но есть одно но, при переходе границы в 180 градусов угол становится отрицательным, есть ли способ отследить это

[Владимир Проскурин]

Ensiouel, просто прибавьте к результату число 180 (тогда когда мышка будет слева, угол будет равен нулю), или можно добавить вот такое условие (тогда начало будет справа).

if(angle < 0) {
    angle = 360 - (-angle);
}

https://jsfiddle.net/nfrgh8ke/

[Сергей Водаков]

Владимир Проскурин, много минусов

if(angle < 0) {
    angle = 360 + angle;
}

[Владимир Проскурин]

Ой, да. Зачем то.