Урок 19 SFML, поворот спрайта в сторону курсора

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

Видеоверсия: http://www.youtube.com/watch?v=MlrZuSDyhbY

На самом деле это очень обширное понятие и вы можете поворачивать таким образом спрайт не только к курсору. Примером того служит вражеская пушка, которая при виде игрока будет поворачиваться в его сторону и стрелять. Или зомби, которые будут преследовать игрока с помощью вектора движения (см прошлый урок sfml), а так же поворачиваться своим ртом в сторону игрока и наносить урон.  Вобщем эта база, скорее всего, вам пригодится и вы сможете её использовать не один раз.




Если вам нужен спрайт как у меня, то вот он:

heroForRotate

Я сделал его прозрачным при помощи функции маски цвета image.createMaskFromColor(Color(0, 0, 255));

В ф-ции int main объявим две переменные:

Есть готовая формула расчета нужного нам угла. Положим, что наш герой находится в начале координат. Из этого начала координат выходит вектор, он идет в сторону положения курсора. Нам надо знать угол между построенным вектором и положительной осью абсцисс (ОХ). После управления персонажем с помощью клика мыши напишем такой код:

Первые две строки-нахождение вектора который берет свое начало в точке где находится спрайт и конец в точке курсора.  Зачем мы считаем угол между этим вектором и осью абсцисс, выводим его в консоль чтобы понять как это устроено, а так же поворачиваем спрайт на этот угол. Проверьте, чтобы у спрайта в классе был написан центр (например в конце конструктора) таким образом:

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

Всё – если запустите,  то увидите, как спрайт поворачивается за курсором постоянно.

Что делать, если хочется его поворачивать в направлении его движения? Давайте перенесем этот код в правый клик мыши :

Теперь спрайт будет поворачиваться один раз сразу после того, как вы скажете куда ему надо идти. Во время ходьбы вы можете сделать какую-то анимацию героя, а во время нажатия какой-то звук или фразочку героя. Анимацию вы уже сможете сделать сами, а звуками засорять проект пока не будем. Он ведь будет дольше запускаться )) По этой же причине пока не работаем с продвинутыми картами. Нам сейчас нужен полигон, который поможет сделать игровую логику. Вот и всё.

Вот картинка, демонстрирующая нужный нам угол.

sfml урок 19 поворот спрайта
sfml поворот спрайта к курсору

Считайте желтую прямую на картинке вектором, который указывает направление, аналогичное стрелочки из спрайта. Сейчас угол равен 8,7. По часовой стрелке это положительный угол, против часовой – отрицательный. Если стрелка спрайта смотрит ровно вверх (значит там курсор мыши), то угол будет равен -90.

 

Файл main.cpp

 

Буду благодарен, если поделитесь:
SFML вопросы, прошу, задавайте на форуме.
  1. Огромное спасибо , на территории рунета так мало подробных уроков по библиотеке SFML.
    А таких подробных вообще нет. Скажите пожалуйста будет ли продолжение?
    Хотелось бы узнать о взаимодействии с врагами!

  2. Спасибо большое :)

    Продолжение всегда будет, потому что есть форум :-) А на форуме есть ещё раздел, где люди делятся своими решениями, которые похожи на мини-уроки. По хорошим и нужным решениям я буду писать потом уроки, когда закончу свои :)

    У меня мало времени на создание уроков и на один урок я трачу бывает по 6-8 часов (учитывая написание кода, объяснение и видеоверсию). Время, надеюсь, появится на этих выходных и я смогу выпустить урок по созданию врага и притяжение как в Марио.

    Взаимодействие с врагами, разработка искусственного интеллекта и прочего – всё будет, дело времени.. :-)

  3. Не подскажете, в чем может быть проблема если спрайт “смотрит” не на курсор а на 90 градусов от него влево. Пробовал задавать начальный поворот на 0 градусов, не помогло. Конечно, можно при передаче rotation как параметр плюсовать к нему эти 90 градусов, но хочется чтобы все изначально правильно было.

  4. Не понимаю эту строку. Я так понимаю формула акртангенса = (противолежащий катет / прилежащий катет), но как вы понимаете что точно 90 градусов треугольник будет и как вообще получится треугольник???

Добавить комментарий