7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Game Design

Erstellen Sie mit AS3 ein Space Shooter-Spiel in Flash

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Befolgen Sie die einfachen Schritte dieses Premium-Tutorials, um mit Flash und AS3 ein unterhaltsames Shoot-Up zu erstellen.


Schritt 1: Kurze Übersicht

Mit vorgefertigten Sprites und den Flash-Tools erstellen wir eine gut aussehende grafische Oberfläche, die von mehreren ActionScript 3-Klassen unterstützt wird.

Der Benutzer kann ein Raumschiff steuern und mehrere Feinde erschießen, während er im Weltraum unterwegs ist.


Schritt 2: Flash-Dokumenteinstellungen

Öffnen Sie Flash und erstellen Sie ein Dokument mit einer Breite von 320 Pixel und einer Höhe von 480 Pixel. Stellen Sie die Bildrate auf 24 fps ein.



Schritt 3: Schnittstelle


Unsere Benutzeroberfläche besteht aus mehreren Sprites, Textfeldern und Movieclips.

Fahren Sie mit den nächsten Schritten fort und wir werden uns ansehen, wie Sie es erstellen.


Schritt 4: Hintergrund

Der Hintergrund ist sehr einfach, da die Sterne mit ActionScript generiert werden.

Erstellen Sie ein 320 x 480 Pixel großes Rechteck und füllen Sie es mit Schwarz. Sie können einen leichten radialen Gradienten hinzufügen.


Verwenden Sie das Ausrichtungsfeld (Cmd + K), um es in der Bühne zu zentrieren.


Schritt 5: Sprites

Ich habe in der Demo dieses Tutorials eine großartige Sprite-Bibliothek verwendet. Diese sind Teil der SpriteLib von Flying Yogi.



Schritt 6: Sprite MovieClips

Importieren Sie die Sprites auf die Bühne (Cmd + R), konvertieren Sie sie in MovieClips und passen Sie die Frames an, um eine schöne Animation anzuzeigen.



Schritt 7: Score TextField

Ein dynamisches Textfeld wird benötigt, um die Spielpunktzahl anzuzeigen. Verwenden Sie das Textwerkzeug (T), um eines zu erstellen. Nennen Sie es scoreTF und platzieren Sie es in der unteren linken Ecke der Bühne.



Schritt 8: Schrift einbetten

Um eine benutzerdefinierte Schriftart in einem dynamischen Textfeld zu verwenden, müssen Sie sie in Ihre Anwendung einbetten. Wählen Sie das Textfeld aus und fügen Sie über die Schaltfläche Einbetten... des Eigenschaftenbedienfelds die erforderlichen Zeichen hinzu.



Schritt 9: Alarmansicht

Die Alarmansicht wird angezeigt, wenn der Benutzer einen Spielstatus erreicht (gewinnen, verlieren). Verwenden Sie die gewünschte Schriftart, um einen einfachen Bildschirm mit zwei dynamischen Textfeldern zu erstellen. Nennen Sie sie titleTF und msgTF, konvertieren Sie die Box in einen MovieClip und setzen Sie den Klassennamen auf AlertView.



Schritt 10: Sounds


Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Die in diesem Beispiel verwendeten Sounds finden Sie auf Soungle.com unter Verwendung der Schlüsselwörter space, Explosion und Laser.


Schritt 11: Tween Nano


Wir verwenden eine andere Tween-Engine als die in Flash enthaltene Standardeinstellung. Das erhöht die Leistung und ist einfacher zu verwenden.

Sie können Tween Nano von der offiziellen Website herunterladen.


Schritt 12: Neue ActionScript-Klasse

Erstellen Sie eine neue (Cmd + N) ActionScript 3.0-Klasse und speichern Sie sie als Main.as in Ihrem Klassenordner.



Schritt 13: Klassenstruktur

Erstellen Sie Ihre grundlegende Klassenstruktur, um mit dem Schreiben Ihres Codes zu beginnen.


Schritt 14: Erforderliche Klassen

Dies sind die Klassen, die wir importieren müssen, damit unsere Klasse funktioniert. Die Import-Direktive stellt Ihrem Code extern definierte Klassen und Pakete zur Verfügung.


Schritt 15: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren.


Schritt 16: Konstruktorcode

Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn ein Objekt aus einer Klasse erstellt wird. Dieser Code wird als erster ausgeführt, wenn Sie eine Instanz eines Objekts erstellen oder die Dokumentklasse verwenden.

Es ruft die notwendigen Funktionen auf, um das Spiel zu starten. Überprüfen Sie diese Funktionen in den nächsten Schritten.


Schritt 17: Sterne bauen

Die buildStars() -Methode verwendet den Star MC in der Bibliothek, um einen Hintergrund mit zufällig platzierten Sternen zu erstellen. Mit demselben Trick wie in diesem Parallaxen-Scrolling-Tutorial werden zwei Sprites erstellt, um beide zu tweeten und Bewegungen zu simulieren.


Schritt 18: Schiff hinzufügen

Diese Funktion erstellt eine Instanz des Ship MC in der Bibliothek und platziert sie mit einer übersichtlichen Animation auf der Bühne.


Schritt 19: Leben hinzufügen

Bei der Wiederverwendung des Ship MC werden der Bühne drei Schiffs-Sprites als Lebensindikator hinzugefügt. Die Schiffe werden einem Vektor hinzugefügt, um später im Spiel nach dem Spiel zu suchen.


Schritt 20: Listener hinzufügen

Diese Zeilen fügen der Bühne und dem Timer die erforderlichen Hörer hinzu. Dies umfasst Mausereignisse, Timerereignisse und EnterFrame-Ereignisse, die das Spiel in jedem Frame aktualisieren.


Schritt 21: Schiff bewegen

Das Schiff des Spielers wird mausgesteuert, die nächste Funktion übernimmt Folgendes:


Schritt 22: Schießen

Unser Schiff wird in der Lage sein, Kugeln abzuschießen, um sich selbst zu zerstören und vor Feinden zu schützen. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer auf die Bühne klickt, und platziert eine Kugel vor dem Schiff, die später von der Funktion update() verschoben wird. Es wird auch ein Schießgeräusch abgespielt.


Schritt 23: Feind hinzufügen

Es wäre kein Schütze ohne etwas zu schießen. Die Feinde werden von der nächsten Funktion erstellt. Mit einem Timer wird alle 500 Millisekunden ein Feind erstellt (Sie können diesen Wert im Variablenschritt ändern), der später von der Funktion update() verschoben wird.


Schritt 24: Alarmansicht

In der Warnansicht werden die Spielerinformationen zum Status des Spiels angezeigt. Sie werden angezeigt, wenn ein Spielereignis erreicht ist.

In dieser Funktion werden zwei Parameter verwendet:

  • t: Ein Alarmtitel
  • m: Eine kurze Nachricht

Schritt 25: Aktualisieren

Die update() -Funktion wird in jedem Frame ausgeführt und behandelt alle Spielbewegungen und Kollisionen. Dies ist die Game-Loop-Funktion für dieses Spiel. Schauen Sie sich die nächsten Schritte an, um das Verhalten zu sehen.


Schritt 26: Hintergrund verschieben

Der Hintergrund wird in jedem Frame verschoben, um die Raumfahrt zu simulieren. Wenn das Sprite der unteren Sterne die Stufengrenze erreicht, wird es wieder nach oben verschoben, wodurch eine Schleife entsteht.


Schritt 27: Kugeln verschieben

In den nächsten Codezeilen wird überprüft, ob sich Aufzählungszeichen in der Phase befinden. Wenn dies zutrifft, werden die Kugeln nach oben bewegt. Wenn eine Kugel nicht mehr sichtbar ist, wird sie zerstört.


Schritt 28: Boss

Wir werden dem Spiel einen großen und schlechten Boss hinzufügen. Wenn der Benutzer eine bestimmte Punktzahl erreicht, erscheint der Chef:


Schritt 29: Gegner bewegen

Die Feinde werden auch in jedem Frame bewegt. Dieser Code findet alle Feinde auf der Bühne mithilfe des Arrays und bewegt sie 5 Pixel nach unten.


Schritt 30: Feind-Schiff-Kollision

Hier prüfen wir, ob ein Feind mit dem Schiff des Spielers kollidiert. In diesem Fall wird eine Reihe von Aktionen ausgeführt, beginnend mit dem Explosionsgeräusch:


Schritt 31: Zerstöre den Feind

Nach dem Abspielen des Sounds wird der Feind von der Bühne und dem Array entfernt und auf Null gesetzt, um ihn (eventuell) aus dem Speicher zu löschen.


Schritt 32: Live entfernen

Eines der Symbole des Lebenszählers wird ebenso wie der Feind entfernt.


Schritt 33: Test auf Spielende

Dann überprüfen wir die Lebensnummer. Wenn der Spieler kein Leben mehr hat, verwenden wir die Alarmmethode, um einen Alarm anzuzeigen, der anzeigt, dass das Spiel beendet ist. Wenn noch Leben verfügbar sind, wird das Schiff auf der Bühne animiert.


Schritt 34: Hit Boss

Der folgende Code behandelt die Bosskollisionen. Er verwendet dieselbe Methode wie die Kollision zwischen Feind und Schiff. Hier verwenden wir die Variable bossHealth, um zu bestimmen, wann der Boss besiegt wird.


Schritt 35: Bullet-Enemy-Kollision

Ein weiterer Kollisionserkennungscode. Die Kugeln im Array werden auf Kollision mit den Feinden getestet. In diesem Fall werden beide von der Bühne und ihren Arrays entfernt.


Schritt 36: Funktion neu starten

Die Neustart funktion() wird von der Funktion alert() aufgerufen. Sie führt die erforderlichen Vorgänge aus, um das Spiel zurückzusetzen und neu zu starten.


Schritt 37: Entfernen Sie Sprites

Der erste Teil der Funktion restart() behandelt die Sprites, die nächsten Codezeilen entfernen alle Bilder von der Bühne.


Schritt 38: Warnung entfernen

Der nächste Teil von restart() entfernt die Warnmeldungsansicht von der Bühne:


Schritt 39: Score/Boss Health zurücksetzen

Im nächsten Teil von restart() werden die Variablen Score und Boss Health zurückgesetzt:


Schritt 40: Rufen Sie die Neustartmethode auf

Schließlich rufen wir am Ende von restart() die Methode auf, die alles startet:


Schritt 41: Dokumentklasse


Fügen Sie den Klassennamen zum Feld Class im Abschnitt "Veröffentlichen" des Eigenschaftenfensters hinzu, um die FLA der Hauptdokumentklasse zuzuordnen.


Abschluss

Sie haben gelernt, wie Sie ein Space Shooter-Spiel mit all seinen Grundfunktionen erstellen. Versuchen Sie, es mit dem zu erweitern, was Sie bereits wissen!

Ich hoffe dir hat dieses Tutorial gefallen, danke fürs Lesen!

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 Game Development tutorials. Never miss out on learning about the next big thing.
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.