I denne opplæringen bygger vi et 3D-minne spill. Underveis ser vi på å legge til variabler og mouseEvents til Away3D objekter. La oss komme i gang…
Trinn 1: ActionScript-fil
Opprett en ny ActionScript 3.0-fil.
Trinn 2: Rediger profil
Trykk på Edit-knappen i Egenskaper-panelet.
Trinn 3: Velg Flash Player Version
Velg Flash Player 9-profilen og klikk OK.
Trinn 4: Få Away3D-motoren!
Lagre filen som "Memory Game.fla" i Memory Game Tutorial-mappen. Last ned nå Away3D-motoren fra Away3D-nedlastinger. Vi bruker versjon 2.3.3 for Flash Player 9. Pakke arkivet og kopier alle mapper til Memory Game Tutorial-mappen.
Trinn 5: Få Tweener!
Last ned Tweener herfra. Pakke ut klassefilene til din Memory Game Tutorial-mappe slik at alt ser slik ut:
Trinn 6: Importer teksturer
Vi bruker 5 forskjellige kort for dette spillet (du finner dem i kildefilene). Importer dem til Flash ved å gå Fil> Import> Importer til bibliotek.
Trinn 7: Eksporter teksturer til ActionScript
For å bruke disse teksturer i runtime må vi legge ved et klassenavn til dem. Velg bildene en etter en og gå Høyreklikk> Egenskaper> Eksporter for ActionScript. Bare fjern ".png" deler av navnene sine.
Trinn 8: Start koding
Tross alt er vi klar til å starte kodingen. La oss fylle våre første linjer ved å importere klassene:
Etter at vi importerte våre klasser, bør vi definere våre variabler for å bruke i de følgende trinnene.
var scene: Scene3D; Var kamera: Camera3D; var visning: View3D; var totalbarn: int = 10 var kort: Array var teksturer: Array = [ny tekstur0 (0,0), ny tekstur1 (0,0), ny tekstur2 (0,0), ny tekstur3 (0,0), ny tekstur4 (0,0)] var baktekst: BitmapData = ny tekstur (0,0) var tretekst: BitmapData = ny teksturved (0,0) var kortbredde: Nummer = 110 var korthøyde: Tall = 150 var xoffset: Tall = 10 var uavgjort : Nummer = 10 var kortholder: ObjectContainer3D var valgtCard1: Plane var valgtCard2: Plane var deaktivereMouseEvents: Boolean = false
Teksturfeltet inneholder våre teksturbilder. For å feste bilder til vår scene fra biblioteket bruker vi denne metoden: var imageData: BitmapData = LibraryLinkageName (0,0). Vi bruker samme tilnærming til bordet og baksiden av kortene. xoffset og yoffset definerer avstanden mellom kortene.
Den første linjen i vår funksjon skaper 3D-scenen. Vi legger til 3D-objekter i den. Deretter lager vi kameraet. Vi beveger den bakover og oppover litt. Ved å gjøre dette kan vi se kortene bedre når vi spiller spillet. Da setter vi det sent. Til slutt lager vi Vis og setter den midt på scenen.
Trinn 11: Opprette bordet
I dette trinnet lager vi tabellen:
funksjonen createGround (): void var kube: Cube = new Cube (bredde: 680, dybde: 400, høyde: 20, pushback: true, ownCanvas: true, material: new BitmapMaterial (woodtexture)) cube.y = - 20 scene.addChild (kube)
For å gjøre det ser mer realistisk ut, bruker vi en kube istedenfor et fly. Det viktigste poenget her er å bruke pushback-egenskaper i Cube for å gjøre det synlig under kortene. Materialet vi bruker til Cube er BitmapMaterial. Dette er den beste måten å bruke bitmaps på som teksturer.
Trinn 12: Opprette ett kort
Først skal vi opprette en holder. Det vil være to fly i denne holderen. En av disse flyene er forsiden av kortene, og den andre er baksiden. Vi bruker holderen til å rotere eller flytte kortene.
Funksjon createCard (tekstur: BitmapData, id: int): ObjectContainer3D var-kort: ObjectContainer3D = nytt ObjectContainer3D () var foran: Plane = nytt Plane (bredde: kortbredde, høyde: korthøyde, materiale: nytt BitmapMaterial true)) var tilbake: Plane = nytt plan (bredde: kortbredde, høyde: kardelhøyde, materiale: nytt BitmapMaterial (baktekst, glatt: sant)) 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 card.addChild (front) card.addChild (tilbake) card.ownCanvas = true returkort
I denne funksjonen gjenskaper vi hva diagrammet illustrerer. Vi bør bruke rotasjon for å plassere kortene med forsiden ned. Vi legger ikke til en hendelse for holderen, fordi vi bare klikker på baksiden av kortet. Av denne grunn legger vi til en mouseDown-begivenhet kun i det bakre flyet.
Hvert 3D-objekt i Away3D kan ha ekstra variabler, og hver farge i spillet vårt har et unikt id. Vi legger til denne ID-variabelen til "ekstra" egenskapen til bakplanet. Vi bruker ids for å sjekke om de valgte to kortene har samme farge eller ikke.
Trinn 13: Opprette alle kort
Etter kortopprettingsfunksjonen er vi klare til å lage dem alle.
funksjon initCards (): void cards = new Array () for (var i: int = 0; i
Vi vil skyve alle kortene våre til en kortmatrise. Det vil være to kort i hver farge (to blå, to røde og to grønne). På grunn av dette oppretter vi to kort med samme farge og skyver dem til matrisen.
Trinn 14: Randomize Cards
Neste trinn er å randomisere kortene.
funksjon randomizeCards (): void var newArray: Array = new Array (); mens (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); kort = newArray
Det er så enkelt. Først oppretter vi et nytt utvalg. Da plukker vi et tilfeldig element fra kortmatrisen, trykker den til den nye gruppen og fjerner den fra kortmatrise. Etter at rundingen er ferdig utligner vi kortene til vårt nye utvalg. Nå har vi en randomisert gruppe.
Trinn 15: Legge til kort i scenen
Nå har vi randomisert kortene våre, så vi kan legge dem til scenen. Vi bruker et rutenett for deres 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++) 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)
Den første "for" -løkken er for x-aksen, og den andre er for y-aksen. Vi legger til kort i en ny hovedholder, så når vi vil rotere eller flytte kortene, kan vi bare bruke hovedholderen. Deretter setter vi kortene ved hjelp av rutenettet. For det bruker vi kortbredde, korthøyde, xoffset og yoffset-variabler. Kortene må være midt på bordet. For å gjøre dette må vi få bredde og høydeverdier for hovedkortholderen. Dette diagrammet viser hvordan vi får dem.
Når vi får dem flytter vi hovedholderen inn i midten av bordet.
Trinn 16: Mus Down Event
Vi har lagt til kort på scenen. Vårt neste skritt vil skape mouseDown-hendelsesfunksjonen.
Funksjon onBackClicked (e: Event) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget as Plane ellers if (selectedCard2 == null) selectedCard2 = e.currentTarget as Plane waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotasjonZ: 0, tid: 1)
Først sjekker vi deaktivereMouseEvents. Det betyr at hvis vi har tillatelse til å klikke kort fortsetter vi, men hvis vi ikke gjør noe, skjer det. Hvis det første kortet ikke er valgt, klikket kort er vårt første kort. Hvis første kort ikke er null, er dette klikkte kortet vårt andre kort.
Vårt spill må gjøre et ønske etter at vi velger de to kortene om de er like eller ikke. Av denne grunn kjører vår "waitForDecision" -funksjon, og vi stiller disableMouseEvents til ekte. Så mens spillet venter på en beslutning, skjer ingenting hvis vi klikker et kort.
RotasjonZ-egenskapen til vårt klikkede kort vil være 180 grader med Tweener, slik at vi kan se fargen på kortet.
Trinn 17: Vent på en beslutning
Når de to kortene er valgt, venter spillet litt (dette er bare for moro skyld).
funksjon waitForDecision (): void var timer: Timer = ny Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Som du kan se, er dette et enkelt Timer-usege. Den venter 1000 milisekunder (1 sekund). Etter det utløser TimerEvent makeDecision-funksjonen for å kjøre.
Trinn 18: Ta en beslutning
Vi ventet 1 sekund, så nå er det på tide å ta en beslutning. Hvis id-verdiene på kortene er de samme, vil de forsvinne, hvis ikke, vil de vende ansiktet ned igjen
Vi gjør akkurat det i denne funksjonen. Vi sjekker id-verdiene for to valgte kort. Hvis de er like, vil alfaverdiene av dem endres 0 med Tweener (vi får dem til å forsvinne). Når denne tween er ferdig, kalles funksjonen removeCard. Parameteren for removeCard-funksjonen er kortene selv. Vi gjør dette til de to kortene samtidig. Hvis de ikke er det samme, sender vi dem til sine gamle stillinger og gjør dem med forsiden ned. Uansett desicion er valgtCard1 og selectedCard2 satt til null.
Trinn 19: Fjerne kort
Vi må fjerne de to kortene fra vår hovedkortholder når de forsvinner, fordi vi ikke trenger dem lenger.
funksjon removeCard (e: ObjectContainer3D): void cardsholder.removeChild (e) totalbarn - hvis (totalt barn == 0) trace ("WIN")
Etter at de er sparket ut av scenen, reduseres verdien av totalbarn en etter en. Når det når 0, betyr dette at du har vunnet spillet!
Trinn 20: Rendering
Det siste trinnet er å skrive en loop-funksjon for å gjengi Away3D i runtime.
I denne leksjonen lærte vi å legge til variabler og mouseEvents til Away3D-objekter. Med disse ferdighetene lagde vi et spill og som du kan se var det ikke så vanskelig :)
Jeg håper du likte denne opplæringen, takk for å lese!
Share
Accentsconagua
