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

Erstellen eines einfachen Fahrspiels mit ActionScript 3.0

by
Read Time:19 minsLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial werde ich die Schritte durchgehen, die zum Erstellen eines einfachen Fahrprogramms erforderlich sind. Sie lernen, wie Sie mit ActionScript 3.0 KeyListener, EventListener und einige andere Dinge hinzufügen. Ich habe dieses Programm ursprünglich in ActionScript 2.0 geschrieben und in diesem Tutorial werde ich die beiden ActionScript-Versionen im weiteren Verlauf vergleichen. Dies sollte daher ein einfaches Tutorial für den Übergang zu ActionScript 3.0 sein.

Schritt 1: Einrichten der Datei

Öffnen Sie ein neues Flash ActionScript 3.0-Dokument, gehen Sie zum Eigenschaftenfenster (falls es nicht geöffnet ist, gehen Sie zu Fenster > Eigenschaften) und klicken Sie auf Bearbeiten. Ändern Sie die FPS auf 50, die Breite auf 1200px und die Höhe auf 800px.

Erstellen Sie im Zeitleistenfenster (Fenster > Zeitleiste) zwei weitere Ebenen, sodass insgesamt drei Ebenen vorhanden sind, und benennen Sie die drei Ebenen: Aktionen, Geschwindigkeit, Auto. Sperren Sie die Aktionsebene.

Schritt 2: Importieren der Fahrzeugbilder

In den Quelldateien finden Sie diese drei Dateien:

  • carLeft.png
  • carRight.png
  • carStraight.png

Wählen Sie die Autoebene aus und gehen Sie zu Datei > Importieren > In Bühne importieren und importieren Sie das carStraight-Bild.

Schritt 3: Erstellen des Car MovieClips

Wählen Sie das Bild aus und drücken Sie F8 oder Ändern > In Symbol konvertieren. Belassen Sie alle Einstellungen als Standardeinstellungen (oben links ausgerichtet und ein Movieclip) und nennen Sie sie carMC.

Geben Sie dem Movieclip im Eigenschaftenfenster den Instanznamen carMC.

Doppelklicken Sie auf das Bild oder klicken Sie mit der rechten Maustaste auf > Bearbeiten. Wählen Sie das Bild des Autos aus und geben Sie ihm die Koordinaten x: -100, y: -230.

Diese können nach Ihren Wünschen geändert werden, aber ich dachte, dass diese am besten funktionieren und die Kurven des Autos am realistischsten aussehen lassen.

Erstellen Sie zwei weitere Keyframes nach dem aktuellen.

Wählen Sie den zweiten Keyframe aus, löschen Sie das Bild des Autos und gehen Sie zu Datei > Importieren > In Bühne importieren und importieren Sie das carLeft-Bild. Positionieren Sie es dann bei -100, -230.

Machen Sie dasselbe für den dritten Keyframe und importieren Sie das carRight-Image. Positionieren Sie das ebenfalls bei -100, -230.

Gehen Sie in die Aktionen jedes Keyframes (wählen Sie den Keyframe aus und drücken Sie F9 oder Rechtsklick > Aktionen) und geben Sie Folgendes ein:

Doppelklicken Sie nun auf eine Stelle, an der sich nichts befindet, oder klicken Sie oben links auf Szene 1, um zur Haupt-Zeichenfläche zurückzukehren.

Da das Auto im Vergleich zur Bühne so groß ist, wählen Sie das Auto aus und ändern Sie seine Breite auf 100 Pixel und die Höhe auf 189 Pixel. Dadurch werden alle drei Bilder verkleinert, aber Sie können die Größe bei Bedarf später wieder erhöhen.

Wählen Sie als nächstes das carMC aus und zentrieren Sie es über das Ausrichtungsfenster auf der Bühne.

Bisher haben wir die Datei eingerichtet und einen Movieclip mit drei Frames erstellt, in denen jeweils ein Bild und ein Stopp() enthalten sind. Befehl.

Schritt 3: Hinzufügen des Tachometers

Wenn Sie das Auto steuern, wird auf dem Bildschirm eine Anzeige angezeigt, die anzeigt, wie schnell es fährt.

Nehmen Sie das Textwerkzeug und stellen Sie in Ihrem Eigenschaftenfenster (Fenster > Eigenschaften) sicher, dass dynamischer Text und nicht statischer Text oder Eingabetext angezeigt wird. Klicken Sie auf eine beliebige Stelle auf der Zeichenfläche, an der der Tacho platziert werden soll (ich habe unten links ausgewählt), und klicken Sie auf. Dadurch sollte ein Textfeld mit einer Breite von ca. 100 Pixel erstellt werden. Wenn dies nicht der Fall ist oder wenn dies nicht breit genug ist, können Sie es auf eine größere Größe einstellen. Kehren Sie zum Eigenschaftenfenster zurück und geben Sie den dynamischen Text und den Instanznamen "Tachometer" an.

Schritt 4: Sehen Sie sich den gesamten Code an

Zuerst gebe ich Ihnen den gesamten Code, damit Sie ihn sich ansehen können, und dann gehe ich ihn Stück für Stück durch und erkläre ihn.

Schritt 5: Hinzufügen von Variablen

Klicken Sie auf das erste Bild der zuvor gesperrten Aktionsebene und drücken Sie F9 (oder Rechtsklick > Aktionen). Fügen Sie hier den Code hinzu.

Dies sind die Variablen, die wir brauchen werden.

Schritt 6: Abhören von Tastendrücken

Die Erklärungen sind alle hier, außer posNeg, das ich später erklären werde.

Als ich zu AS3 überging, war dies einer der verwirrendsten Teile für mich. In AS2 war das Erstellen von aufzurufenden Funktionen viel einfacher zu codieren. Normalerweise haben Sie nur eine "if" -Anweisung in einer onEnterFrame-Funktion, die prüft, ob die _____- Taste gedrückt ist. In AS3 gibt es eine Möglichkeit, dies ähnlich zu tun, aber es funktioniert nicht gut mit Spielen. Die Bewegungen sind nicht reibungslos und Sie können nicht zwei Tasten gleichzeitig drücken.

Ich habe es hier mit Booleschen gemacht. Für mein Spiel schaue ich nur, ob vier Tasten gedrückt werden: Auf, Links, Rechts und Leertaste, also habe ich für jede eine Boolesche Taste erstellt. Ich habe dann drei Hörer hinzugefügt.

Dieser Code entspricht ziemlich genau onEnterFrame. Auf jedem Frame (also in unserem Fall 50 Mal pro Sekunde) wird die Funktion onEnterFrameFunction ausgeführt. Der Grund dafür ist, dass wir damit Variablen wie die Geschwindigkeit kontinuierlich aktualisieren und gleichzeitig prüfen können, ob eine Taste gedrückt wurde (was indirekt über einen Booleschen Wert erfolgt, wie Sie gleich sehen werden).

Dies sind zwei Zuhörer, die der Bühne hinzugefügt werden. Wenn eine Taste (eine beliebige Taste) gedrückt wird, wird die Funktion keyPressed aufgerufen. Wenn eine Taste losgelassen wird, wird die Funktion keyReleased aufgerufen.

Dieser Code befindet sich am Ende meines Codes, aber ich erkläre ihn jetzt, weil er das Drücken von Tasten betrifft.

Dies sind die beiden Funktionen keyPressed und keyReleased. Wie ich oben sagte, wenn eine Taste gedrückt wird, wird keyPressed aufgerufen. Es überprüft die vier "if" -Anweisungen, um festzustellen, ob die gedrückte Taste eine der vier Tasten ist, nach denen mein Programm sucht. Wenn der Schlüssel einer von ihnen ist, setzt er den Booleschen Wert dieses Schlüssels auf true.

Was keyReleased macht, ist das Gegenteil. Wenn ein Schlüssel losgelassen wird, wird geprüft, ob es sich um einen der vier Schlüssel handelt. Sollte dies der Fall sein, wird der Boolesche Wert dieses Schlüssels auf false zurückgesetzt.

Schritt 7: Verstehen, wie das Bewegen des Autos funktioniert

Wenn wir ein Spiel programmieren würden, bei dem das Drücken der linken Taste das Auto in die -x-Richtung und das Drücken der Aufwärts-Taste das Auto in die + y-Richtung bewegt, wären die Dinge viel einfacher. Dieses Programm ist anders. Da es in Flash keine eingebaute Funktion gibt, die das Auto basierend auf seiner aktuellen Richtung vorwärts bewegt, müssen wir es selbst erstellen. Während ich diesen Code erstellte, musste ich viel ausprobieren und fand, dass das Rückwärtsarbeiten am meisten half. Ich wusste, dass sich die Karte, wenn sie in Richtung N oder 0 Grad zeigt, mit voller Geschwindigkeit in Richtung +x bewegen sollte. Sollte es dann nach NE oder 45 Grad zeigen, würde es sich mit halber Geschwindigkeit in +x-Richtung und mit halber Geschwindigkeit in +y-Richtung bewegen.

Schritt 8: Hinzufügen der Funktion onEnterFrame

Zuerst fügen wir die Funktion onEnterFrame hinzu. Wie ich oben sagte, wird diese Funktion in jedem Frame aufgerufen.

Schritt 9: Codieren der Schlüssel

Jetzt fügen wir Funktionen hinzu, die beim Drücken einer Taste aufgerufen werden.

Denken Sie daran, dass beim Drücken einer Taste die Funktion keyPressed aufgerufen wird. Wenn es sich um einen der vier Schlüssel handelt, nach denen das Programm sucht, wird der Boolesche Wert dieses Schlüssels auf true gesetzt, und wenn dieser Schlüssel losgelassen wird, wird der Boolesche Wert auf false gesetzt. Immer wenn ein Schlüssel gedrückt gehalten wird, ist sein Boolescher Wert wahr.

Schritt 10: Das Auto drehen

Schritt 11: Drehen der Autoräder

Wenn sich das Auto dreht, soll es realistisch aussehen, daher verwenden wir die anderen Bilder (carLeft und carRight), damit die Räder sich zu drehen scheinen.

Wenn die linke Taste gedrückt wird, erscheint carLeft, wenn die rechte Taste gedrückt wird, wird carRight angezeigt. Wenn keine der beiden Tasten gedrückt wird, wird carStraight angezeigt.

Schritt 12: Ermitteln der Fahrzeugdrehung

Ich werde nicht zu tief in die Erklärung der Mathematik gehen, weil es entweder etwas ist, das man bekommt oder nicht. Ich werde jedoch versuchen, es so gut wie möglich zu erklären. Wie ich bereits sagte, war vieles davon Versuch und Irrtum und Rückwärtsarbeiten, was ich im weiteren Verlauf erklären werde.

Die Art und Weise, wie Flash die Drehung eines Objekts speichert, ist nicht von 0 > 360, sondern von -180 > 180, wobei -180 = 180 ist.

Dieser Code nimmt die Drehung des Autos und ermittelt den absoluten Wert, sodass er immer positiv ist. Dann speichert es entweder 1 (wenn es ursprünglich positiv war) oder -1 (wenn es ursprünglich negativ war) in der Variablen posNeg, die wir später verwenden werden.

Schritt 13: Codieren der Aufwärts-Taste

Hier passiert all das Majestätische.

Um Platz zu sparen und das Verständnis zu erleichtern, füge ich den anderen Code, der zuvor vor diesem Schritt hinzugefügt wurde, nicht ein. Der gesamte Code in diesem Schritt wird hier dazwischen hinzugefügt:

Schritt 14: Bewegen des Autos in Y-Richtung

Anstatt es durchzugehen und zu erklären, finden Sie hier eine Tabelle, in der beschrieben wird, wie sich das Auto basierend auf seiner Drehung in y-Richtung bewegen soll.

Grad (°) Umzugsbetrag in Y
-180 -1
-135 -.5
-90 0
-45 .5
0 1
45 .5
90 0
135 -.5
180 -1

Wenn das Auto zwischen -90 und 90 ist, zeigt es bis zu einem gewissen Grad nach N und wenn es zwischen -180 und -90 oder 90 und 180 ist, zeigt es bis zu einem gewissen Grad nach S.

Mit ein wenig schneller Mathematik kam ich auf diese Gleichung:

Schritt 15: Bewegen des Autos in X-Richtung

Das Bestimmen, wie viel sich das Auto in x-Richtung bewegen soll, erfordert etwas mehr Arbeit.

Grad (°) Bewegungsbetrag in X.
-180 0
-135 -.5
-90 1
-45 .5
0 0
45 .5
90 1
135 -.5
180 0

Das erste "if" befasst sich mit dem Auto in Richtung S und das zweite in Richtung N.

Schritt 16: Zusammenstellen des Codes

Dies ist die Grundlage für die Berechnung der Bewegung, und dies sollten Sie bisher in der Funktion onEnterFrame haben:

Schritt 17: Beschleunigung hinzufügen

Wenn Sie das Programm jetzt ausführen würden (was Sie wahrscheinlich nicht können, da der Code nicht vollständig ist), würde unser Auto nicht auf das Drücken der Aufwärts-Taste reagieren. Dies liegt daran, dass Inkrement = 0 ist. Wir müssen also eine Codezeile hinzufügen, die dies erhöht, diese jedoch nicht mehr erhöht, sobald unser Auto die Höchstgeschwindigkeit erreicht hat.

Schritt 18: Gas ablassen

Wenn Sie das Gaspedal eines Autos loslassen, beginnt es aufgrund vieler Faktoren langsam zu bremsen: Wind, Luftwiderstand, Reibung... also müssen wir das Auto langsamer machen, wenn der Aufwärtspfeil nicht gedrückt wird.

Wenn der Code nicht gedrückt wird und das Inkrement über 0 liegt, wird das Inkrement verringert. Wenn das Inkrement nicht über 0 liegt, machen Sie es 0, sonst fährt das Auto rückwärts.

Beachten Sie, dass der Code in der "if" -Anweisung derselbe Code ist, den wir in if(keyUpPressed) hinzugefügt haben, mit der Ausnahme, dass das Inkrement jetzt verringert wird.

Schritt 20: Bremse betätigen

Da sich das Auto nicht nur auf das Ziehen verlassen kann, um es anzuhalten, müssen wir auch eine Bremse hinzufügen, die in die Leertaste codiert wird.

Der Code hierfür muss an mehreren Stellen platziert werden.

Dieser Code besagt, dass, wenn die Leertaste gedrückt wird, während die Aufwärtspfeiltaste gedrückt wird, die Verzögerung verringert wird, jedoch langsamer. Ich habe dann einer zuvor gemachten "if" -Anweisung Code hinzugefügt, um sicherzustellen, dass sie nicht ausgeführt wurde, wenn die Leertaste gedrückt wurde.

Wir müssen auch Code hinzufügen, wenn die Aufwärts-Taste nicht gedrückt wird und die Leertaste gedrückt wird.

Schritt 21: Tachocode hinzufügen

Zu guter Letzt müssen wir den Code hinzufügen, der die Geschwindigkeit erkennt und an den Tacho sendet.

Direkt im Anschluss:

Hinzufügen:

Schritt 22: Finalisieren

Das fasst dieses Tutorial ziemlich gut zusammen. Was dieses Programm kann, ist ziemlich einfach und ich wollte nur die Hauptteile bei der Erstellung eines solchen Spiels skizzieren. Nachdem Sie die Konzepte in diesem Tutorial verstanden haben, können Sie auch die Abwärts-Taste eingeben, Grenzen für das Auto festlegen und sogar ein Rennspiel erstellen. Ich hoffe, dass Sie zumindest ein wenig aus diesem Tutorial gelernt haben und danke, dass Sie es gelesen haben.

Endgültiger Code:

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.