Bazooka - in Mausrichtung schießen

Winkel

Ein Spielelement zum Mauszeiger zu bewegen, in die Mausrichtung zu schießen oder in Mausrichtung zu gucken, das sind alles Anwendungsfälle, die je nach Genre bei Spielen öfters vorkommen. Also eine nicht unwichtige kleine Mathe Aufgabe in der Spieleentwicklung.

Kosinus, Sinus und Arkustangens2

Wir werden diese drei Freunde gleich brauchen um mit der Bazooka in Mausrichtung zu schießen. Aber keine Sorge, es wird nicht allzu kompliziert. Also, wie schaffen wir es, unsere von mir erstaunlich gut gepixelte Bazooka (Achtung: Ironie) in die Richtung des Mauszeigers zu drehen?

In Mausrichtung gucken mit atan2

Bevor wir zu atan2 kommen brauchen wir Maus Koordinaten, die relativ zur Spielwelt sind. Wir erhalten nicht das gewünschte Ergebnis, wenn wir globale verwenden.

// Zum Fenster relativ. So funktioniert es auch. 
// Aber! Nur solange das Fenster nicht vergrößert/verkleinert wird!
sf::RenderWindow app;
sf::Vector2f windowMouse= sf::Mouse::getPosition(app);

// Zur Spielwelt relativ.
// So funktioniert es selbst, wenn die Fenstergröße verändert wird.
sf::Vector2f mouse = app.mapPixelToCoords(windowMouse);

Jetzt kommt atan2 ins Spiel, um die eigentliche Aufgabe zu erledigen.

float rad = atan2(mouse.y - bazooka.y, mouse.x - bazooka.x);

Und schon haben wir den Winkel in RADIANT. Wichtig ist hier, dass zuerst die Y Koordinaten und im zweiten Parameter die X Koordinaten miteinander subtrahiert werden!

Radiant und Degree

Der Grund warum ich vorhin Radiant groß und dick geschrieben habe ist ein einfacher. Bitte achtet darauf, welche Einheit euer Framework oder eure Engine als Parameter erwartet. Da ich kein Mathe Genie bin, habe ich das früher öfters außer Acht gelassen und bin dann ziemlich verzweifelt auf Fehlersuche gewesen.

SFML 2.5

SFML 2.5 erwartet bei setRotation als Parameter einen Wert in Degree. Also müssen wir den von atan2 erhaltenen Rückgabewert in Radiant zu Degree umwandeln. Das geht wie folgt.

Vielleicht auch interessant
Firce - HTML5 Spiel programmieren (easy)
"Firce" - HTML5 Spiel programmieren (easy)

Anleitung: Schnell ein einfaches und cooles Spiel mit HTML5 entwickeln.

float deg = rad * 180 / 3.141;

3.141... ist die Konstante PI. Jetzt muss nur noch mit setRotation der Winkel gesetzt werden und siehe da, die Bazooka guckt immer in Mauszeiger Richtung.

bazooka.setRotation(deg);

In Mausrichtung schießen

Diese Aufgabe benötigt minimal mehr Aufwand. Im Prinzip benötigen wir nur den Winkel in Radiant den wir schon mithilfe von atan2 berechnet hatten. Diesen setzten wir jetzt jeweils bei cos und sin ein.

float dx = cos(rad);
float dy = sin(rad);

Wichtig ist, dass Kosinus und Sinus immer einen Wert in Radiant erwarten. Die erhaltenen Werte müssen nur noch in eine move Funktion eingesetzt werden und siehe da, die Bazooka Kugel fliegt in die Mausrichtung.

shot.move(dx * speed * frametime, dy * speed * frametime);

Weiterführendes (Extern)

Wer mehr über die Trigonometrie nachlesen möchte kann sich gerne diesen Artikel anschauen: https://www.studyhelp.de/online-lernen/mathe/trigonometrie/

Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text