Share
Sehen Sie sich dieses Premium-Tutorial an, um ein unterhaltsames Puzzlespiel zu erstellen, das von Frenzic mit Flash und ActionScript 3 inspiriert ist.
Füllen Sie in der obigen Demo die äußeren Kästen mit farbigen Quadraten. Sie erhalten mehr Punkte, wenn Sie ein Feld mit Quadraten füllen, die alle die gleiche Farbe haben.
Mit den Flash-Zeichenwerkzeugen erstellen wir eine gut aussehende grafische Benutzeroberfläche, die von mehreren ActionScript 3-Klassen unterstützt wird.
Der Spieler kann auf vier verschiedene Orte klicken, um die Farbblöcke auf den Feldern zu sortieren. Wenn Sie ein Feld mit einer Blockfarbe füllen, erhalten Sie mehr Punkte.
Öffnen Sie Flash und erstellen Sie ein 320 Pixel breites und 480 Pixel hohes Dokument. Stellen Sie die Bildrate auf 24fps ein.
Eine farbenfrohe, schön aussehende Oberfläche wird angezeigt. Dazu gehören mehrere Formen, Schaltflächen, Sounds und mehr.
Fahren Sie mit den nächsten Schritten fort, um zu erfahren, wie Sie diese GUI erstellen.
Wählen Sie das Rechteckwerkzeug (R) aus, um ein 320x480px # 0D6191, # 001217-Rechteck zu erstellen, und zentrieren Sie es in der Bühne. Verwenden Sie dasselbe Werkzeug, um eine schwarze 2x480px-Linie mit 20% Alpha zu kitten, drücken Sie CMD + D, um sie mehrmals zu duplizieren, und verteilen Sie die Linien, um den Effekt in der Abbildung oben zu erhalten.
Wähle das Textwerkzeug (T), wähle eine gut aussehende Schrift und schreibe deinen Spieletitel. Ich habe dieses Format verwendet: Orbitron Bold, 60pt, # A3FF24. Sie können einen einfachen Glühfilter hinzufügen, damit er besser aussieht.
Verwenden Sie die gleiche Technik, um zwei Schaltflächen zu erstellen, sie an der Mitte auszurichten und sie zu benennen startB und creditsB. Alle in a konvertieren Filmausschnitt und seinen Namen auf TitleView; Markiere die Export für ActionScript Box und löschen Sie den Clip von der Bühne.
Das wird das sein GameView. Fügen Sie den Hintergrund hinzu MC auf die Bühne und zwei erstellen Dynamische Textfelder und platzieren Sie sie wie im Bild gezeigt. Benennen Sie die Textfelder LivesTF und scoreTF.
Verwenden Sie die Rechteckwerkzeug (R) Um ein 70x70px-Quadrat zu erstellen und es mit dem Hintergrundverlauf auszufüllen, konvertieren Sie es in MC und drücken Sie CMD + D, um es zu duplizieren, so dass Sie insgesamt fünf haben. Verwenden Sie das Ausrichtungsfenster, um sie wie im Bild gezeigt zu platzieren.
Die Instanznamen sollten zu ihren Positionen passen - das heißt: rauf runter links rechts und das Zentrum wird sein mainHolder.
Verwenden Sie dieselbe Technik, die im letzten Schritt zum Erstellen von drei 30x30px-Blöcken verwendet wurde, konvertieren Sie sie in MC und benennen Sie sie entsprechend ihrer Farbe: OrangeBlock, PurpleBlock und GreenBlock. Vergiss nicht, das zu markieren Export für ActionScript Box.
Eine Warnung wird angezeigt, wenn Sie alle Ihre Leben verlieren, und es wird die erreichte Endpunktzahl angezeigt. Verwenden Sie die Rechteckiges Grundwerkzeug Erstellen Sie es und füllen Sie es mit diesem linearen Farbverlauf: # 000000 bis # 333333. Setzen Sie den Instanznamen auf AlertView und markieren Sie das Export für ActionScript Box.
Dieser Bildschirm ist leicht zu erstellen, da wir bereits alle Grafiken haben. Setzen Sie den Instanznamen auf CreditsView und markieren Sie das Export für ActionScript Box.
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.
Wir verwenden Soundeffekte, um das Spielgefühl zu verbessern. Sie können die in diesem Beispiel verwendeten Sounds in Soungle.com anhand der Schlüsselwörter finden Glocke und summen. Fügen Sie sie zu Ihrer Bibliothek hinzu, mit Klassennamen von Glocke, Bell4, und Summen, beziehungsweise.
Erstellen Sie eine neue (Cmd + N) ActionScript 3.0-Klasse, und speichern Sie sie als Main.as in Ihrem Klassenordner.
Erstellen Sie Ihre grundlegende Klassenstruktur, um mit dem Schreiben Ihres Codes zu beginnen.
package import flash.display.Sprite; public class Main erweitert Sprite öffentliche Funktion Main (): void // constructor code
Dies sind die Klassen, die wir importieren müssen, damit unsere Klasse funktionieren kann einführen Die Direktive macht extern definierte Klassen und Pakete für Ihren Code verfügbar.
import flash.display.Sprite; import flash.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Bounce; import flash.utils.Timer; import flash.events.TimerEvent; import flash.net.navigateToURL; import flash.net.URLRequest;
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, so dass dort kein Kommentar enthalten ist.
private var titleView: TitleView = new TitleView (); private var credits: CreditsView; private var blockColor: Vektor.= neuer Vektor. (); // Speichert die verfügbaren Farben, die zum Erstellen neuer privater Var-Blöcke für Blockinstanzen verwendet werden: Vektor. = neuer Vektor. (); // speichert alle Blöcke auf dem Bildschirm, um jederzeit auf private Vari-Positionen zugreifen zu können: Vektor. = neuer Vektor. (); // enthält die möglichen Blockpositionen private var currentXPosition: int; private var currentYPosition: int; private var eventTarget: Object; // Wird verwendet, um auf das Ereignisziel der Ortsfunktion zuzugreifen. private var timer: Timer = neuer Timer (3000); // Sie haben 3 Sekunden, um den Block in der Mitte private private Leben: int zu platzieren = 5; private var-Bewertung: int = 0; private var bell: Bell = new Bell (); private var bell4: Bell4 = neue Bell4 (); privates var-Buzz: Buzz = neues Buzz ();
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 (wenn in der Dokumentklasse) der erste, der ausgeführt wird, wenn das Projekt geladen wird.
Es ruft die notwendigen Funktionen auf, um das Spiel zu starten. Überprüfen Sie diese Funktionen in den nächsten Schritten.
öffentliche abschließende Funktion Main (): void // code?
Wir beginnen mit dem Hinzufügen von TitleView zur Bühne; Andernfalls wird der erste Bildschirm angezeigt GameView.
addChild (titleView);
Das blockColor Mit dem Vektor wird eine neue Instanz des ausgewählten Blocks erstellt. Die Parameter sind die Blöcke, die wir in den vorherigen Schritten erstellt haben.
Das Positionen Vektor speichert das Mögliche x und y Positionen, die ein Block haben kann; Wenn Sie dies vermischen, erhalten Sie die endgültige Position in Bezug auf die mainHolder MC.
Accentsconagua
blockColor.push ('orange', 'grün', 'lila'); Positionen.Push (5, 35); startButtonListeners (); In dieser Funktion fügen wir die Maus-Listener zu den Schaltflächen in der Titelansicht hinzu. Diese führen uns zum Spielbildschirm oder zum Credits-Bildschirm.
private letzte Funktion startButtonListeners (action = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Der Bildschirm "Credits" wird angezeigt, wenn der Benutzer auf die Schaltfläche "Credits" klickt. Ein Mauslistener wird zum vollständigen MC hinzugefügt, um ihn zu entfernen.
private letzte Funktion showCredits (e: MouseEvent): void credits = new CreditsView (); addChild (credits); TweenNano.from (credits, 0.3, x: stage.stageWidth, onComplete: function (): void titleView.visible = false; credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits);;
Wenn der Credits-Bildschirm angeklickt wird, wird er von der Bühne getweent und entfernt.
private letzte Funktion hideCredits (e: MouseEvent): void titleView.visible = true; TweenNano.to (credits, 0.3, x: stage.stageWidth, onComplete: function (): void credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Wenn der Start Wenn Sie die Taste drücken, wird die Titelansicht getweent und entfernt, um die Spielansicht anzuzeigen.
private letzte Funktion showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = Null; ); counter.gotoAndStop (1); addListeners (); Lasst uns hier aufhören, um einen schnellen Test zu machen und sicherzustellen, dass unsere Bildschirmumschalter Code funktioniert (Test Credits zuerst, damit Sie zurückgehen können). Legen Sie die Dokumentenklasse Ihres FLA auf fest Main.
Denken Sie daran, dass die Meilensteine in den Quelldateien enthalten sind. Wenn Ihre Datei aus irgendeinem Grund nicht imitiert, werfen Sie einen Blick auf die Quelle, um herauszufinden, was die Ursache sein kann.
Kehren Sie zum Code zurück und fügen Sie die folgende Funktion hinzu. Es wird ein Maus-Listener zu den Quadraten hinzugefügt, sodass Sie darauf klicken können, um den aktuellen Block zu platzieren.
private letzte Funktion addListeners (): void up.addEventListener (MouseEvent.MOUSE_UP, placeBlock); right.addEventListener (MouseEvent.MOUSE_UP, placeBlock); down.addEventListener (MouseEvent.MOUSE_UP, placeBlock); left.addEventListener (MouseEvent.MOUSE_UP, placeBlock);
Diese Arrays werden in den quadratischen MovieClips erstellt. Sie werden verwendet, um die Blöcke, Farben und Positionen in jedem Quadrat zu registrieren.
Die Buchstaben repräsentieren die folgenden Positionen:
Fahre mit dem fort addListeners () Funktion:
/ * Erstellen Sie für jeden Container ein Array, um zu bestimmen, wann voll und die Blöcke Farbe haben * / up.blocks = []; right.blocks = []; down.blocks = []; left.blocks = []; / * Erstellen Sie für jeden Container einen Boolean, um zu vermeiden, dass Blöcke an derselben Position platziert werden. * / Up.a = false; right.a = falsch; down.a = falsch; left.a = falsch; up.b = falsch; right.b = falsch; down.b = falsch; left.b = falsch; up.c = falsch; right.c = falsch; down.c = falsch; left.c = falsch; up.d = falsch; right.d = falsch; down.d = falsch; left.d = falsch; newBlock (true);
Dieser Code wählt eine zufällige Blockfarbe aus dem Vektor aus, mit der der tatsächliche Block instanziiert wird. Mit einem Parameter wird festgelegt, ob der Timer zum Starten des Zählens aktiviert wird.
private letzte Funktion newBlock (firstTime: Boolean = false): void / * Neuer Block * / var randomBlock: int = Math.floor (Math.random () * 3); var-Block: Sprite; switch (blockColor [randomBlock]) case 'orange': block = new OrangeBlock (); brechen; case 'green': block = new GreenBlock (); brechen; case 'purple': block = new PurpleBlock (); brechen; default: trace ('BlockColor Error'); brechen; Nachdem Sie die Blockfarbe ausgewählt haben, wird die Position, an der sie platziert wird, mithilfe von berechnet Positionen Vektor und dann dem Blockvektor und der Bühne hinzugefügt. Fahre mit dem fort newBlock () Funktion:
currentXPosition = Positionen [Math.floor (Math.random () * 2)]; currentYPosition = Positionen [Math.floor (Math.random () * 2)]; block.x = mainHolder.x + currentXPosition; block.y = mainHolder.y + currentYPosition; blocks.push (block); addChild (block);
Bevor Sie mit dem Spiel fortfahren, müssen Sie überprüfen, ob der neu erstellte Block tatsächlich in einem quadratischen Container platziert werden kann. Mit dem folgenden Code wird jedes Container-Array überprüft, um sicherzustellen, dass in einer der Boxen, in denen der Block platziert werden kann, eine leere Position verfügbar ist. Wenn nicht, wird der Block zerstört und die Funktion wird erneut aufgerufen, um einen neuen zu generieren.
/ * Nach einem verfügbaren Platz zum Verschieben des Blocks suchen * / var position: Array = [currentXPosition, currentYPosition]; if (String (Position) == '5,5' && up.a && right.a && down.a && left.a) removeChild (block); Block = Null; newBlock (); else if (String (Position) == '35, 5 '&& up.b && right.b && down.b && left.b) removeChild (block); Block = Null; newBlock (); else if (String (Position) == '5,35' && up.c && right.c && down.c && left.c) removeChild (block); Block = Null; newBlock (); else if (String (Position) == '35, 35 '&& up.d && right.d && down.d && left.d) removeChild (block); Block = Null; newBlock ();
Wenn Sie ein anderes Layout für Ihr Spiel verwendet haben, stellen Sie sicher, dass Sie den Wert ändern, den Sie überprüfen (d. H. Nicht) '35, 35 ', da die Blöcke Ihres Spiels an diesem Punkt nicht unbedingt erscheinen werden).
Der Timer beginnt zu zählen, wenn die Funktion zum ersten Mal aufgerufen wird.
if (firstTime) / * Start Timer * / timer.addEventListener (TimerEvent.TIMER, timesUp); timer.start (); counter.play (); // Die newBlock () - Funktion beenden
Drei Sekunden stehen zur Verfügung, um einen Block in einem quadratischen Behälter zu platzieren. Wenn diese Zeit verstrichen ist und der Block noch im mittleren Quadrat ist, wird das Leben entfernt.
private letzte Funktion timesUp (e: TimerEvent): void / * Remove Live * / lives--; livesTF.text = String (lebt); buzz.play ();
Nach dem Entfernen der Lebensdauer wird der Block im mittleren Quadrat zerstört und ein neuer Block wird generiert. Dieser Code überprüft auch, ob der Player kein Leben mehr hat, und ruft eine Funktion auf, die wir später schreiben werden.
/ * Nicht verwendeten Block entfernen * / var i: int = blocks.length - 1; removeChild (Blöcke [i]); Blöcke [i] = Null; Blöcke.Splice (i, 1); / * Überprüfen Sie, ob es keine Leben mehr gibt * / if (lebt < 1) alert(); else /* Next Block */ newBlock();
Lassen Sie uns noch eine Pause einlegen, um zu sehen, wie unser Code an dieser Stelle funktioniert:
Diese Funktion wird ausgeführt, wenn der Spieler auf eines der Containerquadrate klickt. Es prüft grundsätzlich, ob die richtige Position für das Platzieren verfügbar ist, und platziert sie, falls sie wahr ist. Die Funktion im nächsten Schritt wird aufgerufen, wenn der Block platziert wird.
private letzte Funktion placeBlock (e: MouseEvent): void var i: int = blocks.length - 1; eventTarget = e.target; / * Prüfen, ob Position verfügbar ist * / var position: Array = [currentXPosition, currentYPosition]; if (String (Position) == '5,5' &&! e.target.a) Blöcke [i] .x = e.target.x + Position [0]; Blöcke [i] .y = e.Target.y + Position [1]; e.target.a = true; blockPlaced (); else if (String (Position) == '35, 5 '&&! e.target.b) Blöcke [i] .x = e.target.x + Position [0]; Blöcke [i] .y = e.Target.y + Position [1]; e.target.b = true; blockPlaced (); else if (String (Position) == '5,35' &&! e.target.c) Blöcke [i] .x = e.target.x + Position [0]; Blöcke [i] .y = e.Target.y + Position [1]; e.target.c = true; blockPlaced (); else if (String (Position) == '35, 35 '&&! e.target.d) Blöcke [i] .x = e.target.x + Position [0]; Blöcke [i] .y = e.Target.y + Position [1]; e.target.d = true; blockPlaced ();
Möglicherweise müssen Sie die Werte, die hier geprüft werden, möglicherweise ändern, um sie an die Position Ihrer Blöcke anzupassen.
Wenn der Block in den Container eingefügt wird, fügen wir den Block dem Array hinzu, in dem die gespeicherten Blöcke in diesem Container aufgezeichnet werden. Dies hilft uns zu bestimmen, wann der Behälter voll ist.
private letzte Funktion blockPlaced (): void var i: int = blocks.length - 1; / * Block in Containerblöcke des Arrays verschieben * / eventTarget.blocks.push (blocks [i]);
Jeder gesetzte Block erhöht die Punktzahl um eins. Wenn die Box voll ist, erhöht sich die Punktzahl um 50 und wenn die Box vollständig mit einer einzigen Farbe gefüllt ist, erhöht sich die Gesamtpunktzahl um 200.
Score ++;
Ein kurzer Ton zeigt an, dass der Block platziert wurde.
bell.play ();
Der nächste Code prüft, ob der Container mithilfe des Container-Arrays von einem einzelnen Farbblock gefüllt wurde. Er erhöht die Punktzahl um 200, gibt den entsprechenden Sound wieder und prallt den Container als visuelles Zeichen ab. Außerdem werden die Variablen im Container gelöscht.
/ * Wenn Container voll ist und jeder Block dieselbe Farbe hat * / if (eventTarget.blocks.length == 4 && String (eventTarget.blocks [0]) == String (eventTarget.blocks [1]) && String (eventTarget.) blocks [1]) == String (eventTarget.blocks [2]) && String (eventTarget.blocks [2]) == String (eventTarget.blocks [3])) score + = 200; bell4.play (); TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, Leichtigkeit: Bounce.easeOut, onComplete: function (): void for (var j: int = 0; j. J < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Dieser Code wird ausgeführt, wenn der Container voll ist, die Blöcke jedoch nicht die gleiche Farbe haben.
/ * Wenn der Container voll ist, die Blöcke aber unterschiedliche Farben haben * / else if (eventTarget.blocks.length == 4) bell4.play (500, 2); Bewertung + = 50; TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, Leichtigkeit: Bounce.easeOut, onComplete: function (): void for (var j: int = 0; j. J < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Nach dem Löschen der vollen Container wird die Bewertung auf der Bühne auf das Textfeld gesetzt, der Timer zurückgesetzt und ein anderer Block aufgerufen.
scoreTF.text = String (score); Timer.stop (); timer.start (); counter.gotoAndPlay (1); newBlock ();
Die Alarmfunktion wird ausgeführt, wenn der Spieler keine Leben mehr hat. Es zeigt das erreichte Endergebnis an und fügt einen Listener hinzu, um zum Titelbildschirm zurückzukehren.
private letzte Funktionswarnung (): void timer.stop (); counter.gotoAndStop (1); var alert: AlertView = new AlertView (); alert.messageBox.msgTF.text = 'Score:' + String (Score); alert.addEventListener (MouseEvent.MOUSE_UP, Neustart); addChild (alert); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, ease: Bounce.easeOut);
Die nächste Funktion lädt die SWF-Datei neu, startet alle Variablen und Methoden neu und kehrt zur SWF zurück Titelbildschirm.
private letzte Funktion restart (e: MouseEvent): void navigateToURL (neue URLRequest (stage.loaderInfo.url), '_level0');
Sie haben ein sehr unterhaltsames Spiel erstellt, versuchen Sie, Ihre eigenen Funktionen und Grafiken hinzuzufügen.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, vielen Dank für das Lesen!
