Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design
Gamedevelopment

Erstellen Sie ein Spielautomat Spiel in Flash mit AS3

by
Difficulty:IntermediateLength:MediumLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Folgen Sie den einfachen Schritten dieses Premium Tutorials, um ein unterhaltsames Spiel in Flash zu erstellen. Drehen Sie die Räder und sehen Sie, was Sie gewinnen könnten!


Schritt 1: Kurzer Überblick

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

Der Benutzer kann verschiedene Beträge setzen, um die Preise zu gewinnen.


Schritt 2: Flash-Dokumenteinstellungen

Öffnen Sie Flash und erstellen Sie ein 480 Pixel breites, 320 Pixel großes Dokument. Stellen Sie die Bildrate auf 30 Bilder pro Sekunde ein.



Schritt 3: Schnittstelle


Eine dunkle Schnittstelle wird angezeigt. Dazu gehören mehrere Formen, Schaltflächen, Bitmaps und mehr.

Fahren Sie mit den nächsten Schritten fort, um zu erfahren, wie Sie diese GUI erstellen.


Schritt 4: Hintergrund

Erstellen Sie ein Rechteck von 480 x 320 Pixel und füllen Sie es mit diesem radialen Farbverlauf: # 404040, # 080808.


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


Schritt 5: Titel

Fügen wir unserem Spiel einen Titel hinzu; Abhängig von deinem Slot Machine Design kannst du die Grafik an deine Bedürfnisse anpassen. Hier habe ich das Tuts + Logo verwendet.



Schritt 6: Slots Hintergrund

Verwenden Sie das Rectangle Primitive Tool (R), um ein Rechteck von 320 x 160 Pixel zu erstellen. Ändern Sie den Eckenradius auf 10 und füllen Sie ihn mit diesem linearen Verlauf: # F5DA95, # 967226, # 91723B.


Dupliziere die Form, ändere ihre Größe auf 316x156px und ändere ihre Farbe in den schwarzen linearen Farbverlauf, den wir vorher benutzt haben.



Schritt 7: Artikel Grafiken

Dies sind die Grafiken, die wir als Spielautomaten verwenden werden - fühlen Sie sich frei, alle Grafiken zu verwenden, die Sie in Ihrem eigenen Spie  wollen!



Schritt 8: Rollen Hintergründe

Um den Hintergrund für die Rollen zu erstellen, verwenden Sie das Rechteck-Werkzeug (R), um ein 98x146px-Rechteck zu erstellen und füllen Sie es mit diesem Farbverlauf: # 8F8459, # F8F4C7, # 8F8459.


Duplizieren Sie die Formen und richten Sie sie im Bereich "Slots" aus.


Schritt 9: Reel MovieClip

Ordnen Sie die Artikelgrafiken in der gewünschten Reihenfolge an und konvertieren Sie sie in Movieclips. Wir werden das Reel-Hintergrund-Rechteck des letzten Schritts verwenden, um den Schatteneffekt zu erstellen: Ändern Sie die Farbe in Schwarz und ändern Sie die Alpha-Werte auf 65, 15, 0.

Dies kann ein kniffliger Teil sein, also stellen Sie sicher, dass Sie die Quelldateien herunterladen, um Ihnen zu helfen.


Wie Sie sehen können, habe ich zwei Nettuts + -Logos und zwei Psdtuts + -Logos verwendet, aber nur jeweils eines der Activetuts + - und Vectortuts + -Logos. Dies bedeutet, dass es eine größere Möglichkeit gibt, drei Nettuts + -Logos zu finden als drei passende ActiveTuts + -Logos.

Verwenden Sie den Schatten als Maskenebene und die Zeitleiste zum Animieren der Objekte nach unten. Ich habe Frame-für-Frame-Animation verwendet, um die Elemente in jedem Frame um 20 Pixel nach unten zu bewegen. Sie könnten ein Tween verwenden, wenn Sie möchten.


Dupliziere diesen MoveClip und lege sie in den richtigen Slot-Hintergrund. Verwenden Sie die folgenden Instanznamen: items1, items2, items3.


Schritt 10: Etiketten

Timeline-Labels werden verwendet, um nach einer Gewinnkombination zu suchen. Erstelle eine neue Ebene und beschrifte jeden Rahmen wo sich unser Gegenstand in der Mitte befindet.



Schritt 11: Statische Textfelder

Verwenden Sie das Textwerkzeug (T), um drei statische Textfelder zu erstellen: Credits, Bet und Winner Paid.



Schritt 12: Dynamische Textfelder

Wenn das Textwerkzeug noch ausgewählt ist, erstellen Sie drei dynamische Textfelder, platzieren Sie sie über den statischen und benennen Sie sie von links nach rechts: creditsT, betT und paidT.



Schritt 13: Schaltflächen

Verwenden Sie das Rectangle Primitive Tool, um drei 45x45px-Quadrate zu erstellen, ändern Sie den Eckenradius auf 4 und füllen Sie ihn mit: # CD0202, # 910202. Fügen Sie jedem das entsprechende Textlabel hinzu, wandeln Sie jedes in eine Schaltfläche um und benennen Sie sie: payTabB, betMaxB und betOneB.



Schritt 14: Drehknopf

Der Drehknopf ist ein wenig größer als die anderen und hat auch eine andere Farbe.

Verwenden Sie den gleichen Prozess der anderen Tasten, aber ändern Sie die Größe zu 50x50px und die Farbe zu: # 5DA012, 3C670C.


Benenne den Button spinB.


Schritt 15: Sounds


Wir werden Sound-Effekte verwenden, um das Spielgefühl zu verbessern. Sie können die Sounds, die in diesem Beispiel in Soungle.com verwendet werden, mit dem Keyword-Spielautomaten finden.


Schritt 16: TweenNano


Wir verwenden eine andere Tween-Engine als die standardmäßig in Flash enthaltene.We'll use a different tween engine from the default included in Flash, this will increase performace as well as it is easier to use

Sie können TweenNano von seiner offiziellen Website herunterladen. 


Schritt 17:Neue ActionScript-Klasse

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



Schritt 18: Klassenstruktur

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


Schritt 19: Benötigte Klassen

Dies sind die Klassen, die wir importieren müssen, damit unsere Klasse funktioniert.Die Import-Direktive macht extern definierte Klassen und Pakete für Ihren Code verfügbar.


Schritt 20: Variablen

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


Schritt 21: Konstruktorcode

Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn ein Objekt aus einer Klasse erstellt wird. Dieser Code wird zum ersten Mal ausgeführt, wenn Sie eine Instanz eines Objekts erstellen, oder wenn SWF zum ersten Mal geladen wird, wenn er zur Dokumentklasse gehört.

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


Schritt 22: Stoppen Sie die Artikel

Verhindern Sie, dass die MovieClips sofort abgespielt werden.


Schritt 23: Hinzufügen von Schaltflächenlistenern

Hier verwenden wir eine benutzerdefinierte Funktion, um die Mausereignisse zu unseren Schaltflächen hinzuzufügen.Diese Funktion wird später in der Klasse erstellt.


Schritt 24: Deaktivieren Sie den Drehknopf

Als nächstes verwenden wir eine andere benutzerdefinierte Funktion, die die Mausereignisse der Spin-Schaltfläche verhindert.


Schritt 25: Tastenlistener

Diese Funktion fügt ein MouseUp-Ereignis zu den Schaltflächen je nach dem angegebenen Parameter hinzu oder entfernt es.


Schritt 26: Schaltflächen aktivieren / deaktivieren

Die folgende Funktion verwendet ihre Parameter, um den Alphawert der angegebenen Schaltfläche zu tweenen und Mausinteraktionen zu deaktivieren / aktivieren.


Schritt 27: Wette Max Button

Die Bet Max Taste wird von dieser Funktion gehandhabt.

Es spielt den Spin-Sound, ändert die Credits-Textfelder und ruft die Spin-Funktion auf.


Schritt 28: Wette einen Knopf

Die Bet One Taste wird von dieser Funktion gehandhabt.

Es erhöht den Einsatz um eins (wenn möglich) und spielt den entsprechenden Tastenklang. Es aktiviert auch die Schaltfläche "Drehen".


Schritt 29: Bezahltabelle anzeigen / ausblenden

Die Bezahltabelle wird von dieser Funktion bearbeitet.

Es prüft, ob die Auszahlungstabelle bereits auf der Bühne ist, und wenn nicht, verwendet es ein Tween, um es anzuzeigen und zu zentrieren. Die anderen Schaltflächen sind deaktiviert, während die Tabelle angezeigt wird.


Schritt 30: Drehknopf

Die Spin-Schaltfläche wird von dieser Funktion gehandhabt.

Es spielt den Spin-Sound und die Spin-Funktion, wenn die Credits korrekt sind.


Schritt 31: Spin-Funktion

Eine der Kernfunktionen des Spiels, die Spin-Funktion, übernimmt das Gewinnen und das Ausgeben von Credits, dreht die Gegenstände in den Slots und verwendet einen Timer, um sie zu stoppen. Lesen Sie die nächsten Schritte für eine detailliertere Ansicht dieser Aktionen.


Schritt 32: Fügen Sie Won Credits hinzu

Dies prüft, ob Credits aus dem Textfeld payedT hinzugefügt werden können, und setzt den Wert auf 0 zurück.


Schritt 33: Credits subtrahieren

Dies subtrahiert die Credits der letzten Wette.


Schritt 34: Spin-Elemente

Diese Funktion animiert die Walzen, damit die Objekte sich drehen.


Schritt 35: Spin Timer

Dieser Timer bestimmt (nach dem Zufallsprinzip) die Zeit, in der sich die Rollen drehen, ist bei jeder Drehung unterschiedlich.


Schritt 36: Timer-Funktion

Diese Funktion wird jedes Mal ausgeführt, wenn der Timer seine Zählung beendet.

 Es stoppt den laufenden Slot und spielt den Stop-Sound. Wenn alle Elemente gestoppt sind, löscht sie den Timer und ruft die Funktion checkWin () auf.


Schritt 37: Am nächsten Logo ausrichten

Da der Timer in einem Frame enden kann, in dem sich das aktuelle Objekt nicht in der Mitte befindet, überprüfen wir das aktuelle Bild des MovieClip und verwenden gotoAndStop (), um das nächste Objekt anzuzeigen.

Möglicherweise müssen Sie diesen Code ändern, damit er den von Ihnen ausgewählten Symbolen und Spinanimationen entspricht.


Schritt 38: Überprüfen Sie Win

Diese Funktion überprüft, ob die drei Elemente gleich sind. Wenn sie wahr ist, spielt sie den Gewinnsound und fügt dem bezahlten Textfeld den entsprechenden Betrag hinzu.


Schritt 39: Hauptklasse festlegen


Wir verwenden in diesem Tutorial die Dokumentenklasse. Wenn Sie nicht wissen, wie Sie sie verwenden sollen oder etwas verwirrt sind, lesen Sie bitte diese QuickTip.

Legen Sie die Dokumentklasse Ihrer FLA auf Main fest. 


Schritt 40: Test

Wir sind jetzt bereit, den Film zu testen und zu sehen, ob alles wie erwartet funktioniert, vergiss nicht, alle Knöpfe zu probieren!



Fazit

Das Endergebnis ist ein anpassbares und unterhaltsames Spiel. Versuchen Sie, Ihre eigenen Grafiken und Preise hinzuzufügen! Sie könnten auch versuchen, die Wahrscheinlichkeit zu ändern, um es einfacher oder schwerer zu machen, zu gewinnen.

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

Advertisement
Advertisement
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.