Improve hukommelsen med en Away3D Spill
en
Del
Del
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil vi bygge en 3D-minne spillet. Underveis vil vi se på å legge variabler og mouseEvents å Away3D stedene. La oss komme i gang ..

Trinn 1:. Action File

Opprett en ny Actionscript 3.0 fil

Trinn 2: Rediger profil

I egenskapspanelet trykker på knappen Rediger

Trinn 3:.. Velg Flash Player versjon

Velg Flash Player 9 profilen, og klikk OK

Trinn 4: Få den Away3D Engine

Lagre filen som "Memory Game.fla" i minne spillet Tutorial mappe. Nå laste ned Away3D motoren Away3D nedlastinger. Vi vil bruke versjon 2.3.3 for Flash Player 9. Pakk ut arkivet og kopiere alle mapper til minne spillet Tutorial mappe

Trinn 5:.! Få Tweener

Last ned Tweener herfra . Pakk klassen filene til din Memory Game Tutorial mappe slik at det hele ser ut som dette:

Trinn 6: Import Tekstur

Vi vil bruke 5 forskjellige kort for dette spillet (du finner dem i kildefilene). Importere dem til Flash ved å gå Fil > Import > Importer til bibliotek

Trinn 7:. Eksport Teksturer for Action

For å bruke disse teksturer i runtime vi trenger å legge ved en klasse navn til dem. Velg bildene en etter en og gå Høyreklikk > Properties > Eksport for Actionscript. Bare fjerne "PNG" deler av deres navn

Trinn 8:. Begynn Coding

Etter alt det vi er klar til å starte koding. La oss fylle våre første linjene ved å importere klasser:
import away3d.cameras *; import away3d.containers *, import away3d.materials *; import away3d.primitives.Planeimport away3d.primitives.Cubeimport away3d.containers.ObjectContainer3D...; import away3d.core.math.Number3D, import caurina.transitions *
Trinn 9:.. Setup Variabler

Etter import våre klasser skal vi definere våre variabler som skal brukes i de neste trinnene
Div scene: Scene3D; Var kamera: Camera3D; Var Vis: View3D; Var totalchildren: int = 10var kort: Arrayvar teksturer: Array = [ny texture0 (0,0), ny texture1 (0,0), ny texture2 (0,0 ), ny texture3 (0,0), ny texture4 (0,0)] Var backtexture: BitmapData = new textureback (0,0) Var woodtexture: BitmapData = new texturewood (0,0) Var cardwidth: Number = 110var cardheight: Antall = 150var xoffset: Number = 10var yVerdi: Number = 10var cardsholder: ObjectContainer3Dvar selectedCard1: Planevar selectedCard2: Planevar disableMouseEvents: Boolean = false

teksturer utvalg holder våre tekstur bilder. Å legge ved bilder til vår scene fra biblioteket vi bruker denne metoden:
Var imageData: BitmapData = LibraryLinkageName (0,0)
. Vi bruker den samme tilnærmingen til bordet vårt og bakside av kortene. xoffset og yVerdi definerer avstanden mellom kortene

Trinn 10:.. Setup Away3D

Først av alt vi trenger for å bygge Away3D
funksjon initAway3D (): void {scene = new Scene3D ( ); Kameraet = new Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (ny Number3D (0,0,0)) view = new View3D ({scene: scene, kamera: Kameraet}); view.x = stage.stageWidth /2 view.y = stage.stageHeight /2 addChild (vis); }

den første linjen i vår funksjon skaper 3D-scenen. Vi vil legge til 3D-objekter inn i den. Etter at vi skaper kameraet. Vi skal flytte den bakover og oppover litt. Ved å gjøre dette, vil vi kunne se kortene bedre når vi spiller spillet. Så får vi sentrere den. Til slutt lager vi visningen og sette den i midten av scenen

Trinn 11:. Opprette Table

I dette trinnet vil vi lage tabellen:
funksjon createGround () : void {var kube: Cube = new Cube ({width: 680, dybde: 400, høyde: 20, pushback: true, ownCanvas: true, material: ny BitmapMaterial (woodtexture)}) cube.y = -20 scene.addChild (kube)}

For å gjøre det ser mer realistisk at vi bruker en kube i stedet for a Plane. Det viktigste poenget her er å bruke pushback eiendommer i Cube å gjøre det synlig under kortene. Materialet vi bruker for Cube er BitmapMaterial. Dette er den beste måten å bruke bitmaps som teksturer

Trinn 12:. Opprette One Card

Først vil vi lage en holder. Det vil være to plan i denne holderen. En av disse flyene er forsiden av kortene og den andre er på baksiden. Vi vil bruke holderen til å rotere eller flytte kortene
funksjon createCard. (Tekstur: BitmapData, id: int): ObjectContainer3D {var kort: ObjectContainer3D = new ObjectContainer3D () Var front: Plane = new Plane ({width: cardwidth, høyde: cardheight, materiale: ny BitmapMaterial (tekstur, {glatt: true})}) Var tilbake: Plane = new Plane ({width: cardwidth, høyde: cardheight, materiale: ny BitmapMaterial (backtexture, {glatt: true} )}) front.rotationY = 180 back.rotationZ = 180 back.rotationY = 180 back.extra = {} back.extra.id = id back.extra.targetCard = kort back.addOnMouseDown (onBackClicked) card.rotationZ = 180 kort .addChild (foran) card.addChild (tilbake) card.ownCanvas = true retur kortet}

I denne funksjonen er vi gjenskape det som diagrammet viser. Vi bør bruke rotasjon for å plassere kortene med ansiktet ned. Vi er ikke å legge et arrangement til innehaveren, fordi vi bare klikk på baksiden forsiden av kortet. Av denne grunn legger vi en mousedown hendelse til baksiden Plane eneste.

Hver 3D objekt i Away3D kan ha ekstra variabler og hver farge i spillet vårt har en unik id. Vi vil legge til denne id variabelen til "ekstra" propertie av ryggen Plane. Vi vil bruke IDer for å sjekke om de valgte to kortene har samme farge eller ikke

Trinn 13:. Lage Alle kort

Etter kort funksjon for opprettelse, er vi klare til å lage alle av dem
funksjons initCards (): void {kort = new Array () for. (var i: int = 0, jeg < textures.length; i ++) {var card1: ObjectContainer3D = createCard (teksturer [i], jeg ) Var card2: ObjectContainer3D = createCard (teksturer [i], i) cards.push (card1) cards.push (card2)}}

Vi skyver alle våre kort til en kort array. Det vil være to kort av hver farge (to blå, to røde og to grønne). På grunn av dette lager vi to kort med samme farge og deretter presse dem til array

Trinn 14:. Tilfeldig kort

Neste trinn er å randomisere kortene rekke
funksjons randomizeCards (. ): void {var newArray: Array = new Array (); while (cards.length > 0) {newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); } Kort = newArray}

Det er så enkelt. Først skaper vi en ny array. Da er vi plukke en tilfeldig element fra kort array, presser det til det nye utvalget og fjerne den fra kort array. Etter at mens loop har avsluttet vi utjevne kort array til vår nye utvalget. Nå har vi en randomisert utvalg

Trinn 15:. Legge kort til Scene

Nå har vi randomisert kortene våre, slik at vi kan legge dem til åstedet. Vi vil bruke et rutenett system for sine posisjoner
funksjon addCardsToScene (): void {cardsholder = new ObjectContainer3D () Var currentindex: int = 0 for (var i: int = 0; i < 2; i ++) {for ( Var b: int = 0; b < 5; b ++) {kortene [currentindex] .x = b * (cardwidth + xoffset) + cardwidth /2 kort [currentindex] .z = i * (cardheight + yVerdi) + cardheight /2 cardsholder.addChild (kort [currentindex]) currentindex ++}} Var cardswidth: Number = (5 * cardwidth) + (4 * xoffset) Var cardsheight: Number = (2 * cardheight) + (1 * yVerdi) cardsholder.x = -cardswidth /2 cardsholder.z = -cardsheight /2 scene.addChild (cardsholder)}

Den første "for" loop er for x-aksen og den andre er for y-aksen. Vi legger kortene til en ny hoved holder, så når vi ønsker å rotere eller flytte kortene vi kan bare bruke hovedholderen. Da vi satt kortene ved hjelp av bæresystem. For at vi bruker cardwidth, cardheight, xoffset og yVerdi variabler. Kortene må være i midten av bordet. For å gjøre dette trenger vi å få bredde og høyde verdier av de viktigste kortene holder. Dette diagrammet viser hvordan vi får dem

Etter at vi får dem vi flytter hovedholderen inn i midten av bordet

Trinn 16:.. Mus ned Hendelses

Vi har lagt kortene på scenen. Vårt neste skritt vil være å skape den mousedown event funksjon
funksjon onBackClicked (e: Hendelses). {If (disableMouseEvents == false) {if (selectedCard1 == null) {selectedCard1 = e.currentTarget som Plane} else {if ( selectedCard2 == null) {selectedCard2 = e.currentTarget som Plane waitForDecision () disableMouseEvents = true}} Tweener.addTween (e.currentTarget.extra.targetCard, {y: 50, rotationZ: 0, tid: 1})}} < p> Først sjekker vi disableMouseEvents. Det betyr at hvis vi har tillatelse til å klikke kortene vi fortsette, men hvis vi ikke gjør det ingenting skjer. Hvis det første kortet ikke er valgt, klikket kortet er vår første kortet. Hvis første kortet er ikke null, så dette klikket kortet er vårt andre kort.

Våre spillet må du lage en desicion etter at vi velger de to kortene som om de er like eller ikke. Av denne grunn våre "waitForDecision" -funksjonen er i gang og vi setter disableMouseEvents å true. Så mens spillet venter på en avgjørelse, vil ingenting skje hvis vi klikker på et kort.

rotationZ tilhører våre kortet klikket vil være 180 grader med Tweener, så vi kan se fargen på kortet.

Trinn 17: Vent til en beslutning

Når de to kortene er valgt, venter spillet litt (dette er bare for moro skyld)
funksjon waitForDecision (). void {var tidtaker : Timer = new Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()}

Som du kan se, er dette en enkel Timer usege. Den venter 1000 miliseconds (1 sekund). Etter det, utløser Timerevent den makeDecision funksjonen til å kjøre

Trinn 18:. Ta en beslutning

Vi ventet 1 sekund så nå er det på tide å ta en beslutning. Hvis ID verdiene av kortene er de samme de vil forsvinne, hvis de ikke vil vende ansiktet ned igjen
funksjon makeDecision (e: Hendelses): void {if (selectedCard1.extra.id == selectedCard2.extra.id) { Tweener.addTween(selectedCard1.extra.targetCard,{alpha:0,time:0.2,onComplete:removeCard,onCompleteParams:[selectedCard1.extra.targetCard]}) Tweener.addTween(selectedCard2.extra.targetCard,{alpha:0,time:0.2,onComplete:removeCard,onCompleteParams:[selectedCard2.extra.targetCard]}) } else {Tweener.addTween (selectedCard1.extra.targetCard, {y: 0, rotationZ: 180, tid: 1}) Tweener.addTween (selectedCard2.extra.targetCard, {y: 0, rotationZ: 180, tid: 1} )} disableMouseEvents = false selectedCard1 = null selectedCard2 = null}

Vi gjør akkurat det i denne funksjonen. Vi sjekker de id verdiene av to utvalgte kort. Hvis de er like, vil alfa verdier av dem endre 0 med Tweener (vi gjøre dem forsvinne). Når dette tween er ferdig, blir removeCard funksjonen kalles. Parameteren av removeCard funksjon er kortene selv. Vi gjør dette for de to kortene samtidig. Hvis de ikke er det samme, vi sender dem til sine gamle posisjoner og gjøre dem med ansiktet ned. Uansett desicion er, selectedCard1 og selectedCard2 vil bli satt til null

Trinn 19:. Fjerne kort

Vi må fjerne de to kortene fra våre viktigste kort holderen når de forsvinner, fordi vi don 't trenger dem lenger
funksjon removeCard (e: ObjectContainer3D):. void {cardsholder.removeChild (e) totalchildren-- if (totalchildren == 0) {trace ("vinne")}}

Etter at de er kastet ut av scenen, verdien av totalchildren reduseres en etter en. Når den når 0 betyr dette at du har vunnet spillet

Trinn 20:!. Rende

Det siste trinnet er å skrive en loop funksjon å gjengi Away3D i runtime
funksjon startToRender ( ): void {addEventListener (Event.ENTER_FRAME, render); } funksjon render (e: Hendelses): void {view.render ();}
Trinn 21: Ring alle funksjoner

Vi er klare til å ringe alle de funksjonene vi har written.
initAway3D()createGround()initCards()randomizeCards()addCardsToScene()startToRender()

Now teste det og spille spillet ditt :)

Konklusjon

I denne leksjonen vi lærte å legge variabler og mouseEvents å Away3D stedene. Med disse ferdighetene vi laget et spill, og som du kan se det var ikke så vanskelig :)

Jeg håper du likte denne opplæringen, takk for lesing!