Вы знаете , что сущ-ет такой способ взаимодействия с интерфейсом “Drag and drop”. Буквально означает “тащи и бросай”. Ссылка на более подробное описание https://ru.wikipedia.org/wiki/Drag-and-drop
В этом уроке мы реализуем этот способ взаимодействия , а именно – взаимодействие игрока с персонажем.
Видеоверсия: http://www.youtube.com/watch?v=ceF8dXecnBY
Игрок сможет двигать персонажа, как только нажмет левую клавишу мыши. Пример этого взаимодействия вы можете встретить не только в играх типа шашки, шахматы и тд, но и при перетаскивании файлов и папок в операционных системах, например Windows.
В int main() объявим логическую переменную, которая будет отвечать за “левый щелчок мыши по спрайту”.
1 |
bool isMove = false;//переменная для щелчка мыши по спрайту |
А так же две переменные, которые будут корректировать нажатие и перемещение:
1 2 |
float dX = 0;//корректировка нажатия по х float dY = 0;//по у |
Далее перед событиями Event пишем:
1 2 3 4 5 6 7 8 |
time = time / 800; Vector2i pixelPos = Mouse::getPosition(window);//забираем коорд курсора Vector2f pos = window.mapPixelToCoords(pixelPos);//переводим их в игровые (уходим от коорд окна) std::cout << pixelPos.x << "\n";//смотрим на координату Х позиции курсора в консоли (она не будет больше ширины окна) std::cout << pos.x << "\n";//смотрим на Х,которая преобразовалась в мировые координаты Event event; |
Координата курсора забирается изначально по позиции курсора в окне, но мы можем переводить координаты в игровые, как у игрока. Если у вас не планируется скроллинг карты, то вам не обязательно переводить их (в шашках например такое не требуется). Но если камера подвинется, то координаты игрока будут уже другими, а курсора теми же, поэтому то и надо их переводить в мировые координаты. Ниже в коде видим вывод этих координат в консоль. Первая координата pixelPos.x не будет больше, чем ширина окна (640 в моем случае) и поэтому когда мы пройдем игроком вправо – программа будет работать не корректно, т.к координата игрока всегда будет больше позиции курсора. Поэтому то и надо переводить в координаты игровые. Вот скриншот , показывающий, что координаты pixelPos.x и pos.x равны до тех пор, пока мы не подвинем камеру влево или вправо.
Вот курсор в крайнем правом углу окна и камера не сдвинута вправо, игрок вправо не ходил:
Обе координаты почти 640 и они равны, но как только мы пройдем вправо и камера сдвинется:
Координаты уже не будут равны .pixelPos.x будет принимать координату относительно окна и так же не будет больше его ширины (640), а вот pos.x после преобразования уже ведёт себя “хорошо” для нас.
Далее в цикле событий while (window.pollEvent(event)) пишем:
1 2 3 4 5 6 7 8 9 |
if (event.type == Event::MouseButtonPressed)//если нажата клавиша мыши if (event.key.code == Mouse::Left)//а именно левая if (p.sprite.getGlobalBounds().contains(pos.x, pos.y))//и при этом координата курсора попадает в спрайт { std::cout << "isClicked!\n";//выводим в консоль сообщение об этом dX = pos.x - p.sprite.getPosition().x;//делаем разность между позицией курсора и спрайта.для корректировки нажатия dY = pos.y - p.sprite.getPosition().y;//тоже самое по игреку isMove = true;//можем двигать спрайт } |
Если нажата клавиша мыши, при этом левая, при этом курсор мыши попадает на спрайт игрока, то:
*выводим в консоль надпись о том , что кликнули,
*запоминаем разность между курсором и серединой спрайта. (не от левого верхнего угла спрайта, т.к спрайт имеет строку в классе игрока sprite.setOrigin(w / 2, h / 2); , но не суть важно)
*делаем переменную “можно двигать” true
Ниже в этом же цикле сделаем обработчик отпускания клавиши, который скажет программе перекрасить персонажа в белый и сделаем переменную “можно двигать” false:
1 2 3 4 |
if (event.type == Event::MouseButtonReleased)//если отпустили клавишу if (event.key.code == Mouse::Left) //а именно левую isMove = false; //то не можем двигать спрайт p.sprite.setColor(Color::White);//и даем ему прежний цвет |
После закрытия цикла обработчика событий пишем само движение персонажа за курсором:
1 2 3 4 5 6 |
if (isMove) {//если можем двигать p.sprite.setColor(Color::Green);//красим спрайт в зеленый p.x = pos.x-dX;//двигаем спрайт по Х p.y = pos.y-dY;//двигаем по Y //p.sprite.setPosition(pos.x - dX, pos.y - dY);//можно и так написать,если у вас нету х и у в классе игрока } |
Всё, теперь будет работать
Вы так же можете использовать алгоритм не для перетаскивания объекта, а лишь для распознавания клика, оставив при этом его первую часть.
dX и dY служат для корректности, это расстояние до начала спрайта.
Мы снимали координаты курсора постоянно при работе программы, лучше будет, если вы сделаете bool переменную, которая отвечает за клик и только после этого снимает координаты. Тогда вы снизите нагрузку на игру. if isMouseClicked == true { isMouseClicked=false; и снимаем координаты}
Или просто при клике – снимать координаты
Код урока:
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 |
#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; String File; Image image; Texture texture; Sprite sprite; Player(Sprite F, float X, float Y, float W, float H){ dir = 0; speed = 0; playerScore = 0; health = 100; dx=0;dy=0; life = true; //File = F; w = W; h = H; //image.loadFromFile("images/" + File); image.createMaskFromColor(Color(41, 33, 59)); //texture.loadFromImage(image); //sprite.setTexture(texture); sprite = F; x = X; y = Y; sprite.setTextureRect(IntRect(0, 0, w, h)); } 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; speed = 0; sprite.setPosition(x, y); sprite.setOrigin(w / 2, h / 2); 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 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 17. 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(playerSprite.sprite, 250, 250, 96.0, 96.0); float currentFrame = 0; Clock clock; bool isMove = false;//переменная для щелчка мыши по спрайту float dX = 0;//корректировка движения по х float dY = 0;//по у while (window.isOpen()) { float time = clock.getElapsedTime().asMicroseconds(); clock.restart(); time = time / 800; Vector2i pixelPos = Mouse::getPosition(window);//забираем коорд курсора Vector2f pos = window.mapPixelToCoords(pixelPos);//переводим их в игровые (уходим от коорд окна) std::cout << pixelPos.x << "\n";//смотрим на координату Х позиции курсора в консоли (она не будет больше ширины окна) std::cout << pos.x << "\n";//смотрим на Х,которая преобразовалась в мировые координаты 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))//и при этом координата курсора попадает в спрайт { std::cout << "isClicked!\n";//выводим в консоль сообщение об этом dX = pos.x - p.sprite.getPosition().x;//делаем разность между позицией курсора и спрайта.для корректировки нажатия dY = pos.y - p.sprite.getPosition().y;//тоже самое по игреку isMove = true;//можем двигать спрайт } if (event.type == Event::MouseButtonReleased)//если отпустили клавишу if (event.key.code == Mouse::Left) //а именно левую isMove = false; //то не можем двигать спрайт p.sprite.setColor(Color::White);//и даем ему прежний цвет } if (isMove) {//если можем двигать p.sprite.setColor(Color::Green);//красим спрайт в зеленый p.x = pos.x-dX;//двигаем спрайт по Х p.y = pos.y-dY;//двигаем по Y //p.sprite.setPosition(pos.x - dX, pos.y - dY);//можно и так написать,если у вас нету х и у } ///////////////////////////////////////////Управление персонажем с анимацией//////////////////////////////////////////////////////////////////////// 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(); 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; } |
еще бы про эти векторы поподробнее)
Это не совсем к сфмл относится и инфа есть в инете, но ок, как нибудь уделю внимание:)
да я вот понял уже, погуглил)
меня просто сбивали с толку приписки типа “2f” “2i”
теперь понял
Наконец то ООП. Теперь всё выглядит красиво.