Stellen Sie das Sprite auf die Mausrichtung ein

9

Ich baue ein HTML5-Canvas-Spiel und brauche eine Möglichkeit, mein Sprite auf den Mauszeiger zu richten. Ich habe die X- und Y-Koordinaten für das Sprite und auch die X- und Y-Koordinaten des Zeigers. Alles, woran ich festhalte, ist die Mathematik, mit der das Sprite zum Zeiger wird. Es ist alles in einer 2D-Welt, also kann ich mir nicht vorstellen, dass es zu kompliziert wird, aber ich habe sehr wenig Erfahrung mit diesem Zeug.

Auch hilfreiche Links zu Artikeln / Blog-Posts über solche Dinge wären fantastisch (2D-Spielprogrammierung im Allgemeinen, nicht speziell Javascript).

Zum Hinzufügen sollte ich beachten, dass ich einen Winkel in Grad benötige, der mich mit seiner X- und Y-Position zum Cursor zeigt.

Wie kann ich die Koordinaten des Cursors kennen und wo lege ich all diese Dinge ab?

Robinson
quelle
Hallo, ich hatte ein ähnliches Problem wie Sie beim Bogenschießen. Schauen Sie sich meinen Blog an, wenn Sie möchten: yannbane.blogspot.com .
JCora
Mögliches Duplikat der Ausrichtung eines Modells auf ein Ziel
Nicol Bolas

Antworten:

11

Da Sie die APIs nicht kennen, die Ihnen zur Verfügung stehen, finden Sie hier die grundlegende Mathematik, um einen Winkel in Grad zu erhalten:

angle = math.atan2(y2 - y1, x2 - x1) * 180 / math.pi;

Das * 180 / math.pi;rechnet es vom Bogenmaß in Grad um.

William Mariager
quelle
3
Beachten Sie, dass der von erzeugte Winkel atan2davon ausgeht, dass das Koordinatensystem + x rechts und + y oben ist . Wenn Ihre nach unten geht, müssen Sie den Winkel negieren. Es wird auch davon ausgegangen, dass das Objekt in die Richtung (1, 0) (rechts) zeigt, wenn der Winkel 0 ist. Wenn es in eine andere Richtung zeigt, müssen Sie den Winkel versetzen. Meine Antwort hier erklärt, wie das geht.
Nicol Bolas