Поворот спрайта может пригодиться многим разработчикам. В этой статье расскажу про принцип поворота спрайта относительно координат курсора.
Видеоверсия: http://www.youtube.com/watch?v=MlrZuSDyhbY
На самом деле это очень обширное понятие и вы можете поворачивать таким образом спрайт не только к курсору. Примером того служит вражеская пушка, которая при виде игрока будет поворачиваться в его сторону и стрелять. Или зомби, которые будут преследовать игрока с помощью вектора движения (см прошлый урок sfml), а так же поворачиваться своим ртом в сторону игрока и наносить урон. Вобщем эта база, скорее всего, вам пригодится и вы сможете её использовать не один раз.
Если вам нужен спрайт как у меня, то вот он:
Я сделал его прозрачным при помощи функции маски цвета image.createMaskFromColor(Color(0, 0, 255));
В ф-ции int main объявим две переменные:
|
1 2 |
float dX = 0; float dY = 0; |
Есть готовая формула расчета нужного нам угла. Положим, что наш герой находится в начале координат. Из этого начала координат выходит вектор, он идет в сторону положения курсора. Нам надо знать угол между построенным вектором и положительной осью абсцисс (ОХ). После управления персонажем с помощью клика мыши напишем такой код:
|
1 2 3 4 5 |
float dX = pos.x-p.x;//вектор , колинеарный прямой, которая пересекает спрайт и курсор float dY = pos.y-p.y;//он же, координата y float rotation = (atan2(dY, dX)) * 180 / 3.14159265;//получаем угол в радианах и переводим его в градусы std::cout << rotation << "\n";//смотрим на градусы в консольке p.sprite.setRotation(rotation);//поворачиваем спрайт на эти градусы |
Первые две строки-нахождение вектора который берет свое начало в точке где находится спрайт и конец в точке курсора. Зачем мы считаем угол между этим вектором и осью абсцисс, выводим его в консоль чтобы понять как это устроено, а так же поворачиваем спрайт на этот угол. Проверьте, чтобы у спрайта в классе был написан центр (например в конце конструктора) таким образом:
|
1 |
sprite.setOrigin(w / 2, h / 2); |
Это сделано для того, чтобы спрайт поворачивался вокруг самого себя, а не вокруг левого верхнего угла. Эта строка как бы переносит начало координат спрайта в его середину.
Всё – если запустите, то увидите, как спрайт поворачивается за курсором постоянно.
Что делать, если хочется его поворачивать в направлении его движения? Давайте перенесем этот код в правый клик мыши :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if (event.key.code == Mouse::Right){//а именно правая p.isMove = true;//то начинаем движение p.isSelect = false;//объект уже не выбран p.sprite.setColor(Color::White);//возвращаем обычный цвет спрайту tempX = pos.x;//забираем координату нажатия курсора Х tempY = pos.y;//и Y float dX = pos.x - p.x;//вектор , колинеарный прямой, которая пересекает спрайт и курсор float dY = pos.y - p.y;//он же, координата y float rotation = (atan2(dY, dX)) * 180 / 3.14159265;//получаем угол в радианах и переводим его в градусы std::cout << rotation << "\n";//смотрим на градусы в консольке p.sprite.setRotation(rotation);//поворачиваем спрайт на эти градусы } |
Теперь спрайт будет поворачиваться один раз сразу после того, как вы скажете куда ему надо идти. Во время ходьбы вы можете сделать какую-то анимацию героя, а во время нажатия какой-то звук или фразочку героя. Анимацию вы уже сможете сделать сами, а звуками засорять проект пока не будем. Он ведь будет дольше запускаться )) По этой же причине пока не работаем с продвинутыми картами. Нам сейчас нужен полигон, который поможет сделать игровую логику. Вот и всё.
Вот картинка, демонстрирующая нужный нам угол.
Считайте желтую прямую на картинке вектором, который указывает направление, аналогичное стрелочки из спрайта. Сейчас угол равен 8,7. По часовой стрелке это положительный угол, против часовой – отрицательный. Если стрелка спрайта смотрит ровно вверх (значит там курсор мыши), то угол будет равен -90.
Файл main.cpp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 |
#include <SFML/Graphics.hpp> #include "map.h" #include "view.h" #include <iostream> #include <sstream> #include "mission.h" using namespace sf; ////////////////////////////////////////////////////КЛАСС ИГРОКА//////////////////////// class Player { /* это задел на следующие уроки,прошу не обращать внимания) private: float w, h, dx, dy, x, y, speed; int dir, playerScore, health; bool life; */ public: float w, h, dx, dy,x,y, speed; int dir, playerScore, health; bool life, isMove,isSelect;//добавили переменные состояния движения и выбора объекта String File; Image image; Texture texture; Sprite sprite; Player(String F, float X, float Y, float W, float H){ dir = 0; speed = 0; playerScore = 0; health = 100; dx = 0; dy = 0; life = true; isMove = false; isSelect = false; File = F; w = W; h = H; image.loadFromFile("images/" + File); image.createMaskFromColor(Color(0, 0, 255)); texture.loadFromImage(image); sprite.setTexture(texture); x = X; y = Y; sprite.setTextureRect(IntRect(0, 0, w, h)); sprite.setOrigin(w / 2, h / 2); } void update(float time) { switch (dir) { case 0: dx = speed; dy = 0; break; case 1: dx = -speed; dy = 0; break; case 2: dx = 0; dy = speed; break; case 3: dx = 0; dy = -speed; break; } x += dx*time; y += dy*time; if (!isMove) speed = 0; sprite.setPosition(x, y); interactionWithMap(); if (health <= 0){ life = false; } } float getWidth(){//получить ширину объека return w; } void setWidth(float width){//установить ширину объекта w = width; } float getHeight(){//взять ширину объекта return h; } void setHeight(float height){//задать ширину объекта h = height; } float getplayercoordinateX(){ return x; } float getplayercoordinateY(){ return y; } void moveToCursor(Window window){ } void interactionWithMap() { for (int i = y / 32; i < (y + h) / 32; i++) for (int j = x / 32; j<(x + w) / 32; j++) { if (TileMap[i][j] == '0') { if (dy>0) { y = i * 32 - h; } if (dy<0) { y = i * 32 + 32; } if (dx>0) { x = j * 32 - w; } if (dx < 0) { x = j * 32 + 32; } } if (TileMap[i][j] == 's') { playerScore++; TileMap[i][j] = ' '; } if (TileMap[i][j] == 'f') { health -= 40; TileMap[i][j] = ' '; } if (TileMap[i][j] == 'h') { health += 20; TileMap[i][j] = ' '; } } } }; class SpriteManager{//это задел на следующие уроки,прошу не обращать внимания на эти изменения) public: Image image; Texture texture; Sprite sprite; String name; String file; int widthOfSprite; int heightOfSprite; SpriteManager(String File,String Name){ file = File; name = Name; image.loadFromFile("images/" + file); texture.loadFromImage(image); sprite.setTexture(texture); } }; int main() { RenderWindow window(VideoMode(640, 480), "Lesson 19. kychka-pc.ru"); view.reset(FloatRect(0, 0, 640, 480)); Font font; font.loadFromFile("CyrilicOld.ttf"); Text text("", font, 20); text.setColor(Color::Black); Image map_image; map_image.loadFromFile("images/map.png"); Texture map; map.loadFromImage(map_image); Sprite s_map; s_map.setTexture(map); Image quest_image; quest_image.loadFromFile("images/missionbg.jpg"); quest_image.createMaskFromColor(Color(0, 0, 0)); Texture quest_texture; quest_texture.loadFromImage(quest_image); Sprite s_quest; s_quest.setTexture(quest_texture); s_quest.setTextureRect(IntRect(0, 0, 340, 510)); s_quest.setScale(0.6f, 0.6f); SpriteManager playerSprite("hero.png", "Hero");//это задел на следующие уроки,прошу не обращать внимания) Player p("heroForRotate.png", 250, 250, 136, 74); float currentFrame = 0; Clock clock; float dX = 0; float dY = 0; int tempX = 0;//временная коорд Х.Снимаем ее после нажатия прав клав мыши int tempY = 0;//коорд Y float distance = 0;//это расстояние от объекта до тыка курсора while (window.isOpen()) { float time = clock.getElapsedTime().asMicroseconds(); clock.restart(); time = time / 800; Vector2i pixelPos = Mouse::getPosition(window);//забираем коорд курсора Vector2f pos = window.mapPixelToCoords(pixelPos);//переводим их в игровые (уходим от коорд окна) Event event; while (window.pollEvent(event)) { if (event.type == sf::Event::Closed) window.close(); if (event.type == Event::MouseButtonPressed)//если нажата клавиша мыши if (event.key.code == Mouse::Left){//а именно левая if (p.sprite.getGlobalBounds().contains(pos.x, pos.y))//и при этом координата курсора попадает в спрайт { p.sprite.setColor(Color::Green);//красим спрайт в зеленый,тем самым говоря игроку,что он выбрал персонажа и может сделать ход p.isSelect = true; } } if (p.isSelect)//если выбрали объект if (event.type == Event::MouseButtonPressed)//если нажата клавиша мыши if (event.key.code == Mouse::Right){//а именно правая p.isMove = true;//то начинаем движение p.isSelect = false;//объект уже не выбран p.sprite.setColor(Color::White);//возвращаем обычный цвет спрайту tempX = pos.x;//забираем координату нажатия курсора Х tempY = pos.y;//и Y } } if (p.isMove){ distance = sqrt((tempX - p.x)*(tempX - p.x) + (tempY - p.y)*(tempY - p.y));//считаем дистанцию (расстояние от точки А до точки Б). используя формулу длины вектора if (distance > 2){//этим условием убираем дергание во время конечной позиции спрайта p.x += 0.1*time*(tempX - p.x) / distance;//идем по иксу с помощью вектора нормали p.y += 0.1*time*(tempY - p.y) / distance;//идем по игреку так же } else { p.isMove = false; std::cout << "priehali\n"; }//говорим что уже никуда не идем и выводим веселое сообщение в консоль } float dX = pos.x - p.x;//вектор , колинеарный прямой, которая пересекает спрайт и курсор float dY = pos.y - p.y;//он же, координата y float rotation = (atan2(dY, dX)) * 180 / 3.14159265;//получаем угол в радианах и переводим его в градусы std::cout << rotation << "\n";//смотрим на градусы в консольке p.sprite.setRotation(rotation);//поворачиваем спрайт на эти градусы ///////////////////////////////////////////Управление персонажем с анимацией//////////////////////////////////////////////////////////////////////// if (p.life) { if (Keyboard::isKeyPressed(Keyboard::Left)) { p.dir = 1; p.speed = 0.1; currentFrame += 0.005*time; if (currentFrame > 3) currentFrame -= 3; p.sprite.setTextureRect(IntRect(96 * int(currentFrame), 96, 96, 96)); } if (Keyboard::isKeyPressed(Keyboard::Right)) { p.dir = 0; p.speed = 0.1; currentFrame += 0.005*time; if (currentFrame > 3) currentFrame -= 3; p.sprite.setTextureRect(IntRect(96 * int(currentFrame), 192, 96, 96)); } if (Keyboard::isKeyPressed(Keyboard::Up)) { p.dir = 3; p.speed = 0.1; currentFrame += 0.005*time; if (currentFrame > 3) currentFrame -= 3; p.sprite.setTextureRect(IntRect(96 * int(currentFrame), 307, 96, 96)); } if (Keyboard::isKeyPressed(Keyboard::Down)) { p.dir = 2; p.speed = 0.1; currentFrame += 0.005*time; if (currentFrame > 3) currentFrame -= 3; p.sprite.setTextureRect(IntRect(96 * int(currentFrame), 0, 96, 96)); } getplayercoordinateforview(p.getplayercoordinateX(), p.getplayercoordinateY()); } p.update(time); window.setView(view); window.clear(); window.getSystemHandle(); for (int i = 0; i < HEIGHT_MAP; i++) for (int j = 0; j < WIDTH_MAP; j++) { if (TileMap[i][j] == ' ') s_map.setTextureRect(IntRect(0, 0, 32, 32)); if (TileMap[i][j] == 's') s_map.setTextureRect(IntRect(32, 0, 32, 32)); if ((TileMap[i][j] == '0')) s_map.setTextureRect(IntRect(64, 0, 32, 32)); if ((TileMap[i][j] == 'f')) s_map.setTextureRect(IntRect(96, 0, 32, 32)); if ((TileMap[i][j] == 'h')) s_map.setTextureRect(IntRect(128, 0, 32, 32)); s_map.setPosition(j * 32, i * 32); window.draw(s_map); } window.draw(p.sprite); window.display(); } return 0; } |
Огромное спасибо , на территории рунета так мало подробных уроков по библиотеке SFML.
А таких подробных вообще нет. Скажите пожалуйста будет ли продолжение?
Хотелось бы узнать о взаимодействии с врагами!
Спасибо большое
Продолжение всегда будет, потому что есть форум
А на форуме есть ещё раздел, где люди делятся своими решениями, которые похожи на мини-уроки. По хорошим и нужным решениям я буду писать потом уроки, когда закончу свои 
У меня мало времени на создание уроков и на один урок я трачу бывает по 6-8 часов (учитывая написание кода, объяснение и видеоверсию). Время, надеюсь, появится на этих выходных и я смогу выпустить урок по созданию врага и притяжение как в Марио.
Взаимодействие с врагами, разработка искусственного интеллекта и прочего – всё будет, дело времени..
Не подскажете, в чем может быть проблема если спрайт “смотрит” не на курсор а на 90 градусов от него влево. Пробовал задавать начальный поворот на 0 градусов, не помогло. Конечно, можно при передаче rotation как параметр плюсовать к нему эти 90 градусов, но хочется чтобы все изначально правильно было.
Не понимаю эту строку. Я так понимаю формула акртангенса = (противолежащий катет / прилежащий катет), но как вы понимаете что точно 90 градусов треугольник будет и как вообще получится треугольник???
А всё разобрался глядя на этот рисунок
Вложение: