7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Euklidische Vektoren in Flash

Read Time: 18 mins
This post is part of a series called You Do The Math.
Playing Around with Elastic Collisions
Gravity in Action

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der Activetuts+ -Geschichte. Das Retro-Active-Tutorial dieser Woche, das erstmals im April veröffentlicht wurde, enthält eine Anleitung zu euklidischen Vektoren: Was sie sind, warum Sie sie verwenden und wie Sie sie in Flash mit AS3 implementieren.

Euklidische Vektoren sind Objekte in Geometrie mit bestimmten Eigenschaften, die für die Entwicklung von Spielen sehr nützlich sind. Sie können als Punkte gesehen werden, haben aber auch eine Größe und eine Richtung. Sie werden als Pfeile dargestellt, die vom Anfangspunkt bis zum Endpunkt gehen, und so werden wir sie in diesem Artikel zeichnen.

Euklidische Vektoren werden in der Mathematik und Physik häufig für viele Dinge verwendet: Sie können Geschwindigkeit, Beschleunigung und Kräfte in der Physik darstellen oder dazu beitragen, viele wichtige Theoreme in der Mathematik zu beweisen. In diesem Tutorial lernen Sie euklidische Vektoren kennen und erstellen eine Klasse, die Sie in Ihren eigenen Flash-Projekten verwenden können.

Bitte beachten Sie, dass sich euklidische Vektoren von der Vektorklasse von ActionScript und auch von der Vektorzeichnung unterscheiden.

Vektoren können in der Flash-Umgebung verwendet werden, um komplexe Aufgaben zu erledigen, die andernfalls viel Aufwand erfordern würden, wenn sie ohne sie ausgeführt würden. In diesem Artikel erfahren Sie, wie Sie sie in Flash verwenden und wie Sie viele coole Tricks mit Vektoren lernen.


Schritt 1: Kartesische Koordinaten und Flash-Koordinaten

Bevor wir in Vektoren springen, wollen wir das Koordinatensystem von Flash vorstellen. Sie kennen wahrscheinlich das kartesische Koordinatensystem (auch wenn Sie es nicht namentlich kennen):

Flash math vectors in AS3

Das System von Flash ist sehr ähnlich. Der einzige Unterschied besteht darin, dass die y-Achse auf dem Kopf steht:

Flash math vectors in AS3

Wenn wir anfangen, mit Vektoren in Flash zu arbeiten, müssen wir uns daran erinnern. Gute Nachrichten: Dieses andere System macht keinen großen Unterschied. Das Arbeiten mit Vektoren darin ist im Grunde wie das Arbeiten mit Vektoren im kartesischen System.


Schritt 2: Vektorsdefinierung

In diesem Lernprogramm definieren und bearbeiten wir die Anfangspunkte aller Vektoren als Registrierungspunkt der Stufe, so wie sie in der Mathematik häufig verwendet werden. Ein Vektor wird dann genau wie ein gemeinsamer Punkt definiert, hat jedoch Größen- und Winkeleigenschaften. Schauen Sie sich einige Beispielvektoren an, die in der Phase definiert wurden:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Wie Sie sehen können, wird ein Vektor durch einen Pfeil dargestellt, und jeder Vektor hat eine bestimmte Länge (oder Größe) und zeigt entlang eines bestimmten Winkels. Der Schwanz jedes Vektors befindet sich am Registrierungspunkt (0, 0).

Für dieses Lernprogramm erstellen wir eine einfache EuclideanVector-Klasse, in der die Point-Klasse verwendet wird, um die Koordinaten des Vektors zu speichern. Lassen Sie uns jetzt die grundlegende Vektorklasse erstellen:

In diesem Tutorial werden wir über den Sinn und die Richtung eines Vektors sprechen. Beachten Sie, dass die Richtung nur eine Linie definiert, die den Vektor "enthält". Der Sinn definiert, in welche Richtung der Vektor entlang dieser Linie zeigt.


Schritt 3: Vektorinversion

In diesem Tutorial verwenden wir den Ausdruck "Inverse eines Vektors". Die Umkehrung eines Vektors ist ein anderer Vektor mit der gleichen Größe und Richtung, aber einem entgegengesetzten Sinn. Dies führt zu einem Vektor mit dem entgegengesetzten Signal der Koordinaten des ersten Vektors. Ein Vektor mit einem Endpunkt von (x, y) hätte also einen inversen Vektor mit einem Endpunkt von (-x, -y).

Flash math vectors in AS3

Fügen wir unserer EuclideanVector-Klasse eine Funktion hinzu, um den inversen Vektor zurückzugeben:


Schritt 4: Hinzufügung von den grundlegenden Operationen

Nachdem wir nun gelernt haben, wie man einen Vektor definiert, lernen wir, wie man zwei Vektoren hinzufügt: Es ist so einfach wie das separate Hinzufügen ihrer Koordinaten. Schauen Sie sich dieses Bild an:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Wenn Sie im Bild feststellen, ist das Ergebnis der Addition von zwei Vektoren ein weiterer Vektor, und Sie können sehen, dass seine Koordinaten die Summe der Koordinaten der beiden anderen Vektoren sind. Im Code würde es so aussehen:

Also können wir das sagen:


Schritt 5: Grundlegende Operationen Subtraktion

Die Subtraktion funktioniert fast genauso wie die Addition, aber stattdessen addieren wir die Umkehrung des zweiten Vektors zum ersten Vektor.

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Es ist bereits bekannt, wie zwei Vektoren summiert werden. Hier ist der Code für die Subtraktion:

Dieser Code ist äußerst nützlich, um einen Vektor zu erhalten, der vom Punkt eines Vektors zum Punkt eines anderen geht. Schauen Sie sich das Bild noch einmal an und Sie werden sehen, dass dies wahr ist. Es wird in den späteren Beispielen häufig verwendet.


Schritt 6: Grundlegende Operationen Multiplikation mit einer Zahl

Die Multiplikation zwischen einem Vektor und einer Zahl (reguläre Zahlen werden in der Vektormathematik als "Skalare" bezeichnet) führt zu einem Vektor, dessen Größe mit dieser Zahl multipliziert wurde, der aber immer noch in die gleiche Richtung zeigt. Es wird "gedehnt", wenn der Skalar größer als 1 ist, und gequetscht, wenn der Skalar zwischen 0 und 1 liegt. Der Sinn des neuen Vektors ist der gleiche wie der ursprüngliche Vektor, wenn der Skalar positiv ist, oder das Gegenteil, wenn er negativ ist. Grundsätzlich "skaliert" diese Zahl den Vektor. Sehen Sie das Bild an:

Flash math vectors in AS3

Im Code multiplizieren wir nur die Koordinaten eines Vektors mit der Zahl, wodurch der Vektor skaliert wird:


Schritt 7: Ermitteln der Größe eines Vektors

Um die Größe eines Vektors zu erhalten, verwenden wir den Satz von Pythagoras. Wenn Sie vergessen haben, was es ist, finden Sie hier eine kurze Auffrischung:

Flash math vectors in AS3

(Mehr Infos hier.)

Der Code ist sehr einfach:

Sie sollten auch die public var magnitude:Number, da dies von nun an verwendet wird.

Die Größe eines Vektors ist immer positiv, da es sich um die Quadratwurzel der Summe zweier positiver Zahlen handelt.


Schritt 8: Ermitteln des Winkels eines Vektors

Der Winkel eines Vektors ist der Winkel zwischen der x-Achse und der Richtungslinie des Vektors. Der Winkel wird von der x-Achse aus gemessen und gegen den Uhrzeigersinn bis zur Richtungslinie im kartesischen System gedreht:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Im Koordinatensystem von Flash wird dieser Winkel jedoch im Uhrzeigersinn gemessen, da die y-Achse auf dem Kopf steht:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Dies kann einfach mit dem folgenden Code berechnet werden. Der Winkel wird im Bogenmaß in einem Bereich von 0 bis 2 pi zurückgegeben. Wenn Sie nicht wissen, was Bogenmaß ist oder wie Sie es verwenden sollen, hilft Ihnen dieses Tutorial von Michael James Williams sehr.


Schritt 9: Punktprodukt

Das Punktprodukt zwischen zwei Vektoren ist eine Zahl, die anscheinend keine Bedeutung hat, aber zwei nützliche Verwendungszwecke hat. Schauen wir uns zunächst an, wie das Punktprodukt berechnet werden kann:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Es kann aber auch durch die Koordinaten jedes Vektors erhalten werden:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Das Punktprodukt kann viel über den Winkel zwischen den Vektoren aussagen: Wenn es positiv ist, reicht der Winkel von 0 bis 90 Grad. Wenn es negativ ist, reicht der Winkel von 90 bis 180 Grad. Wenn es Null ist, beträgt der Winkel 90 Grad. Dies geschieht, weil in der ersten Formel nur der Kosinus dafür verantwortlich ist, dem Punktprodukt ein "Signal" zu geben: Die Größen sind immer positiv. Wir wissen jedoch, dass ein positiver Kosinus bedeutet, dass der Winkel zwischen 0 und 90 Grad liegt, und so weiter für negative Kosinus und Null.

Das Punktprodukt kann auch verwendet werden, um die Länge eines Vektors in Richtung des anderen Vektors darzustellen. Betrachten Sie es als eine Projektion. Dies erweist sich als äußerst nützlich in Dingen wie dem Separation of Axis Theorem (SAT) und seiner Implementierung in AS3 zur Kollisionserkennung und -reaktion in Spielen.

Hier ist der praktische Code, um das Punktprodukt zwischen zwei Vektoren zu erhalten:


Schritt 10: Kleinster Winkel zwischen Vektoren

Der Winkel zwischen Vektoren, wie in Schritt 9 gezeigt, kann durch das Punktprodukt angegeben werden. So berechnen Sie es:


Schritt 11: Fernwinkel zwischen Vektoren

Es gibt auch eine andere Möglichkeit, den Winkel zu berechnen, die Ergebnisse zwischen -pi und pi liefert und immer den Winkel berechnet, der vom ersten zum zweiten Vektor geht. Dies ist nützlich, wenn Sie die Drehung eines Anzeigeobjekts (zwischen -180 und 180) problemlos integrieren möchten.

Die Methode ermittelt den Winkel für beide Vektoren, subtrahiert dann die Winkel und arbeitet am Ergebnis.

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Der Code:

Beachten Sie, dass dieser Winkel positiv ist, wenn secondAngle höher als firstAngle ist. Die Reihenfolge, in der Sie den Entfernungswinkel erhalten, wirkt sich also auf das Ergebnis aus!


Schritt 12: Normalisieren eines Vektors

Das Normalisieren eines Vektors bedeutet, dass seine Größe gleich 1 ist, während die Richtung und der Sinn des Vektors erhalten bleiben. Dazu multiplizieren wir den Vektor mit 1/magnitude. Auf diese Weise wird seine Größe auf 1 verringert oder erhöht.


Schritt 13: Ermitteln der Normalität eines Vektors

Die Normale eines Vektors ist ein weiterer Vektor, der einen Winkel von 90 Grad zum ersten bildet. Es kann nach folgenden Formeln berechnet werden:

Flash math vectors in AS3

Die Formeln beruhen auf der Tatsache, dass wir, da die Normalen immer senkrecht zu einem Vektor sind, nur die Reihenfolge der x- und y-Koordinaten ändern und eine davon invertieren müssen, um eine Normalen zu erhalten. Das folgende Bild zeigt den Vorgang:

Flash math vectors in AS3

Im Bild ist Vec der ursprüngliche Vektor, Vec2 ist der Vektor mit den vertauschten Koordinaten von Vec und Vec3 ist ein Vektor mit der negativen y-Koordinate von Vec2. Ang und Ang2 sind variabel, aber der Winkel zwischen Vec und Vec3 beträgt immer 90 Grad.

Und der Code ist einfach


Schritt 14: Drehen eines Vektors

Um einen Vektor zu drehen, nehmen wir an, dass die Position (0, 0) (ihr Anfangspunkt) das Rotationszentrum ist. Der Drehpunkt ergibt sich aus der Formel:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Diese Formel wird erhalten, indem eine Rotationsmatrix auf diesen Vektor angewendet wird. Wir würden den Rahmen dieses Tutorials sprengen, wenn wir uns mit der Matrix und ihrer Funktionsweise befassen würden. Daher werde ich die Formel hier belassen.

Der Code ist ziemlich gleich:

Dies ist das Ende unserer grundlegenden Vektoroperationen. Was Sie als nächstes sehen werden, sind Möglichkeiten, diese Klasse zu verwenden, um interessante Dinge zu tun. Hier ist unsere Klasse bisher:


OK, wir haben uns mit dem Erstellen der Vektorklasse befasst. Lassen Sie uns nun versuchen, sie zu verwenden.


Schritt 15: Bestimmen, ob sich ein Punkt innerhalb eines Polygons befindet

Die Aktion beginnt hier. Es ist ein sehr interessantes Thema, festzustellen, ob ein Punkt innerhalb eines Polygons liegt oder nicht, und es gibt viele Methoden, um dies zu erreichen. In diesem Artikel werde ich die drei allgemein verwendeten Methoden vorstellen:

  • Der Algorithmus für Kreuzungszahlen oder gerade-ungerade Regeln, der bestimmt, ob sich ein Punkt innerhalb eines Polygons befindet, anhand der Anzahl der Kanten, die ein "Strahl" vom Punkt bis zur Unendlichkeit kreuzt.
  • Der Wicklungszahlalgorithmus, der die Antwort basierend auf der Summe aller Winkel gibt, die zwischen aufeinanderfolgenden Eckpunkten eines Polygons und dem zu prüfenden Punkt gebildet werden.
  • Der konvexe Polygonalgorithmus, der, wie der Name schon sagt, nur für konvexe Polygone funktioniert und darauf basiert, ob sich ein Punkt auf einer bestimmten "Seite" jeder Kante des Polygons befindet oder nicht.

Alle diese Algorithmen basieren auf der Tatsache, dass Sie die Koordinaten der Eckpunkte (Ecken) kennen, die das Polygon definieren.


Schritt 16: Der Algorithmus für Kreuzungszahlen oder gerade ungerade Regeln

Dieser Algorithmus kann für jede Form verwendet werden. Das lesen Sie: jede Form, ob Löcher oder nicht, ob konvex oder nicht. Es basiert auf der Tatsache, dass jeder Strahl, der von dem Punkt, den Sie auschecken möchten, bis ins Unendliche geworfen wird, eine gerade Anzahl von Kanten kreuzt, wenn sich der Punkt außerhalb der Form befindet, oder eine ungerade Anzahl von Kanten, wenn sich der Punkt innerhalb der Form befindet. Dies kann durch den Jordan-Kurvensatz bewiesen werden, der impliziert, dass Sie eine Grenze zwischen einer Region und einer anderen Region überschreiten müssen, wenn Sie von einer zur anderen wechseln möchten. In unserem Fall befinden sich unsere Regionen "innerhalb der Form" und "außerhalb der Form".

Flash math vectors in AS3
Flash math vectors in AS3
Flash math vectors in AS3

Der Code für diesen Algorithmus lautet wie folgt:

Es wird false zurückgegeben, wenn sich der Punkt nicht innerhalb der Form befindet, oder true, wenn sich der Punkt innerhalb der Form befindet.


Schritt 17: Der Wicklungszahlalgorithmus

Der Wicklungszahlalgorithmus verwendet die Summe aller Winkel zwischen dem zu prüfenden Punkt und jedem Punktpaar, das das Polygon definiert. Wenn die Summe nahe bei 2 pi liegt, befindet sich der zu prüfende Punkt innerhalb des Vektors. Wenn es nahe bei 0 liegt, liegt der Punkt außerhalb.

Flash math vectors in AS3

Der Code verwendet den Entfernungswinkel zwischen Vektoren und bietet Platz für Ungenauigkeiten: Beachten Sie, wie wir die Ergebnisse der Summe aller Winkel überprüfen. Wir prüfen nicht, ob der Winkel genau Null oder 2 pi ist. Stattdessen prüfen wir, ob es kleiner als pi und höher als pi ist, ein beträchtlicher Medianwert.


Schritt 18: Der konkave Polygon-Algorithmus

Der Algorithmus für konkave Polygone beruht auf der Tatsache, dass sich bei einem konkaven Polygon ein Punkt darin immer links von den Kanten befindet (wenn wir sie gegen den Uhrzeigersinn durchlaufen) oder rechts von den Kanten (wenn wir durchlaufen sie im Uhrzeigersinn).

Flash math vectors in AS3

Stellen Sie sich vor, Sie stehen in einem Raum in der Form des obigen Bildes und gehen mit der linken Hand an der Wand entlang um die Ränder. An dem Punkt entlang der Wand, an dem Sie dem Punkt am nächsten sind, an dem Sie interessiert sind, muss er sich im Raum befinden, wenn er sich zu Ihrer Rechten befindet. Wenn es zu Ihrer Linken ist, muss es draußen sein.

Das Problem besteht darin, zu bestimmen, ob sich ein Punkt links oder rechts von einer Kante befindet (was im Grunde ein Vektor ist). Dies geschieht durch die folgende Formel:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Diese Formel gibt eine Zahl kleiner als 0 für Punkte rechts vom Rand und größer als 0 für Punkte links davon zurück. Wenn die Zahl gleich 0 ist, liegt der Punkt am Rand und wird innerhalb der Form berücksichtigt. Der Code lautet wie folgt:

Dieser Code funktioniert unabhängig davon, ob Sie die Scheitelpunkte der Form im oder gegen den Uhrzeigersinn definiert haben.


Schritt 19: Ray Casting

Ray Casting ist eine Technik, die häufig zur Kollisionserkennung und zum Rendern verwendet wird. Es besteht aus einem Strahl, der von einem Punkt zum anderen (oder ins Unendliche) geworfen wird. Dieser Strahl besteht aus Punkten oder Vektoren und stoppt im Allgemeinen, wenn er auf ein Objekt oder den Rand des Bildschirms trifft. Ähnlich wie bei den Point-in-Shape-Algorithmen gibt es viele Möglichkeiten, Strahlen zu werfen, und wir werden in diesem Beitrag zwei davon sehen:

  • Der Bresenham-Linienalgorithmus ist ein sehr schneller Weg, um nahe Punkte zu bestimmen, die eine Annäherung an eine Linie zwischen ihnen ergeben würden.
  • Die DDA-Methode (Digital Differential Analyzer), mit der auch eine Linie erstellt wird.

In den nächsten beiden Schritten werden wir beide Methoden untersuchen. Danach werden wir sehen, wie wir unseren Strahl stoppen lassen, wenn er auf ein Objekt trifft. Dies ist sehr nützlich, wenn Sie eine Kollision mit sich schnell bewegenden Objekten erkennen müssen.


Schritt 20: Der Bresenham-Linienalgorithmus

Dieser Algorithmus wird sehr häufig in der Computergrafik verwendet und hängt von der Konvention ab, dass die Linie immer nach rechts und unten zeigt. (Wenn eine Linie nach oben und links erstellt werden muss, wird alles später invertiert.) Gehen wir zum Code:

Der Code erzeugt einen AS3-Vektor euklidischer Vektoren, der die Linie bildet. Mit diesem Vektor können wir später nach Kollisionen suchen.


Schritt 21: Die DDA-Methode

Eine Implementierung des Digital Differential Analyzer wird verwendet, um Variablen zwischen zwei Punkten zu interpolieren. Im Gegensatz zum Bresenham-Linienalgorithmus werden bei dieser Methode der Einfachheit halber nur Vektoren an ganzzahligen Positionen erstellt. Hier ist der Code:

Dieser Code gibt auch einen AS3-Vektor euklidischer Vektoren zurück.


Schritt 22: Überprüfen auf Kollisionen mithilfe von Strahlen

Das Überprüfen der Kollision über Strahlen ist sehr einfach. Da ein Strahl aus vielen Vektoren besteht, prüfen wir, ob zwischen jedem Vektor und einer Form Kollisionen bestehen, bis einer erkannt wird oder das Ende des Strahls erreicht ist. Im folgenden Code ist shapeToCheck eine Form, wie wir sie in den Schritten 13-16 verwendet haben. Hier ist der Code:

Sie können jede Point-Inside-Shape-Funktion verwenden, mit der Sie sich wohl fühlen, aber beachten Sie die Einschränkungen der letzten!


Abschluss

Sie können dieses Wissen jetzt überall einsetzen! Dies ist viele Male nützlich und erspart Ihnen viele zusätzliche Berechnungen, wenn Sie versuchen, komplexere Aufgaben in Flash auszuführen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.