In diesem Tutorial erstellen wir ein 3D-Speicherspiel. Auf dem Weg betrachten wir das Hinzufügen von Variablen und mouseEvents zu Away3D-Objekten. Lass uns anfangen…
Schritt 1: ActionScript-Datei
Erstellen Sie eine neue ActionScript 3.0-Datei.
Schritt 2: Profil bearbeiten
Klicken Sie im Eigenschaftenbereich auf die Schaltfläche Bearbeiten.
Schritt 3: Wählen Sie die Flash Player-Version
Wählen Sie das Flash Player 9-Profil und klicken Sie auf OK.
Schritt 4: Holen Sie sich die Away3D Engine!
Speichern Sie Ihre Datei als "Memory Game.fla" im Ordner "Memory Game Tutorial". Laden Sie jetzt die Away3D-Engine von Away3D-Downloads herunter. Wir verwenden die Version 2.3.3 für Flash Player 9. Entpacken Sie das Archiv und kopieren Sie alle Ordner in den Ordner Memory Game Tutorial.
Schritt 5: Holen Sie sich den Tweener!
Laden Sie Tweener hier herunter. Entpacken Sie die Klassendateien in Ihren Memory Game Tutorial-Ordner, damit es so aussieht:
Schritt 6: Importieren Sie Texturen
Wir werden 5 verschiedene Karten für dieses Spiel verwenden (Sie finden sie in den Quelldateien). Importieren Sie sie in Flash, indem Sie auf Datei> Importieren> In Bibliothek importieren klicken.
Schritt 7: Exportieren Sie Texturen für ActionScript
Um diese Texturen zur Laufzeit verwenden zu können, müssen wir ihnen einen Klassennamen hinzufügen. Wählen Sie die Bilder einzeln aus und klicken Sie mit der rechten Maustaste, und wählen Sie Eigenschaften> Für ActionScript exportieren. Entfernen Sie einfach die ".png" -Teile ihrer Namen.
Schritt 8: Starten Sie die Codierung
Nach all dem können wir mit dem Programmieren beginnen. Füllen Sie unsere ersten Zeilen aus, indem Sie die Klassen importieren:
Nach dem Importieren unserer Klassen sollten wir unsere Variablen definieren, die in den folgenden Schritten verwendet werden sollen.
Var-Szene: Scene3D; Var Kamera: Camera3D; var view: View3D; var totalchildren: int = 10 var Karten: Array var Texturen: Array = [neue Textur0 (0,0), neue Textur1 (0,0), neue Textur2 (0,0), neue Textur3 (0,0), neue Textur4 (0,0)] var-Hintergrundtextur: BitmapData = neue Textur zurück (0,0) Var-Holztextur: BitmapData = neuer Texturholz (0,0) var-Kartenbreite: Number = 110 var-Kartenhöhe: Number = 150 var xoffset: Number = 10 var yoffset : Number = 10 var cardholder: ObjectContainer3D var selectedCard1: Ebene var selectedCard2: Ebene var disableMouseEvents: Boolean = false
Das Texturen-Array enthält unsere Texturbilder. Um Bilder aus unserer Bibliothek an unsere Bühne anzuhängen, verwenden wir diese Methode: var imageData: BitmapData = LibraryLinkageName (0,0). Wir verwenden den gleichen Ansatz für unseren Tisch und die Rückseite der Karten. xoffset und yoffset definieren den Abstand zwischen den Karten.
Schritt 10: Away3D einrichten
Zunächst müssen wir Away3D bauen.
function initAway3D (): void scene = new Scene3D (); Kamera = neue Kamera3D (); camera.y = 700 camera.z = 500 camera.lookAt (neue Number3D (0,0,0)) Ansicht = neue View3D (Szene: Szene, Kamera: Kamera); view.x = stage.stageWidth / 2 view.y = stage.stageHeight / 2 addChild (view);
Die erste Zeile in unserer Funktion erstellt die 3D-Szene. Wir fügen 3D-Objekte hinzu. Danach erstellen wir die Kamera. Wir werden es ein bisschen nach hinten und oben bewegen. Auf diese Weise können wir Karten besser sehen, wenn wir das Spiel spielen. Dann zentrieren wir es. Zum Schluss erstellen wir die Ansicht und setzen sie in die Mitte der Szene.
Um es realistischer zu gestalten, verwenden wir einen Würfel anstelle einer Ebene. Der wichtigste Punkt hierbei ist die Verwendung von Pushback-Eigenschaften in Cube, um es unter den Karten sichtbar zu machen. Das für Cube verwendete Material ist BitmapMaterial. Dies ist der beste Weg, um Bitmaps als Texturen zu verwenden.
Schritt 12: Erstellen einer Karte
Zuerst erstellen wir einen Halter. In diesem Halter befinden sich zwei Flugzeuge. Eine dieser Ebenen ist die Vorderseite der Karten und die andere ist die Rückseite. Wir verwenden den Halter, um die Karten zu drehen oder zu verschieben.
In dieser Funktion erstellen wir das, was das Diagramm veranschaulicht. Wir sollten Rotation verwenden, um die Karten verdeckt zu legen. Wir fügen dem Inhaber kein Ereignis hinzu, da wir nur auf die Rückseite der Karte klicken. Aus diesem Grund fügen wir ein mouseDown -Ereignis nur zur hinteren Ebene hinzu.
Jedes 3D-Objekt in Away3D kann zusätzliche Variablen haben und jede Farbe in unserem Spiel hat eine eindeutige ID. Wir fügen diese ID-Variable zur "extra" -Eigenschaft von Back Plane hinzu. Wir verwenden IDs, um zu prüfen, ob die ausgewählten zwei Karten dieselbe Farbe haben oder nicht.
Schritt 13: Alle Karten erstellen
Nach der Kartenerstellungsfunktion können wir alle erstellen.
function initCards (): void cards = new Array () für (var i: int = 0; i
Wir schieben alle unsere Karten in ein Kartenarray. Es gibt zwei Karten von jeder Farbe (zwei blaue, zwei rote und zwei grüne). Aus diesem Grund erstellen wir zwei Karten mit derselben Farbe und schieben sie zum Array.
Schritt 14: Karten randomisieren
Der nächste Schritt besteht darin, das Kartenarray zufällig zu sortieren.
function randomizeCards (): void var newArray: Array = neues Array (); while (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); cards = newArray
Es ist alles so einfach. Zuerst erstellen wir ein neues Array. Dann wählen wir einen zufälligen Gegenstand aus dem Karten-Array aus, schieben ihn zum neuen Array und entfernen ihn aus dem Karten-Array. Nachdem die while-Schleife abgeschlossen ist, gleichen wir das Karten-Array mit unserem neuen Array ab. Jetzt haben wir ein randomisiertes Array.
Schritt 15: Hinzufügen von Karten zur Szene
Jetzt haben wir unsere Karten randomisiert, damit wir sie der Szene hinzufügen können. Wir verwenden ein Rastersystem für ihre Positionen
function addCardsToScene (): void cardsholder = neuer ObjectContainer3D () var currentindex: int = 0 für (var i: int = 0; i<2; i++) for(var b:int=0; b<5; b++) cards[currentindex].x=b*(cardwidth+xoffset)+cardwidth/2 cards[currentindex].z=i*(cardheight+yoffset)+cardheight/2 cardsholder.addChild(cards[currentindex]) currentindex++ var cardswidth:Number = (5*cardwidth) + (4*xoffset) var cardsheight:Number = (2*cardheight) + (1*yoffset) cardsholder.x=-cardswidth/2 cardsholder.z=-cardsheight/2 scene.addChild(cardsholder)
Die erste "for" -Schleife gilt für die x-Achse und die zweite für die y-Achse. Wir fügen Karten zu einem neuen Hauptinhaber hinzu. Wenn wir also die Karten drehen oder verschieben möchten, können wir nur den Hauptinhaber verwenden. Dann setzen wir die Karten mithilfe des Rastersystems. Dafür verwenden wir die Variablen cardwidth, cardheight, xoffset und yoffset. Die Karten müssen sich in der Mitte des Tisches befinden. Dazu müssen wir die Breiten- und Höhenwerte des Hauptkarteninhabers ermitteln. Dieses Diagramm zeigt, wie wir sie bekommen.
Nachdem wir sie bekommen haben, bewegen wir den Haupthalter in die Mitte des Tisches.
Schritt 16: Mouse Down Event
Wir haben der Szene Karten hinzugefügt. Im nächsten Schritt erstellen Sie die mouseDown-Ereignisfunktion.
Funktion onBackClicked (e: Event) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget als Ebene else if (selectedCard2 == null) selectedCard2 = e.currentTarget als Ebene waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotationZ: 0, Zeit: 1)
Zuerst prüfen wir disableMouseEvents. Das heißt, wenn wir die Erlaubnis haben, Karten zu klicken, machen wir weiter, aber wenn nichts passiert, passiert nichts. Wenn die erste Karte nicht ausgewählt ist, ist die angeklickte Karte unsere erste Karte. Wenn die erste Karte nicht null ist, ist diese angeklickte Karte unsere zweite Karte.
Unser Spiel muss eine Entscheidung treffen, nachdem wir die beiden Karten ausgewählt haben, ob sie gleich sind oder nicht. Aus diesem Grund läuft unsere "waitForDecision" -Funktion und wir setzen disableMouseEvents auf true. Während das Spiel auf eine Entscheidung wartet, passiert also nichts, wenn wir auf eine Karte klicken.
Die RotationZ-Eigenschaft unserer geklickten Karte beträgt bei Tweener 180 Grad, sodass wir die Farbe der Karte sehen können.
Schritt 17: Warten Sie auf eine Entscheidung
Wenn die beiden Karten ausgewählt sind, wartet das Spiel etwas (dies ist nur zum Spaß).
function waitForDecision (): void var timer: Timer = neuer Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Wie Sie sehen, ist dies ein einfacher Timer-Einsatz. Es wartet 1000 Millisekunden (1 Sekunde). Danach löst TimerEvent die Ausführung der makeDecision-Funktion aus.
Schritt 18: Treffen Sie eine Entscheidung
Wir haben 1 Sekunde gewartet, also ist es Zeit, eine Entscheidung zu treffen. Wenn die ID-Werte der Karten gleich sind, werden sie verschwinden, andernfalls werden sie wieder verdeckt
Genau das machen wir in dieser Funktion. Wir überprüfen die ID-Werte von zwei ausgewählten Karten. Wenn sie gleich sind, ändern sich die Alpha-Werte von ihnen mit Tweener in 0 (wir lassen sie verschwinden). Wenn dieses Tween beendet ist, wird die Funktion removeCard aufgerufen. Der Parameter der Funktion removeCard ist die Karte selbst. Wir machen das mit den beiden Karten gleichzeitig. Wenn sie nicht gleich sind, schicken wir sie in ihre alten Positionen und machen sie verdeckt. Unabhängig von der Entscheidung werden selectedCard1 und selectedCard2 auf null gesetzt.
Schritt 19: Karten entfernen
Wir müssen die zwei Karten von unserem Hauptkartenhalter entfernen, wenn sie verschwinden, weil wir sie nicht mehr brauchen.
In dieser Lektion haben wir gelernt, wie Sie Variablen und mouseEvents zu Away3D-Objekten hinzufügen. Mit diesen Fähigkeiten haben wir ein Spiel gemacht und wie du sehen kannst, war es nicht so schwer :)
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
Share
Accentsconagua
