Share
In 2D-Scroll-Spielen (und einigen 3D-Spielen) müssen Sie dem Spieler oft die Position eines Ziels anzeigen, das sich außerhalb des Bildschirms befindet, ob es sich dabei um einen Feind, einen Verbündeten oder ein Spielziel handelt. Viele Spiele verwenden einen Pfeil, der nahe am Bildschirmrand schwebt, um anzugeben, in welche Richtung sich das Ziel befindet. In diesem Lernprogramm erkläre ich eine Methode, die mithilfe einer einfachen Algebra ermittelt, wo ein solcher Indikatorpfeil platziert werden soll.
Mit der Neigungsschnittstelle können Sie eine gerade Linie in 2D mit linearer Algebra beschreiben. Es verwendet eine Steigung, welches normalerweise das Symbol verwendet m, das definiert die Steilheit der Linie und eine Versatz oder abfangen, welches das Symbol verwendet b, das definiert, wo die Linie die y-Achse kreuzt.
\ [y = mx + b \]
Dank dieser Beziehung können wir, wenn wir einen Wert haben, die allgemeine Gleichung verwenden, um den anderen Wert sowohl konzeptionell als auch mathematisch leicht zu berechnen.
Da wir die Position relativ zum Bildschirm finden - eine flache Oberfläche -, führen wir alle Berechnungen in 2D durch, selbst wenn das Spiel in 3D ist.
Spitze: Wenn Sie in 3D arbeiten, müssen Sie den Weltstandort in den Bildschirmort Ihres 3D-Objekts umwandeln. Die meisten Mainstream-Engines verfügen dazu über integrierte Funktionen. Weitere Informationen finden Sie in der Dokumentation Ihres Motors.
Wenn wir auf dem Bildschirm eine Linie finden, die beschreibt, in welche Richtung sich das Objekt befindet, in das wir zielen, können wir den Punkt bestimmen, an dem es eine bestimmte Kante überquert, und dann ein wenig Versuch und Irrtum verwenden, um herauszufinden, auf welcher Seite des Bildschirms es sich befindet befestigt an.
Wenn wir uns vorstellen, dass sich unser Bildschirm in einem Raster befindet und der Ursprungspunkt (0, 0) Wenn Sie sich in der Mitte des Bildschirms befinden, können Sie leicht die Werte berechnen, die die Linie beschreiben.
Da die Linie durch das Zentrum gehen wird, wissen wir, dass unser Schnittpunkt ist, b, muss Null sein Und wenn das Raster so platziert ist, können wir die Steigung sehr einfach berechnen, m: es ist einfach das Ziel y/x. (In der Abbildung oben ist der Mauszeiger unser Ziel.)
Sobald wir die Neigung haben, können wir mithilfe der Substitution berechnen, wo die Linie die Bildschirmgrenzen überschreiten würde. Wenn wir beispielsweise den y-Wert an der Stelle ermitteln möchten, an der die Linie den Bildschirmrand kreuzt, verwenden wir das ursprüngliche Formular y = mx, woher x ist auf den Bildschirmrand eingestellt. Wenn wir herausfinden wollten, wo es den oberen oder unteren Rand des Bildschirms kreuzt, teilen wir beide Seiten durch m so dass die Gleichung wird: x = y / m - dann setzen wir gerade y bis zum Bildschirmrand.
Während das Raster auf diese Weise platziert wird, hat der Bildschirmrand die Hälfte der Bildschirmbreite, negativ für links und positiv für rechts. Für die vertikale Achse ist der Rand des Bildschirms ähnlich halb so hoch, ob positiv oder negativ ist, kann jedoch zwischen den Motoren variieren.
Bei einem Spiel mit 800 x 600 Pixeln werden also die Bildschirmränder angezeigt x = -400px, x = + 400px, y = -300px, und y = + 300px.
Das Obige wäre in Ordnung, wenn der Ursprung des Koordinatensystems die Mitte des Bildschirms wäre. Dies ist jedoch selten der Fall. Die meisten Engines haben den Ursprung entweder in der oberen linken Ecke oder in der unteren linken Ecke.
Bevor wir unsere Berechnungen durchführen, müssen wir unseren Koordinatenraum so verschieben, dass alle unsere Werte relativ zur Mitte des Bildschirms sind und nicht auf den Standardursprung, den unsere Engine verwendet.
Verschieben des Koordinatenraums. Punkte nicht maßstabsgerecht. Klang komplex? Nicht wirklich. Wir müssen nur herausfinden, wie viel wir den Koordinatenraum verschieben möchten, und diesen Wert von unserer Zielposition subtrahieren. Wenn wir also unser Raster um die Hälfte der Bildschirmbreite verschieben möchten, subtrahieren wir die Hälfte der Bildschirmbreite vom Ziel y Wert.
Im obigen Beispiel beträgt die Bildschirmgröße 800x600px, wobei der Koordinatenraum so verschoben wird (0, 0) ist in der Mitte des Monitors. Das Off-Screen-Ziel ist um (800, 400) unter Verwendung des gleichen Koordinatenraums.
Da die y-Koordinate des Ziels positiv ist (und in diesem Motor die y-Achse nach oben zeigt), wissen wir, dass sich das Ziel nicht am unteren Rand des Bildschirms befindet. Daher finden wir zunächst seine Position am oberen Rand des Bildschirms , welches ist (600, 300).
Wir können mathematisch sagen, dass dieser Punkt wegen der X-Koordinate (600) ist größer als die Hälfte der Breite (800/2 = 400), so dass wir die Position auf der Bildschirmseite ermitteln.
Auch hier müssen wir nur eine Seite des Bildschirms überprüfen, denn wenn unsere X-Koordinate positiv ist, muss sich der Punkt auf der rechten Seite des Bildschirms befinden. (Wenn es negativ wäre, müsste es auf der linken Seite sein.)
Sobald wir den Punkt auf der rechten Seite des Bildschirms finden - (400, 200) - das wissen wir Muss Seien Sie richtig, denn wir haben jede andere Seite des Bildschirms durch einen Ausschlussprozess ausgeschlossen.
Sie können den Indikator nicht nur positionieren, sondern auch drehen, um einen zusätzlichen Effekt zu erzielen, insbesondere wenn es sich um einen Pfeil handelt. In den meisten Mathematikkursen gibt es eine praktische Funktion, die dieses Problem auf einfache Weise löst: atan2 ().
Das atan2 () Die Funktion nimmt zwei Parameter an: eine X-Koordinate und eine Y-Koordinate. Es gibt einen Winkel zurück, der die Richtung von anzeigt (0, 0) zu (x, y).
Drehung = Math.atan2 (centerMouse.top, centerMouse.left); Drehung = Drehung * 180 / Math.PI; // Radiant in Grad umrechnen
Es gibt ein paar Dinge, die Sie beachten sollten atan2 () das kann zwischen Sprachen und Engines variieren. Erstens sind die Argumente häufig atan2 (y, x), während die meisten anderen mathematischen Funktionen die x-Koordinate zuerst einnehmen. Auch wird die Rotation häufig im Bogenmaß eher gradweise zurückgegeben.
Spitze: Ich werde nicht auf die Unterschiede zwischen Bogenmaß und Grad eingehen, außer zu sagen, dass das Konvertieren von einem zum anderen einfach ist: Sie multiplizieren nur den Bogenmaß mit (180 / Pi) um sie in Stufen zu verwandeln und mit zu multiplizieren (Pi / 180) wenn du sie wieder ändern willst.
Bevor Sie eine Anzeige außerhalb des Bildschirms erstellen, müssen Sie noch eines prüfen. Dies ist, ob unser Ziel tatsächlich außerhalb des Bildschirms liegt, da es nicht sinnvoll ist, in die Richtung unseres Ziels zu zeigen, wenn wir unser Ziel bereits sehen können. Wieder werden wir ziemlich einfache Mathematik anwenden, um das herauszufinden.
Da es sich bei unserem Bildschirm um ein nicht gedrehtes Rechteck handelt, brauchen wir nichts mit Winkeln zu tun. Wir müssen nur prüfen, ob unser Zielpunkt niedriger als der obere, obere als der untere, links vom rechten Rand ist, und rechts vom linken Bildschirmrand.
var screen = width: 200; height: 100 // Dummy-Werte (isTargetOnScreen (left: 50; top: 60)); // wahrer Alarm (isTargetOnScreen (left: 250; top: 10)); // False Funktion isTargetOnScreen (target) if (target.top> 0 && target.top < screen.height && target.left < screen.width && target.left > 0) // Das Ziel wird auf dem Bildschirm angezeigt. Verwenden Sie eine Überlagerung oder tun Sie nichts. wahr zurückgeben; else // das Ziel befindet sich außerhalb des Bildschirms, Position des Indikators suchen. falsch zurückgeben;
Unter Verwendung der Dummy-Werte oben wird festgestellt, dass das Ziel auf dem Bildschirm angezeigt wird. Diese Werte können von überall her stammen, wo Informationen zu dem Objekt gespeichert werden, das Sie verfolgen.
Beachten Sie, dass der obige Code davon ausgeht, dass wir uns im Koordinatenraum befinden (0, 0) ist in dem Ecke des Bildschirms wie die meisten Engines standardmäßig haben. Daher sollte dieser Schritt vor dem Verschieben des Koordinatenraums zur Mitte ausgeführt werden, wie bei der Berechnung der Indikatorposition.
Hier eine kurze Demo, um diese Konzepte in Aktion zu zeigen (sehen Sie den Code auf GitHub):
Gehen wir den Code durch:
Da haben Sie es: ein praktisches Code-Snippet, das Sie der Benutzeroberfläche Ihres Spiels hinzufügen können. Nun, da Sie den Spieler in Richtung eines Ziels richten können, überlegen Sie, wie Sie auch die Entfernung anzeigen können.
Accentsconagua