Share
Das Animieren von Animationen in Form von Vektoren ist intuitiv, aber das Verständnis der Vektor-Mathematik ist ein Schmerz. In diesem Tutorial hoffe ich, diesen Schmerz zu lindern und eine Lösung für Animationsprobleme mit einer benutzerdefinierten Vector2D-Klasse zu finden. Wir betrachten einige grundlegende Konzepte der linearen Kinematik im Euler-Ansatz: Verschiebung, Geschwindigkeit und Beschleunigung. Dann erstellen wir eine einfache Anwendung damit.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden. Klicken Sie unten auf das Flash-Feld und steuern Sie die Pfeilspitze, indem Sie die vier Richtungstasten drücken.
Alle Vektorgrößen haben zwei Komponenten: Größe und Richtung.
Eine Änderung der Vektormengen bezieht sich auf einen der folgenden Fälle:
Verschiebung, Geschwindigkeit und Beschleunigung sind Vektorgrößen. Ihre Definitionen lauten wie folgt:
Die folgende Animation zeigt die Verschiebung, die wir später in Flash implementieren werden.
Die Geschwindigkeit wird durch die folgende Animation veranschaulicht. Die Notengeschwindigkeit ist konstant, dh die Beschleunigung ist in diesem Szenario nicht vorhanden. Wenn die Geschwindigkeit Null ist, bleibt die Verschiebung durchgehend konstant.
Die Beschleunigung wird durch die folgende Animation veranschaulicht. Hinweis: Kinematik impliziert Konstante Beschleunigung. Wenn sich die Beschleunigung im Laufe der Zeit ändert, fällt sie unter das Thema Dynamik. Dynamik ist die Untersuchung von Kräften, die dazu führen, dass sich die Beschleunigung im Laufe der Zeit verändert. Eine solche Kraft ist die Schwerkraft, und ich habe einen Beitrag geschrieben, um das zu animieren.
Nachdem Sie ein kurzes Verständnis der linearen Kinematikgrößen erlangt und in der Lage sind, sie mit Vektoren in Verbindung zu bringen, können wir mit dem Aufbau unserer Projektilklasse beginnen. Wir möchten, dass das Projektil alle diese Größen erfassen kann: Verschiebung, Geschwindigkeit und Beschleunigung, damit es an jedem Bild manipuliert werden kann.
Nachfolgend finden Sie die Daten, die wir in unserer Projectile-Klasse erfassen werden:
privates var verdrängen: Vector2D; private var velo: Vector2D; private var gem: Vector2D;
Bei der Initiierung dieser Projektil-Klasse initialisieren wir die erwähnten Variablen und zeichnen deren grafische Darstellung.
öffentliche Funktion Projectile () // Grafik zeichnen this.draw (); // init alle Vektorgrößen displace = new Vector2D (this.x, this.y); velo = neuer Vector2D (0, 0); acc = new Vector2D (0, 0); protected function draw (): void // Zeichnen der Pfeilspitze var height: Number = 30; var width: Anzahl = 60; graphics.beginFill (0x0000FF); graphics.moveTo (0, 0); graphics.lineTo (Breite / -3, Höhe / -2); graphics.lineTo (width / 2, 0); graphics.lineTo (Breite / -3, Höhe / 2); graphics.lineTo (0, 0); graphics.endFill ();
Die folgenden sind Zugriffsmethoden auf unsere privaten Variablen - verdrängen, velo, acc - in der Projectile-Klasse.
öffentliche Funktion setDisp (mag: Number, angle: Number): void displace.redefine (mag, angle); public function getDisp (): Vector2D return verdrängen; public function setVelo (mag: Number, angle: Number): void velo.redefine (mag, angle); public function getVelo (): Vector2D return velo; public function setAcc (mag: Number, angle: Number): void acc.redefine (mag, angle); öffentliche Funktion getAcc (): Vector2D return acc
Beim Aktualisieren jedes Frames müssen wir die Geschwindigkeit aktualisieren (mithilfe der Beschleunigung) und die Verschiebung (unter Verwendung der genannten Geschwindigkeit) aktualisieren. Dies kann mit den folgenden Funktionen erreicht werden. Um eine ausführliche Erklärung zu Vector zu erhalten, besuchen Sie diesen großartigen Beitrag von Daniel Sidhon.
public function applyVelo (): void this.displace = this.displace.add (velo); public function applyAcc (): void this.velo = this.velo.add (acc); // Aktualisiere die Position des Sprites durch Verschiebung. public function animate (): void this.x = this.displace.x; this.y = this.displace.y;
Wir müssen auch die Ausrichtung des Sprites aktualisieren. Dies kann durch die erreicht werden Drehung Eigentum von Sprite.
public function orient (): void this.rotation = Math2 ° Grad (velo.getAngle ());
Ich habe auch eine implementiert Math2 statische Klasse, in der ich eine Funktion geschrieben habe, um die Winkeleinheiten von Grad und Bogenmaß leicht hin und her zu konvertieren.
öffentliche statische Funktion radianOf (deg: Number): Number return deg / 180 * Math.PI; öffentliche statische Funktion degreeOf (rad: Number): Number return rad / Math.PI * 180;
Nachdem wir unsere Klasse Projectile und Math2 eingerichtet haben, können wir anfangen, unsere Hauptklasse zu codieren. Wir benötigen auch eine Vector2D-Klasse, obwohl aufgrund des oben genannten Artikels über Vectors von Daniel Sidhon keine ausführlichen Erklärungen enthalten sind. Ich gehe davon aus, dass die Leser die Vector2D-Klasse nach dem Lesen verstehen. Wenn Sie jedoch Klarstellungen benötigen, bitten Sie mich, Ihre Fragen zu beantworten.
Zunächst müssen wir private Variablen dieser Klasse kennen.
private var b1: Geschoss; // Tastendruck Flags private var UP: Boolean = false; private var DOWN: Boolean = false; private var LEFT: Boolean = false; private var RECHTS: Boolean = false;
Funktion bei der Initialisierung von Main drin wird gestartet. Diese Funktion erstellt ein neues Projektil und stellt seine Anfangsgeschwindigkeit ein. Dann werden Listener für Ereignisse zugewiesen.
private Funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Einstiegspunkt b1 = neues Projektil (); stage.addChild (b1); // Einstellen der Anfangsgeschwindigkeit b1.setVelo (5, Math2.radianOf (30)); // Festlegen von Ereignislistenern b1.addEventListener (Event.ENTER_FRAME, proj_enterFrame); stage.addEventListener (KeyboardEvent.KEY_DOWN, handle_keyDown); stage.addEventListener (KeyboardEvent.KEY_UP, handle_keyUp);
Ich habe die Benutzersteuerung als Tastendruck auf die Pfeiltasten nach oben, links, unten und links definiert. Wenn Sie diese Tasten drücken und loslassen, werden die Flag-Variablen von Main (Schritt 11) auf true und false gesetzt. Basierend auf diesen Flags werden die Vektorgrößen in jedem Frame geändert. Beachten Sie auch, dass ich die Steuerelemente in Manipulatoren für horizontale und vertikale Achsen unterteilt habe.
private Funktion handle_keyDown (e: KeyboardEvent): void if (e.keyCode == Keyboard.UP) UP = true; else if (e.keyCode == Keyboard.DOWN) DOWN = true; if (e.keyCode == Keyboard.LEFT) LEFT = true; else if (e.keyCode == Keyboard.RIGHT) RECHTS = wahr; private Funktion handle_keyUp (e: KeyboardEvent): void if (e.keyCode == Keyboard.UP) UP = false; else if (e.keyCode == Keyboard.DOWN) DOWN = false; if (e.keyCode == Keyboard.LEFT) LEFT = false; else if (e.keyCode == Keyboard.RIGHT) RIGHT = false;
Bei der Aktualisierung jedes Rahmens wird der folgende Code ausgeführt. Es ist lang, aber mach dir keine Sorgen; Lesen Sie einfach weiter.
private Funktion proj_enterFrame (e: Event): void // Beschleunigung definieren var accMag: Number = 0.1; if (UP) b1.setAcc (accMag, Math2.radianOf (-90)); b1.applyAcc (); else if (DOWN) b1.setAcc (accMag, Math2.radianOf (90)); b1.applyAcc (); if (LEFT) b1.setAcc (accMag, Math2.radianOf (180)); b1.applyAcc (); else if (RECHTS) b1.setAcc (accMag, Math2.radianOf (0)); b1.applyAcc (); // verlangsamen, wenn zur Simulation der Reibung Nothng gedrückt wird. if (UP + DOWN + LEFT + RIGHT == 0) var currentVeloMag: Number = b1.getVelo (). getMagnitude (); var currentVeloAng: Number = b1.getVelo (). getAngle (); if (currentVeloMag> 1) b1.setAcc (accMag * -1, currentVeloAng); b1.applyAcc (); b1.applyVelo (); // Beschränken des Sprites auf die Ränder der Bühne b1.getDisp (). x = Math2.implementBound (0, stage.stageWidth, b1.getDisp (). x); b1.getDisp (). y = Math2.implementBound (0, stage.stageHeight, b1.getDisp (). y); b1.belebt (); b1.orient ();
Die Aktualisierung des Antrags sollte in der folgenden Reihenfolge erfolgen:
Ich habe die Codes zur einfachen Identifizierung dieser Schritte hervorgehoben.
private Funktion proj_enterFrame (e: Event): void // Beschleunigung definieren var accMag: Number = 0.1; if (UP) b1.setAcc (accMag, Math2.radianOf (-90)); b1.applyAcc (); else if (DOWN) b1.setAcc (accMag, Math2.radianOf (90)); b1.applyAcc (); if (LEFT) b1.setAcc (accMag, Math2.radianOf (180)); b1.applyAcc (); else if (RECHTS) b1.setAcc (accMag, Math2.radianOf (0)); b1.applyAcc (); // verlangsamen, da nichts gedrückt wird, um Reibung zu simulieren. if (UP + DOWN + LEFT + RIGHT == 0) var currentVeloMag: Number = b1.getVelo (). getMagnitude (); var currentVeloAng: Number = b1.getVelo (). getAngle (); if (currentVeloMag> 1) b1.setAcc (accMag * -1, currentVeloAng); b1.applyAcc (); b1.applyVelo (); // Beschränken des Sprites auf die Ränder der Bühne b1.getDisp (). x = Math2.implementBound (0, stage.stageWidth, b1.getDisp (). x); b1.getDisp (). y = Math2.implementBound (0, stage.stageHeight, b1.getDisp (). y); b1.belebt (); b1.orient ();
Sie können feststellen, dass zwischen diesen hervorgehobenen Codes weitere Funktionen eingefügt sind. Was sind Sie? Anwenden eines anderen Vektors, um unser Projektil zu verlangsamen, da der Benutzer keine Tasten drückt. Dies wird angewendet, bevor wir unserer Verschiebung Geschwindigkeit hinzufügen.
// verlangsamen, wenn zur Simulation der Reibung Nothng gedrückt wird. if (UP + DOWN + LEFT + RIGHT == 0) var currentVeloMag: Number = b1.getVelo (). getMagnitude (); var currentVeloAng: Number = b1.getVelo (). getAngle (); if (currentVeloMag> 1) b1.setAcc (accMag * -1, currentVeloAng); b1.applyAcc ();
Die nächste ist, unser Projektil so einzuschränken, dass es immer auf der Bühne bleibt, sonst fliegt es aus dem Bildschirm. Nochmal, implementBound ist eine Funktion, die ich in die statische Klasse Math2 aufgenommen habe. Gegeben eine Obergrenze, Untergrenze und einen zufälligen Wert, implementBound gibt einen Wert zurück, der innerhalb der Grenzen liegt.
Nachdem wir diese Einschränkungen auf unsere Verschiebung angewendet haben (und erst danach), aktualisieren wir die Position des Sprites mit diesem Verschiebungswert.
// Beschränken des Sprites auf die Ränder der Bühne b1.getDisp (). x = Math2.implementBound (0, stage.stageWidth, b1.getDisp (). x); b1.getDisp (). y = Math2.implementBound (0, stage.stageHeight, b1.getDisp (). y);
Bevor wir dieses Sprite so belassen, wie es ist, sollten wir es so ausrichten, dass es immer auf die Position zeigt, in der die Überschrift verwendet wird Orient.
Jetzt ist alles bereit. Wenn Sie dieses Stück durch Drücken von Strg + Eingabetaste starten, wird ein Pfeil angezeigt, der allmählich verlangsamt, während er diagonal den Bildschirm nach unten bewegt. Drücken Sie auf die vier Richtungstasten, um den Pfeil zu verschieben. Machen Sie sich keine Sorgen, Ihren Pfeil zu verlieren. es bleibt in deiner Sicht.
In diesem Artikel sollten Sie sich mit der Verwendung von Vektoren zur Bewegungsanimation vertraut machen. Wenn Sie die Kinematik verstanden haben, lesen Sie in meinem Beitrag zur Dynamik nach. Lass mich wissen, wie es geht. Terima Kasih.
Accentsconagua