Advertisement
  1. Code
  2. Games

Ein Ziel mit einer tödlichen Zielsuchrakete treffen

by
Read Time:13 minsLanguages:
This post is part of a series called You Do The Math.
Gravity in Action
Circular Motion in AS3: Make One Moving Object Orbit Another

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

Dieses Tutorial führt Sie durch das Hinzufügen tödlich genauer Zielsuchraketen zum Arsenal Ihres nächsten Spiels.


Vorschau des Endergebnisses

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden:


Schritt 1: Richten Sie das FLA-Dokument ein

Erstellen Sie einen neuen Flash-Dokumentensatz für ActionScript 3.0. Ich werde die Abmessungen 600x400 und eine Bildrate von 30 FPS verwenden. Speichern Sie die Datei unter einem Namen Ihrer Wahl.

Create a .FLA documentCreate a .FLA documentCreate a .FLA document

Schritt 2: Erstellen Sie eine Dokumentklasse

Neben der FLA müssen wir auch eine Dokumentklasse erstellen. Erstellen Sie eine neue Actionscript-Datei und fügen Sie diesen Code hinzu:

Speichern Sie diese Datei im selben Verzeichnis wie unsere FLA. Nennen Sie es Main.as.


Schritt 3: Verknüpfen Sie die Main klasse mit der FLA

Um den Code aus der Main klasse zu kompilieren, müssen wir ihn mit der FLA verknüpfen. Geben Sie im Eigenschaftenfenster der FLA neben Klasse den Namen der Dokumentklasse ein, in diesem Fall Main.

Link the Main class with the FLA

Speichern Sie dann die Änderungen auf der FLA.


Schritt 4: Zeichnen Sie eine Rakete

Wir brauchen eine Raketengrafik, die beim Schießen angezeigt wird. Sie können eine Bitmap importieren oder direkt dort in Flash eine Form zeichnen. Ich werde in diesem Beispiel eine winzige Form verwenden.

Draw a missile shape or import a missile bitmap.

Wichtig ist hierbei, dass Sie den Raketenpunkt direkt nach rechts richten müssen, da das der Ursprungspunkt für die Rotation ist. 0° bedeutet also, direkt nach rechts zu zeigen, -90° bedeutet nach oben, 90° bedeutet nach unten und 180° bedeutet nach links. Später müssen wir die Rakete entsprechend ihrer Richtung drehen.


Schritt 5: Erstellen Sie einen MovieClip für die Rakete

Wenn Sie die Raketengrafik haben, wählen Sie sie aus und drücken Sie F8, um einen Movieclip zu erstellen. Nennen Sie es "Missile", stellen Sie sicher, dass sich der Registrierungspunkt in der Mitte befindet, und aktivieren Sie das Kontrollkästchen "Export for ActionScript".

Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.Create a MovieClip out of the missile you drew.

Sie erhalten einen Missile MovieClip in der Bibliothek.

Missile MovieClip in the Library.

Wenn Sie eine Missile-Instanz auf der Bühne haben, löschen Sie sie. Wir werden den Missile MovieClip per Code hinzufügen.


Schritt 6: Ziel

Das erste, was eine Zielsuchrakete wissen muss, ist, wo sich das Ziel befindet. Wir werden zuerst die Drehung des Flugkörpers entsprechend der Position des Mauszeigers einstellen. Lassen Sie uns mit dem enterFrame-Ereignis für eine konstante Rotationsaktualisierung arbeiten.

Fügen Sie der Bühne eine Missile-Instanz hinzu, ich platziere sie in der Mitte (300, 200). Berechnen Sie dann die Entfernung vom Flugkörper zum Mauszeiger (ich speichere sie in den Variablen targetX und targetY). Schließlich ist der Winkel des Flugkörpers die Bogentangente beider Punkte (targetXtargetY). Das Ergebnis wird im Bogenmaß angezeigt, aber die Drehung erfolgt in Grad. Daher müssen Sie die Konvertierung durch Multiplikation mit 180/Pi durchführen. (Um zu sehen warum, lesen Sie diesen Artikel.)

(Sie sind sich nicht sicher, wofür Math.atan2() gedacht ist? Lesen Sie diesen Artikel über Trigonometrie.

Wenn Sie das Dokument an dieser Stelle veröffentlichen (Strg + Eingabetaste), muss so aussehen:

Bewegen Sie Ihre Maus in die Nähe der Rakete, um zu sehen, wie sie sich dreht.


Schritt 7: Suchen

Wir haben die Rotation, jetzt brauchen wir die Bewegung. Die Rakete muss das Ziel suchen, egal ob es sich um ein stabiles oder ein sich bewegendes Ziel handelt. Wir berechnen die Bewegung anhand der aktuellen Rotation des Flugkörpers. Lassen Sie uns einen Wert für die Geschwindigkeit festlegen und die Raketenjagd nach dem Mauszeiger durchführen.

Wir werden einige neue Variablen zur Berechnung der Geschwindigkeit (vx, vy) hinzufügen. Wenn die Rakete nach rechts zeigt, ist ihr Winkel kleiner als 90° und höher als -90°, sodass er immer niedriger als der absolute Wert von 90° ist. Wenn es nach links zeigt, hat sein Winkel einen absoluten Wert von mehr als 90°. Das bestimmt vx gemäß der Geschwindigkeit, dann ist vy die Differenz von Geschwindigkeit und vx.

Sie erhalten eine Rakete, die Ihren Cursor verfolgt.

Sie können eine andere Geschwindigkeit verwenden, wenn Sie möchten.


Schritt 8: Erstellen Sie einen Raketenwerfer

Raketen kommen nicht aus der Luft, sondern aus Raketenwerfern. Lassen Sie uns einen MovieClip erstellen, der eine Kanone darstellt (ich verwende ein einfaches Rechteck), und ihn Kanone nennen. Ich werde eine Cannon-Instanz per Code hinzufügen, also werde ich die Bühne leer halten.

Cannon MovieClip in the Library.

Schritt 9: Schießen

Anstatt eine Rakete hinzuzufügen, füge ich jetzt nur eine Kanone hinzu, und eine Rakete wird an der Position der Kanone hinzugefügt, wenn ich auf die Bühne klicke. Wir werden einen booleschen Wert hinzufügen, um zu überprüfen, ob die Rakete abgeschossen wurde, sowie eine neue Funktion zum Schießen nach dem Klicken.

Si bekkommen folgenden Code:

Das sieht nicht gut aus. Wir müssen entweder die Kanone ebenfalls drehen lassen oder die Rakete zwingen, direkt nach dem Schuss nach oben zu fliegen. Da Option 1 der einfachste Ansatz ist, wählen wir Option 2.


Schritt 10: Weniger Präzision für ein besseres Aussehen

Wenn die Kanone vertikal ist, würden wir erwarten, dass die Rakete nach oben startet und dann auf dem richtigen Weg zum Ziel ist. Der Ansatz, den ich verwenden werde, um das zu erreichen, besteht darin, der Rakete einen Startwinkel von -90° (nach oben zeigend) zu geben und sie sanft zu drehen, um auf die Spur des Mauszeigers zu gelangen. Wir werden eine Leichtigkeitsvariable hinzufügen, um die Glätte oder Schärfe der Drehung zu bestimmen. Dann erstellen wir eine weitere Variable, um die tatsächliche Rotation zu verfolgen, die direkt auf das Ziel zeigt, während sich die Rotation des Flugkörpers entsprechend der von uns festgelegten Leichtigkeit ändert (Leichtigkeit = 1 verhält sich wie zuvor, alles Höhere macht eine sanftere Drehung).

Da die Hälfte der Rotationswerte negativ ist, müssen wir sie in einigen Fällen gegen 360 berechnen, um die tatsächliche Differenz zwischen dem Zielwinkel und der Rotation des Flugkörpers zu erhalten.

Hören Sie zu:

Beachten Sie, was passiert, wenn Sie Ihre Maus aus dem SWF herausbewegen, und wie sich das vom vorherigen Beispiel unterscheidet.


Schritt 11: Raketentreffer, Raketenexplosion

Neben dem Missile Movie Clip benötigen wir eine Explosionsanimation. In meinem Fall mache ich einen separaten MovieClip mit einem einfachen Tween eines Kreises, der sich erweitert. Ich exportiere es als Explosion. Drücken Sie O, um das ovale Werkzeug auszuwählen, und halten Sie die Umschalttaste gedrückt, während Sie das Oval zeichnen, um einen Kreis zu erhalten.

The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.The circle inside its own Movie Clip with a Bevel filter.

Für einen schöneren visuellen Effekt werde ich den Kreis in einen anderen Movieclip einfügen und ihm einen Abschrägungsfilter geben, um unten eine dunklere Farbe und oben eine hellere Farbe zu erhalten. Als nächstes gehe ich zu Frame 10 und drücke F6, um einen Keyframe zu erstellen. Klicken Sie dann mit der rechten Maustaste zwischen Frame 1 und 10 und erstellen Sie ein klassisches Tween. Drücken Sie in Bild 10 Q, um das freie Transformationswerkzeug auszuwählen und den Kreis zu vergrößern.

Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.Enlarge the circle in a Classic Tween.

Erstellen Sie dann ein weiteres klassisches Tween für Bild 20, und fügen Sie einen Unschärfefiltereffekt hinzu.

Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.Add a Blur filter in a Classic Tween.

Lassen Sie es schließlich in einem letzten klassischen Tween verschwinden, um Bild 30 mit einem Alpha-Farbeffekt auf 0 zu setzen.

Alpha color effect set to 0 in a Classic Tween.

Schritt 12: Räumen Sie die Bühne auf

Die Explosionsanimation muss nach Abschluss entfernt werden, da sie sonst auf unbestimmte Zeit wiederholt wird. Fügen Sie eine neue Ebene hinzu und drücken Sie im letzten Bild F6. Drücken Sie dann F9, um das Bedienfeld Aktionen zu öffnen, und fügen Sie den folgenden Code hinzu:

Dadurch entfernt sich die Explosionsinstanz nach Abschluss der Animation von selbst.

The Explosion instance will remove itself.The Explosion instance will remove itself.The Explosion instance will remove itself.

Schritt 13: Explodieren

Wenn die Rakete auf den Cursor trifft, ersetzen wir sie durch eine Explosionsinstanz. Wir müssen nur eine neue Bedingung in die Funktion playGame() einfügen.

Schauen Sie mal:


Schritt 14: Etwas anderes zum Sprengen

Das Jagen nach dem Mauszeiger war unterhaltsam, aber in einem Spiel ist es sinnlos. Wir müssen ein Ziel machen. Ich werde ein paar Kreise zeichnen, um einen Target Movie Clip zu erstellen.

Create and export a Target Movie Clip.

Schritt 15: Schießen Sie auf das Ziel

Jetzt fügen wir eine Zielinstanz hinzu, damit die Rakete ein greifbareres Ziel hat. Wir ersetzen also jede Referenz des Mauszeigers für die Position des Ziels. Außerdem werden wir nicht auf einen Trefferpunkt testen, sondern auf ein Objekt.

Die Methode hitTestObject() prüft tatsächlich nur auf eine Überlappung zwischen den Begrenzungsrahmen der beiden Objekte (d. h. den blauen Kästchen, die angezeigt werden, wenn Sie auf eine Instanz des Objekts in der Phase klicken). Achten Sie also darauf. Es ist keine pixelgenaue Kollisionserkennung. Allerdings macht es den Job hier ganz gut.

Sie können versuchen, das Ziel an verschiedenen Orten sowie die Kanone zu platzieren.


Schritt 16: Ziel verschieben

Wir haben bereits gesehen, dass die Rakete ein sich bewegendes Ziel wie den Mauszeiger verfolgt. Lassen Sie uns nun die Zielinstanz ein wenig bewegen.

Das ist keine realistische Physik, ich werde das Ziel nur vertikal springen lassen. Ich werde einen Referenzpunkt als Bodenniveau auswählen und einen Schwerkraftwert hinzufügen, um das Ziel zu beeinflussen. Und um es dynamischer zu machen, werde ich die Raketengeschwindigkeit auf 15 erhöhen.

Wenn Sie dies jetzt veröffentlichen, sollten Sie ein sich bewegendes Ziel erhalten.


Abschluss

Unabhängig davon, ob Sie eine genaue Zielsuchrakete wünschen oder eine reibungslose Animation bevorzugen, können Sie anhand dieses Beispiels beide Ergebnisse erhalten. Jetzt haben Sie eine neue Waffe in Ihrem Arsenal, vielleicht können Sie versuchen, ein Worms-ähnliches Spiel zu erstellen, oder den Algorithmus sogar für etwas anderes als eine Rakete verwenden, wie eine seltsame Mücke, die Ihrem Charakter folgt.

Ich hoffe, Sie fanden dieses Tutorial hilfreich. Danke fürs Lesen!

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.