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 eines Whack-a-Mole-Spiels mit AS3 in Flash

Scroll to top
Read Time: 10 mins

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

In diesem Tutorial erfahren Sie, wie Sie Ihre eigene Version des klassischen Whack-a-Mole-Spiels erstellen. Nur unsere unglücklichen Kreaturen der Wahl sind Würmer. Sie können die Geschwindigkeit des Spiels und die Trefferfelder der Würmer ändern.


Schritt 1: Kurze Übersicht

Wir werden gängige ActionScript 3-Klassen verwenden, insbesondere Mausereignisse, um ein unterhaltsames Whack A Mole-ähnliches Spiel in Flash zu erstellen


Schritt 2: Flash-Dokumenteinstellungen

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

(Hinweis: Das obige Bild enthält einen Fehler. Breite und Höhe sind falsch herum. Vielen Dank an Roel Traa für diesen Hinweis.)


Schritt 3: Schnittstelle


Es wird eine einfache und benutzerfreundliche Oberfläche mit verschiedenen Formen, Schaltflächen und MovieClips verwendet. Fahren Sie mit den nächsten Schritten fort, um diese GUI zu erstellen.


Schritt 4: Hintergrund

Wählen Sie das Rechteck-Werkzeug (R) aus, um ein Rechteck mit 320 x 480 Pixel #CC9866, #BA7743 zu erstellen, und zentrieren Sie es in der Bühne.


Schritt 5: Titel

Verwenden Sie das Textwerkzeug (T), um einen Titel mit Ihrer Lieblingsschriftart hinzuzufügen. Sie können auch einige der Grafiken des Spiels verwenden, um es schöner zu machen. Die in diesem Tutorial verwendete Wurmgrafik wurde von hier unter einer Creative Commons-Lizenz heruntergeladen.


Schritt 6: Tasten

Verwenden Sie erneut das Textwerkzeug, um drei Schaltflächen zu erstellen, wie im obigen Bild gezeigt. Konvertieren Sie sie in Schaltflächen und geben Sie ihnen beschreibende Instanznamen, damit Sie sie später im Code problemlos verwenden können. Konvertieren Sie die Grafiken in der Phase in einen einzelnen MovieClip und nennen Sie ihn TitleView. Denken Sie daran, das ActionScript exportieren-Kontrollkästchen zu aktivieren.


Schritt 7: Optionen

Löschen Sie die letzte Ansicht mit Ausnahme des Hintergrunds und erstellen Sie eine Reihe von dynamischen Textfeldern, wie im Bild gezeigt, geben Sie ihnen beschreibende Instanznamen und konvertieren Sie sie in Schaltflächen. Verwenden Sie das Rechteck-Werkzeug (R), um eine Pfeilschaltfläche zu erstellen, mit der Sie zum Titelbildschirm zurückkehren können.


Schritt 8: Credits

Der Credits-Bildschirm wird vor dem Titel-Bildschirm angezeigt. Verwenden Sie die zuvor verwendeten Grafiken und Schriftarten, um ihn zu erstellen. Nennen Sie es CreditsView und denken Sie daran, das Für ActionScript exportieren-Kontrollkästchen zu aktivieren.


Schritt 9: Spielbildschirm

Auf dem Spiel-Bildschirm werden einfache Comicgrafiken verwendet. Es gibt nicht wirklich ein Verfahren zum Erstellen dieser Grafiken. Verwenden Sie einfach Ihre Fantasie und die Flash-Zeichenwerkzeuge, um so etwas wie das obige Bild zu erstellen. Jedes Loch im Spielbildschirm ist ein MovieClip, der eine Animation des herauskommenden Wurms enthält. Es handelt sich im Grunde genommen um eine einfache Einzelbildanimation. Überprüfen Sie die Quelle, um ein besseres Verständnis zu erhalten.


Schritt 10: Alarm


Eine Warnung wird angezeigt, wenn alle Würmer angezeigt wurden. Sie zeigt die endgültige Punktzahl an, die Sie erreicht haben. Verwenden Sie das Rechteck-Werkzeug, um es zu erstellen, und fügen Sie dem unteren TextField einen beschreibenden Namen hinzu, setzen Sie den Instanznamen auf AlertView und markieren Sie das Für ActionScript exportieren-Feld.


Schritt 11: TweenNano

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

Sie können TweenNano von der offiziellen Website herunterladen.


Schritt 12: Soungle

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Den in diesem Beispiel verwendeten Sound finden Sie auf Soungle.com mit dem Schlüsselwort hit.


Schritt 13: Dokumentklasse festlegen

Wir machen unsere Anwendung interaktiv, indem wir eine externe Klasse verwenden. Fügen Sie ihren Namen dem Klasse-Feld im Abschnitt Veröffentlichen des Eigenschaften-Fensters hinzu, um die FLA der Hauptdokumentklasse zuzuordnen.


Schritt 14: Erstellen Sie eine neue ActionScript-Klasse

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


Schritt 15: Klassenstruktur

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


Schritt 16: Erforderliche Klassen

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


Schritt 17: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr über sie zu erfahren. Einige ihrer Namen sind selbsterklärend, sodass dort kein Kommentar vorhanden ist.


Schritt 18: Konstruktor

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 19: Starten Sie die Button Listener

Wir beginnen mit dem Hinzufügen der Maus-Listener zu den Schaltflächen in der Titelansicht. Dadurch gelangen wir zum Bildschirm mit den Spielen, Optionen oder Credits.


Schritt 20: Optionen hinzufügen

Der Optionsbildschirm wird zwischengeschaltet, wenn der Benutzer auf die Optionsschaltfläche klickt. Der Pfeiltaste wird ein Maus-Listener hinzugefügt, um sie zu entfernen, wenn Sie fertig sind.


Schritt 21: Optionen Listener

Diese Listener werden hinzugefügt, wenn der angezeigte Options-Bildschirm die Schaltflächen auf der Bühne handhabt. Mehr von seinem Verhalten in den nächsten Schritten.


Schritt 22: Standardoption festlegen

Die Standardoptionen werden durch diese Zeilen festgelegt. Sie legen die aktuell ausgewählten Schaltflächen fest, die langsam und groß sind.


Schritt 23: Entfernen Sie die Optionslistener

Ein Parameter bestimmt, ob die Listener hinzugefügt oder entfernt werden. Die nächsten Zeilen werden ausgeführt, wenn dieser Parameter nicht angibt, die Listener hinzuzufügen.


Schritt 24: Optionen ausblenden

Die Pfeilschaltfläche entfernt den Optionen-Bildschirm , wenn Sie darauf klicken.


Schritt 25: Ändern Sie die Farbe von TextField

Diese Funktion wird ausgeführt, wenn die Geschwindigkeitstasten gedrückt werden. Der erste Teil ändert die Textfarbe der Tasten, ändert die aktuelle Option in Weiß und den neu ausgewählten Wert in Gelb.


Schritt 26: Klicken Sie auf die angeklickte Schaltfläche

Dies ist der zweite Teil der Geschwindigkeitsfunktion. Er erkennt die angeklickte Taste und überprüft ihren Namen. Er erhöht/verringert den Timer entsprechend.


Schritt 27: Wählen Sie Trefferbereich

Die nächste Funktion wird ausgeführt, wenn auf eine Schaltfläche in der Auswahl des Trefferbereichs geklickt wird. Es verhält sich genauso wie die letzte Funktion.


Schritt 28: Credits anzeigen

Der Credits-Bildschirm wird angezeigt, wenn der Benutzer auf die Credits-Schaltfläche klickt. Dem vollständigen MovieClip wird ein Maus-Listener hinzugefügt, um ihn zu entfernen.


Schritt 29: Credits ausblenden

Wenn Sie auf den Credits-Bildschirm klicken, wird dieser zurückgeschaltet und von der Bühne entfernt.

Lassen Sie uns hier anhalten, um einen kurzen Test durchzuführen und sicherzustellen, dass unser Spielcode funktioniert:

Beachten Sie, dass einige Zeilen kommentiert wurden, da einige Funktionen noch nicht erstellt wurden.

Denken Sie daran, dass die Meilensteine in den Quelldateien enthalten sind. Wenn Ihre Datei diese also aus irgendeinem Grund nicht nachahmt, sehen Sie sich die Quelle an, um festzustellen, was dies verursachen kann.


Schritt 30: Spielansicht anzeigen

Die folgenden Zeilen entfernen den Titel-Bildschirm und lassen den Spiel-Bildschirm sichtbar. Es ruft auch eine Funktion auf, um das zu spielende Spiel vorzubereiten.


Schritt 31: Worms Mouse Listener

Wir verwenden hier eine for-Anweisung, um jedem Hole MovieClip auf der Bühne einen Maus-Listener hinzuzufügen. Dadurch können die Würmer angeklickt werden.


Schritt 32: Löcher stoppen MovieClip

Da das Loch MovieClip mehr als ein Bild enthält, muss er gestoppt werden, damit nicht alle Würmer gleichzeitig angezeigt werden.


Schritt 33: Timer starten

Dieser Timer startet den Countdown und lässt Würmer zufällig auf der Bühne erscheinen.


Schritt 35: Überprüfen Sie, ob es fertig ist

Dieser Code prüft, ob die angezeigten Würmer das Limit noch nicht überschritten haben, und ruft einen Alarm auf.


Schritt 36: Ändern Sie die Größe des Trefferbereichs

Der ausgewählte Trefferbereich im Optionen-Bildschirm wird hier bei jedem Wurm mithilfe der Skalierungseigenschaften von AS3 geändert.


Schritt 37: Beenden Sie die Animation, wenn Sie fertig sind

Es vergehen einige Millisekunden, in denen der Wurm sichtbar ist. Wenn der MovieClip sein letztes Bild erreicht hat, stoppt er und kehrt zum ersten Bild zurück.


Schritt 38: Wurm treffen

Diese Funktion behandelt beim Klicken auf einen Wurm im Grunde genommen einen Ton, erhöht die Punktzahl und versteckt den Wurm wieder.


Schritt 39: Überprüfen Sie den Würmer Hit

Sie können einen benutzerdefinierten Bonus hinzufügen, wenn alle Würmer getroffen wurden, indem Sie die nächsten Codezeilen ändern.


Schritt 40: Alarm

Diese Funktion stoppt das Spiel und zeigt das Endergebnis an. Außerdem wird ein Maus-Listener hinzugefügt, um das Spiel beim Klicken zurückzusetzen.


Schritt 41: Neustart

Die nächste Funktion lädt den SWF neu, startet alle Variablen und Methoden neu und kehrt zum Titelbildschirm zurück.


Abschluss

Wie Sie sehen können, können viele der Spielvariablen/-parameter geändert und an Ihre Bedürfnisse angepasst werden. Versuchen Sie, Ihre eigene Version des Spiels zu erstellen!

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.