Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games

Kurztipp: Trigonometrie für Flash-Spieleentwickler

by
Read Time:11 minsLanguages:
This post is part of a series called You Do The Math.
Quick Tip: Get a Random Number Within a Specified Range Using AS3
Simulate Projectile Motion with ActionScript 3.0

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In Bereitstellen eines Panzers in einer isometrischen Kriegszone haben Sie gelernt, wie Sie ein Objekt so drehen, dass es zum Zeiger zeigt und sich beim Klicken auf eine Position bewegt. In diesem Kurztipp werfen wir einen allgemeinen Blick auf die Mathematik dahinter: Trigonometrie.


Vorschau von dem Endergebnis

Das ist das Endergebnis meines vorherigen Tutorials. Dabei werden die Trigonometrieprinzipien verwendet, die in diesem Quick-Tipp behandelt werden:

Bewegen Sie die Maus, damit der Turm darauf zielt, und klicken Sie auf eine beliebige Stelle, damit der Panzer bis zu diesem Punkt fährt.

Jeder Programmierer, besonders jeder Spielprogrammierer, muss früher oder später Objekte auf dem Bildschirm verschieben. Dies ist eine einfache Aufgabe, wenn Sie ein Objekt in eine Richtung bewegen müssen, beispielsweise entlang der x- oder y-Achse. Vielleich möchten Sie ein Objekt dazu bringen, Ihrem Mauszeiger zu folgen, wohin Sie es bewegen, oder ein Rennspiel erstellen, in dem Sie die Beschleunigung eines Autos steuern, indem Sie die Pfeiltaste nach oben drücken und mit den Pfeilen nach links und rechts steuern.

So, vielleicht möchten Sie ein Objekt dazu möchten, Ihrem Mauszeiger zu folgen, wohin Sie es bewegen, oder ein Rennspiel erstellen, in dem Sie die Beschleunigung eines Autos steuern, indem Sie die Pfeiltaste nach oben drücken und mit den Pfeilen nach links und rechts steuern. Also, wie würdest du das machen? Hier hilft ein bisschen Trigonometrie!

Wenn Sie gut in Mathe sind, wird es kein Problem sein, aber es gibt viele Leute, die es überhaupt nicht verstehen oder sogar Angst davor haben. Ich werde versuchen, es in diesem Quick-Tipp so klar wie möglich aufzuschlüsseln.

Schritt 1: Das Flash-Koordinatensystem

Erinnern wir uns zu Beginn an das kartesische Koordinatensystem. Klingt kompliziert? Wenn ja, schauen Sie sich einfach das Bild unten an und ich bin sicher, es wird Ihnen bekannt sein:

Es hat x- und y-Achsen; Sie können deutlich sehen, wo x und y positiv und negativ sind. Bei den Koordinaten in Flash ist die Situation etwas anders. Flash hat auch ein Koordinatensystem, aber es sieht aus wie das kartesische System auf dem Kopf:

Es hat auch x- und y-Achsen und den Ursprungspunkt, der einzige Unterschied besteht darin, dass die y-Achse unterhalb der x-Achse positiv ist.

Jedes in Flash erstellte Symbol verfügt über ein eigenes integriertes Koordinatensystem. Wenn Sie ein neues Symbol erstellen, unabhängig davon, ob es sich um einen Movieclip oder eine Schaltfläche handelt, wird im Dialogfeld zur Symbolerstellung möglicherweise eine Eigenschaft "Registrierungspunkt" angezeigt. Was ist es? Der Registrierungspunkt ist ein Ursprungspunkt eines Symbols. Der Punkt, um den sich das Objekt dreht, wenn Sie seine Drehungseigenschaft ändern.

Hinweis: Der Ursprungspunkt der Bühneninstanz befindet sich in der linken oberen Ecke. Dies bedeutet, dass alle Punkte auf der Bühne positive x- und y-Koordinaten haben.

In diesem Kurztipp werden die drei am häufigsten verwendeten trigonometrischen Funktionen in Flash beschrieben. Sinus, Cosinus und Atan2. Einige Leute fragen sich vielleicht, wie wir diese Funktionen in Flash verwenden können. Schauen wir uns einige praktische Beispiele an und verstehen, warum wir sie brauchen und wie sie unser Leben ein bisschen einfacher machen können.

Schritt 2: Winkel berechnen

Berechnen wir den Winkel zwischen zwei Punkten. Erstellen Sie eine neue Flash-Datei (ActionScript 3.0). Wählen Sie den ersten Frame der Timeline aus und drücken Sie F9, um ein Aktionsfenster zu öffnen.

Lassen Sie uns an dieser Stelle etwas Einfaches machen. Geben Sie dies einfach in das Aktionsfenster ein:

Das gibt uns die Position des Mauszeigers jedes Mal, wenn wir auf die Bühne klicken. Nicht faszinierend, oder?

Wenn Sie einem Objekt die Koordinaten Ihres Mauszeigers relativ zu diesem Objekt "mitteilen" möchten und ihm dann die Fahrtrichtung anzeigen, um die Position des Zeigers zu erreichen.

Schließen Sie das Aktionsfenster und gehen Sie zu Einfügen > Neues Symbol oder drücken Sie einfach Strg + F8.

Geben Sie einen beliebigen Namen ein (oder hinterlassen Sie einen Standardnamen) und drücken Sie OK. Das kleine Fadenkreuz in der Mitte des Bildschirms ist der Registrierungspunkt des Symbols oder sein Ursprungspunkt. Dies sind die X- und Y-Positionen des Objekts. Nehmen Sie nun das ovale Werkzeug (O-Taste) und zeichnen Sie einen Kreis (bei gedrückter Umschalttaste) an eine beliebige Stelle auf dem Bildschirm.

Klicken Sie auf den Kreis, um ihn auszuwählen, und gehen Sie zu seinem Eigenschaftenfenster > Position und Größe. Geben Sie für W (Breite) 20 ein, für H (Höhe) und für X- und Y-Position (-10). Dadurch wird der Kreis 20x20 px groß und genau auf den Registrierungspunkt zentriert. Beenden Sie nun den Symbolbearbeitungsmodus (klicken Sie oben auf Szene 1), greifen Sie zu diesem Symbol in Ihrer Bibliothek und ziehen Sie es einfach auf die Bühne (irgendwo werden wir es später dynamisch positionieren). Wenn sich Ihr Objekt auf der Bühne befindet, geben Sie ihm den Instanznamen mCircle.

Jetzt wollen wir die Richtung von der Y- und X-Position unseres Kreises zur Y- und X-Position des Mauszeigers berechnen. Die rote Linie im Bild unten ist die Richtung, die wir kennen müssen. Es kann mithilfe einer Standardfunktion von Math.atan2() gefunden werden.

Lass es uns jetzt machen. Löschen Sie die "trace"-Anweisungen aus dem Code und erstellen Sie stattdessen eine neue Variable. Verfolgen Sie dann diese Variable, um zu sehen, was Sie erhalten:

Beachten Sie, dass e.stageY - mCircle.y der vertikale Abstand von der Maus zum Kreis und e.stageX - mCircle.x der horizontale Abstand ist.

Im Ausgabebereich werden folgende Arten von Zahlen angezeigt:

Das sind die relativen Winkel (zwischen der X-Achsenlinie und der roten Linie) im Bogenmaß. Warum sind keine Grade? Nun, Flash verwendet Bogenmaß, um Sinus und Cosinus zu berechnen. Wenn Sie jedoch wissen möchten, wie hoch diese Winkel in Grad sind, können Sie "myAtan2" immer mit 180 multiplizieren und durch Math.PI dividieren. So was:

Editor: Als zusätzliche Ressource finden Sie hier eine Reihe von Funktionen für die Grad/Radian-Konvertierung. Es wird als Snippet auf snipplr.com gespeichert, dem neuesten Mitglied des Envato-Netzwerks!

Schritt 3: Sinus und Cosinus verstehen

Da wir den Winkel zwischen zwei Punkten kennen, können wir jetzt berechnen, wie viele Pixel wir den X- und Y-Eigenschaften des Kreises in jedem Frame hinzufügen müssen, bis er den Klickpunkt erreicht. Lassen Sie uns untersuchen, was wir hier wissen müssen:

Die blaue Linie ist der Cosinus des Winkels und die orange Linie ist der Sinus des Winkels. Anders gesagt,

  • Sinus(Winkel) == e.stageY - mCircle.y
  • Cosinus(Winkel) == e.stageX - mCircle.x

Anstatt zu erklären, wie Sinus und Cosinus funktionieren, werde ich einige praktische Beispiele zeigen, wie man sie verwendet. Sinus und Cosinus sind unverblümt die Beziehungen zwischen Y und X in unserem Winkel.

Stellen Sie sich vor, der Winkel zwischen zwei Objekten beträgt 45 Grad. In diesem Fall beträgt die Beziehung zwischen Sinus und Cosinus 1:1 (siehe Abbildung unten). Dies bedeutet, dass wir die X- und Y-Eigenschaften unseres Kreises in jedem Frame um den gleichen Betrag erhöhen müssen, um das Ziel zu erreichen. Zum Beispiel müssen Sie X 5 Pixel und Y 5 Pixel hinzufügen.

In diesem Diagramm hat sich der Winkel geändert und auch die Beziehung zwischen Sinus und Cosinus hat sich geändert. Es geht jetzt um 1:2.

In diesem Fall müssen wir der X-Eigenschaft unseres Kreises doppelt so viele Pixel hinzufügen wie Y. z.B. X +=10, Y +=5;

Schritt 4: Praktische Beispiele

Sie werden sich wahrscheinlich fragen, warum wir Sinus und Cosinus benötigen, wenn wir die Koordinaten des Klickpunkts bereits kennen - können wir unseren mCircle einfach sofort zu ihnen verschieben? Nun, Sie hätten es auf diese Weise tun können, wenn Sie wollten, dass Ihr Kreis (oder ein anderes Objekt) sich an den Koordinaten eines Klickpunkts "teleportiert", sobald ein Klick auftritt. Aber was ist, wenn Sie möchten, dass es sich allmählich in Richtung des Klicks bewegt? Dazu müssen Sie den X- und Y-Eigenschaften eine bestimmte Anzahl von Pixeln hinzufügen, z.B. jeden Frame oder jede Sekunde.

Berechnen wir nun, wie viele Pixel wir zu den X- und Y-Eigenschaften hinzufügen sollen, basierend auf Sinus und Cosinus des Winkels zwischen unserem Objekt und einem Klickpunkt. Denken Sie daran, dass Flash den Winkel zwischen ihnen aus dieser Operation kennt:

Zu diesem Zweck sollten wir unseren Code ein wenig aktualisieren.

Beachten Sie, was ich hier getan habe:ich habe alle meine Variablen außerhalb von Funktionen hochgestuft, da ich jetzt mehr als eine Funktion habe und möchte, dass diese Variablen von jeder Funktion aus zugänglich sind.

Die Bühne verfügt über einen Ereignis-Listener für Mausklicks. Wenn der Klick erfolgt, wird die Methode calculateAngle() aufgerufen und die nächsten Variablen werden instanziiert:

Diese Funktion fügt der Bühne auch einen Ereignis-Listener für die Eingabe eines Frames hinzu, der die moveTheCircle() -Methode für jeden Frame aufruft.

Schritt 5: Pixel berechnen

Lassen Sie uns nun unsere moveTheCircle()-Methode selbst aufschlüsseln. Im Moment macht es nur zwei Dinge:

Wie Sie sehen können, berechnet die erste Zeile, wie viele Pixel der X-Eigenschaft hinzugefügt werden sollen, und die zweite Zeile befasst sich mit Y. Lassen Sie mich das erklären. Math.cos findet den Cosinus (x-Eigenschaft) des "myAtan2" -Winkels, Math.sin macht dasselbe mit seiner Sinus (y-Eigenschaft). Wenn unser myAtan2-Winkel ungefähr 0,785 Radian (45 Grad) beträgt, sind Cosinus und Sinus beide ungefähr 0,707... Sie können ihn mit einem Taschenrechner überprüfen.

Eine einfache Berechnung zeigt, wie viele Pixel der obige Code zu den X- und Y-Eigenschaften unseres Objekts hinzufügt, wenn der Winkel 45 Grad beträgt.

Wenn der Winkel z.B. 60 Grad dann wären die Ergebnisse wie folgt:

Schritt 6: Beheben eines Problems mit dem Code

Nun, wir sind fast fertig. Aber es gibt immer noch ein kleines Problem mit unserem Code. Haben Sie bemerkt, dass unser Objekt niemals stoppt, selbst wenn es den Klickpunkt erreicht, bewegt es sich weiter. Wir können dieses Problem sehr einfach beheben. Wenn sich unser Objekt in Richtung des Klickpunkts bewegt, verkürzt sich der Abstand zwischen ihnen, sodass sich auch der absolute Wert des Abstands verringert. Wir können es so verfolgen:

(Math.abs() wandelt negative Zahlen in positive um, indem sie einfach mit -1 multipliziert werden. Es wirkt sich nicht auf positive Zahlen aus.)

Sie müssen diese Trace-Anweisung nicht zu Ihrem Code hinzufügen. Ich habe sie hier eingefügt, um Ihnen zu zeigen, wie Sie den absoluten Wert sehen können. In diesem Fall sind beide Absolutwerte kleiner als 3, wenn das Objekt den Klickpunkt erreicht. Was wir jetzt brauchen, ist eine if-Anweisung in unsere moveTheCircle() -Funktion einzufügen.

Wenn der Absolutwert unter 3 fällt, wird der Listener für die Eingabe von Frames entfernt. Wir müssen sowohl die absoluten Werte von X als auch von Y überprüfen, da einer von ihnen möglicherweise 3 erreicht, auch wenn der zweite dies nicht getan hat. Dies bedeutet, dass die Objekte möglicherweise folgendermaßen anhalten:

Das Bild oben zeigt die Version, in der nur der Absolutwert von X überprüft wird. Der absolute Wert des X-Abstands liegt bereits unter 3, sodass der Y-Wert nicht mehr beachtet wird.


Abschluss

Das war alles. Ich hoffe, dieser Quick-Tipp hilft Ihnen dabei, einige Trigonometrie zu verstehen, die in der Flash-Entwicklung verwendet werden :)

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.