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 ein auffälliges Breakout-Spiel in Flash

Scroll to top
Read Time: 14 mins

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

In diesem Premium-Tutorial erstellen wir ein Breakout-Spiel. "Brick Breaker" von Grund auf mit Flash und AS3.


Schritt 1: Kurze Übersicht

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

Der Benutzer kann eine Reihe von Levels durchspielen. Sie können ganz einfach so viele Level hinzufügen, wie Sie möchten!


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

Eine farbenfrohe, gut aussehende Oberfläche wird angezeigt. Es enthält mehrere Formen, Schaltflächen, Bitmaps und mehr.

Lassen Sie uns direkt mit der Erstellung dieser GUI beginnen.


Schritt 4: Hauptbildschirm

Dies ist der Hauptbildschirm oder die Hauptansicht. Es ist die erste Grafik, die in unserem Spiel erscheint.


Schritt 5: Hintergrund

Erstellen Sie ein 320x480-Rechteck und füllen Sie es mit diesem radialen Farbverlauf: #3A9826, #102A07.

Wir werden es durch Hinzufügen eines Photoshop-Filters etwas detaillierter gestalten. Wenn Sie nicht über Photoshop verfügen, können Sie versuchen, mit den Flash-Tools einen schönen Effekt hinzuzufügen.

Öffnen Sie das Bild in Photoshop und gehen Sie zu Filter > Textur > Patchwork. Verwenden Sie die folgenden Einstellungen:

Sie bekommen etwas, wie das:

Dieser Hintergrund wird auf der Bühne stehen sowie die Paddel-, Ball- und Textanzeigen. Konvertieren Sie den Hintergrund in einen MovieClip und nennen Sie ihn bg.


Schritt 6: Titel

Wählen Sie das Textwerkzeug (T), wählen Sie eine geeignete Schriftart und schreiben Sie Ihren Spieltitel. Ich habe dieses Format verwendet: Akashi, 55pt, #FFCC33.

Wählen Sie das Textfeld aus und fügen Sie im Filterbedienfeld einen Schlagschatten hinzu:

Duplizieren Sie den Text (Cmd + D) und bewegen Sie ihn 3 Pixel nach oben, um ihm eine Prägung zu geben.

Konvertieren Sie die Grafiken in einen MovieClip und nennen Sie ihn MenuScreen. Denken Sie daran, das Feld Export for ActionScript zu markieren. Sie können dies von der Bühne löschen, wenn Sie fertig sind, da es mit AS3 aufgerufen wird.


Schritt 7: Paddeln

Verwenden Sie das Rechteck-Grundwerkzeug (R), um ein rundes Rechteck mit 57 x 11,5 Pixel zu erstellen, ändern Sie den Eckenradius auf 10 und wenden Sie diesen Verlauf an: #4E4E4E, #BABABA, #B0B3BA.

Fügen Sie mit dem Rechteck-Werkzeug einige Detaillinien hinzu, verwenden Sie Ihren eigenen Stil!

Sie können Ihrem Paddel auch etwas Farbe hinzufügen. Hier ist das Endergebnis von mir. Die verwendete Farbe ist: #CC0000.

Konvertieren Sie die Grafiken in einen MovieClip und nennen Sie ihn Paddel.


Schritt 8: Ball

Um den Ball zu erstellen, wählen Sie das ovale Werkzeug (O) und verwenden Sie es, um einen 12x12px #CCCCCC-Kreis zu erstellen.

Duplizieren Sie den Kreis (Cmd + D), ändern Sie seine Größe auf 10x10px und füllen Sie ihn mit diesem radialen Farbverlauf: #95D4FF, #0099FF.

Zuletzt schneiden Sie den zweiten Kreis in zwei Hälften und erstellen mit dem Auswahlwerkzeug (V) unten eine Kurve. Ändern Sie die Farbe in einen weißen linearen Farbverlauf mit Alpha 60, 10.

Konvertieren Sie die Grafiken in einen MovieClip und nennen Sie ihn Ball.


Schritt 9: Ziegel

Unser Ziegel wird sehr einfach sein.

Verwenden Sie das Rechteck-Werkzeug, um ein 38 x 18 Pixel großes Rechteck zu erstellen und den nächsten Farbverlauf anzuwenden: #CC0000, #8E0000, #FF5656.

Konvertieren Sie das Rechteck in einen MovieClip und wenden Sie den im Titeltext verwendeten Schattenfilter an, um ein besseres Aussehen zu erzielen.

Konvertieren Sie die Grafik erneut in einen MovieClip und nennen Sie sie Brick. Denken Sie daran, das Feld Export for ActionScript zu markieren.


Schritt 10: Über den Bildschirm

Auf dem Info-Bildschirm werden die Credits, das Jahr und das Copyright des Spiels angezeigt.

Es wird ziemlich einfach zu erstellen sein, da wir bereits alle darin verwendeten Elemente haben.

Konvertieren Sie die Grafiken in einen MovieClip und nennen Sie sie AboutScreen. Denken Sie daran, das Feld Export for ActionScript zu markieren.


Schritt 11: Spielbildschirm

Dies ist der Spielbildschirm, der von Anfang an auf der Bühne steht und die Paddel-, Ball-, Hintergrund- und Textanzeigen enthält. (Wir werden die Steine mit Code hinzufügen.)

Die Instanznamen sind ziemlich einfach und selbsterklärend: paddle, ball, bg, scoreTF, livesTF und levelTF.


Schritt 12: Schriftarten einbetten

Um die benutzerdefinierte Schriftart dynamisch verwenden zu können, müssen wir sie in die Anwendung einbetten.

Wählen Sie ein dynamisches Textfeld aus und klicken Sie im Eigenschaftenfenster auf die Schaltfläche Einbetten.

Wählen Sie alle erforderlichen Zeichen aus / fügen Sie sie hinzu und klicken Sie auf OK.


Schritt 13: Warnbildschirm

Dieser Bildschirm wird angezeigt, wenn das Spiel entschieden wurde. Entweder du gewinnst, verlierst oder du erreichst das Spiel (gewinnst alle Levels oder verlierst alle Leben).

In dieser Ansicht werden zwei dynamische Textfelder verwendet, die den aktuellen Spielstatus sowie eine kurze Meldung anzeigen. Die TextFields heißen titleTF und msgTF.

Konvertieren Sie die Grafiken in einen MovieClip und markieren Sie das Feld Für ActionScript exportieren. Setzen Sie den Klassennamen auf AlertScreen.

Damit ist der Grafikteil beendet, das ActionScript kann beginnen!


Schritt 14: Tween Nano

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

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


Schritt 15: Neue ActionScript-Klasse

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


Schritt 16: Klassenstruktur

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


Schritt 17: Erforderliche Klassen

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


Schritt 18: Variablen und Konstanten

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


Schritt 19: Ebenen

Alle unsere Ebenen werden in mehrdimensionalen Arrays gespeichert.

Dies sind Arrays, die Arrays enthalten. Sie können sie in einer einzelnen Zeile schreiben, aber wenn Sie sie ausrichten, können Sie tatsächlich die Form sehen, die das Level annehmen wird.

In diesen Ebenen repräsentieren die Einsen den Raum in der Phase, in der ein Stein platziert wird, und die Nullen sind nur leere Räume. Diese Ebenen werden später von einer Funktion gelesen, die die Steine auf die Bühne legt. Mit dieser Klasse können Sie so viele Ebenen hinzufügen, wie Sie möchten!


Schritt 20: 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 ausgeführt, wenn das Spiel geladen wird, im Fall einer Dokumentklasse).

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


Schritt 21: Menübildschirm & Informationen zur Animation anzeigen

In den nächsten Zeilen werden die Schaltflächen des Menübildschirms und die Menü- oder Info-Ansicht je nach gedrückter Schaltfläche behandelt.


Schritt 22: Init-Funktion

Diese Funktion führt die erforderlichen Vorgänge aus, um das Spiel zu starten. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren.


Schritt 23: Paddel bewegen

Das Paddel wird mausgesteuert und folgt der x-Position der Maus.


Schritt 24: Paddelrandkollision

Um zu verhindern, dass das Paddel die Bühne verlässt, erstellen wir unsichtbare Grenzen an den Seiten des Bildschirms.


Schritt 25: Build Level Funktion

Die Ebenen werden mit dieser Funktion erstellt.

Es verwendet einen Parameter, um die zu erstellende Ebene zu erhalten, berechnet ihre Größe und führt eine verschachtelte for-Schleife aus, wobei eine Schleife für die Höhe und eine für die Breite gilt. Als Nächstes wird eine neue Brick-Instanz erstellt, die entsprechend ihrer Breite, Höhe und der Anzahl, die i und j entspricht, platziert wird.

Zuletzt wird der Baustein zum bricks vektor hinzugefügt, um außerhalb dieser Funktion darauf zuzugreifen.


Schritt 26: Game Listener

Diese Funktion fügt die Maus hinzu oder entfernt sie und gibt Frame-Listener ein. Mithilfe eines Parameters wird festgelegt, ob die Listener hinzugefügt oder entfernt werden sollen: Standard ist add.


Schritt 27: Starten Sie die Spielfunktion

Der nächste Code ruft die Funktion gameListeners() auf, um das Spiel zu starten.


Schritt 28: Ballbewegung

Die Ballgeschwindigkeit wird durch die Variablen xSpeed und ySpeed bestimmt. Wenn die update funktion ausgeführt wird, beginnt sich der Ball unter Verwendung dieser Werte in jedem Frame zu bewegen.


Schritt 29: Wandkollision

Dieser Code prüft auf Kollisionen zwischen dem Ball und den Wänden.


Schritt 30: Spielereignis verlieren

Eine if-Anweisung wird verwendet, um zu überprüfen, wann das Paddel den Ball verfehlt. Wenn ja, verliert der Spieler ein Leben.


Schritt 31: Paddel-Ball-Kollisionen

Wenn der Ball auf das Paddel trifft, wird die ySpeed auf negativ gesetzt, damit der Ball nach oben geht. Wir überprüfen auch, auf welcher Seite des Paddels der Ball getroffen hat, um die Seite auszuwählen, auf der er sich als nächstes bewegen wird.


Schritt 32: Ziegelkollisionen

Wir verwenden einen for- und einen hitTest, um nach Kollisionen mit Steinen zu suchen. Wenn der Ball auf einen Stein trifft, wird dieselbe Technik verwendet, die im Paddel verwendet wird, um die Seite zu bestimmen, der der Ball folgen wird.


Schritt 33: Ändern Sie die Kugelrichtung und entfernen Sie den Stein

Der folgende Code ändert die Y-Richtung der Kugel und entfernt den Stein von der Bühne und dem Vektor.

Wenn Sie möchten, können Sie diese Logik so ändern, dass die y-Geschwindigkeit des Balls nur umgekehrt wird, wenn er auf die Ober- oder Unterseite eines Ziegels trifft, und nicht, wenn er auf die Seiten trifft. Probieren Sie es aus und sehen Sie, was Sie denken.


Schritt 34: Punktzahl hinzufügen und Gewinn prüfen

Jeder Ziegelsteinschlag erhöht die Punktzahl um 100, die Punktzahl wird aus der Punktekonstante entnommen und mit den Funktionen int und String zur aktuellen Punktzahl addiert. Dieser Code prüft auch, ob der Vektor keine Bausteine mehr enthält, und zeigt in diesem Fall eine Warnung an.


Schritt 35: Warnbildschirm

Der Alarmbildschirm zeigt dem Spieler Informationen über den Status des Spiels an. Er wird angezeigt, wenn ein Spielereignis erreicht ist, z. B. ein Leben zu verlieren oder ein Level zu beenden.

In dieser Funktion werden zwei Parameter verwendet:

  • t: Der Alarmtitel
  • m: Eine kurze Nachricht

Schritt 36: Funktion neu starten

Die nächste Funktion überprüft den Spielstatus (gewinnen, verlieren, beendet) und führt eine entsprechende Aktion aus.


Schritt 38: Level ändern

Diese Funktion ändert sich auf die im Parameter geschriebene Ebene.


Schritt 39: Level löschen

Eine Funktion zum Löschen der verbleibenden Steine und Warnungen von der Bühne. Außerdem wird die Position des Paddels und des Balls zurückgesetzt.


Schritt 40: Hauptklasse einstellen

Wir werden die Dokumentklasse in diesem Tutorial verwenden. Wenn Sie nicht wissen, wie man sie verwendet, oder etwas verwirrt sind, lesen Sie bitte diesen QuickTip.


Abschluss

Das Endergebnis ist ein anpassbares und unterhaltsames Spiel. Fügen Sie Ihre benutzerdefinierten Grafiken und Levels hinzu!

Ich hoffe, Ihnen hat dieses Active Premium-Tutorial gefallen. Vielen Dank für das 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.