I denna handledning bygger vi ett 3D-minnesspel. Längs vägen ser vi på att lägga till variabler och mouseEvents till Away3D-objekt. Låt oss börja…
Steg 1: ActionScript-fil
Skapa en ny ActionScript 3.0-fil.
Steg 2: Ändra profil
På fliken Egenskaper trycker du på knappen Redigera.
Steg 3: Välj Flash Player Version
Välj Flash Player 9-profilen och klicka på OK.
Steg 4: Få Away3D-motorn!
Spara filen som "Memory Game.fla" i mapphanteringsmappen. Ladda ner nu Away3D-motorn från Away3D-nedladdningar. Vi använder version 2.3.3 för Flash Player 9. Packa upp arkivet och kopiera alla mappar i Memory Game Tutorial-mappen.
Steg 5: Hämta Tweener!
Hämta Tweener härifrån. Packa upp klassfilerna till din Memory Game Tutorial-mapp så att allt ser ut så här:
Steg 6: Importera texturer
Vi använder 5 olika kort för detta spel (du hittar dem i källfilerna). Importera dem till Flash genom att gå Arkiv> Importera> Importera till bibliotek.
Steg 7: Exportera texturer till ActionScript
För att använda dessa texturer i körtid måste vi bifoga ett klassnamn till dem. Välj bilderna en efter en och gå till högerklicka> Egenskaper> Exportera till ActionScript. Ta bara bort ".png" delarna av deras namn.
Steg 8: Starta kodning
När allt kommer omkring är vi redo att börja kodning. Låt oss fylla våra första rader genom att importera klasserna:
Efter att ha importerat våra klasser bör vi definiera våra variabler att använda i följande steg.
var scen: Scene3D; var kamera: Camera3D; Var View: View3D; var totalbarn: int = 10 var kort: Array var texturer: Array = [ny textur0 (0,0), ny textur1 (0,0), ny textur2 (0,0), ny textur3 (0,0), ny textur4 (0,0)] Var baktextur: BitmapData = Ny textur (0,0) Var trätextur: BitmapData = Ny texturträ (0,0) Var kortbredd: Nummer = 110 Var korthöjd: Antal = 150 var xoffset: Antal = 10 var : Nummer = 10 var kortinnehavare: ObjektContainer3D var valdCard1: Plan var valdCard2: Plan var avaktiveraMouseEvents: Booleskt = falskt
Textureringsramen rymmer våra texturbilder. För att bifoga bilder till vårt stadium från biblioteket använder vi den här metoden: var imageData: BitmapData = LibraryLinkageName (0,0). Vi använder samma tillvägagångssätt för vårt bord och baksida på korten. xoffset och yoffset definierar avståndet mellan kort.
Steg 10: Inställning Away3D
Först av allt behöver vi bygga Away3D.
funktion initAway3D (): void scene = new Scene3D (); kamera = ny Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (new Number3D (0,0,0)) view = new View3D (scen: scen, kamera: kamera); view.x = stage.stageWidth / 2 view.y = stage.stageHeight / 2 addChild (visa);
Den första raden i vår funktion skapar 3D-scenen. Vi lägger till 3D-objekt i den. Därefter skapar vi kameran. Vi flyttar det bakåt och uppåt lite. Genom att göra detta kan vi se kort bättre när vi spelar spelet. Då ska vi centrera det. Slutligen skapar vi vyn och ställer den in i mitten av scenen.
Steg 11: Skapa bordet
I detta steg skapar vi tabellen:
Funktion createGround (): void var kub: Kub = ny kub (bredd: 680, djup: 400, höjd: 20, pushback: true, ownCanvas: true, material: new BitmapMaterial (woodtexture)) cube.y = - 20 scen.addChild (kub)
För att göra det ser mer realistiskt ut använder vi en kub istället för ett plan. Den viktigaste punkten här är att använda pushback-egenskaper i Cube för att göra den synlig under korten. Materialet som vi använder för Cube är BitmapMaterial. Det här är det bästa sättet att använda bitmappar som texturer.
Steg 12: Skapa ett kort
Först ska vi skapa en innehavare. Det kommer att finnas två plan i den här innehavaren. En av dessa plan är kortets framsida och den andra är baksidan. Vi använder hållaren för att rotera eller flytta korten.
Funktion createCard (textur: BitmapData, id: int): ObjectContainer3D var-kort: ObjectContainer3D = nytt ObjectContainer3D () var framåt: Plane = nytt plan (bredd: kortbredd, höjd: korthöjd, material: nytt BitmapMaterial true)) var tillbaka: Plane = nytt plan (bredd: kortbredd, höjd: korthöjd, material: nytt BitmapMaterial (baktextur, smidig: 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 (back) card.ownCanvas = true returkort
I denna funktion återskapar vi vad diagrammet illustrerar. Vi bör använda rotationen för att placera korten nedåt. Vi lägger inte till en händelse för innehavaren, för vi klickar bara på baksidan av kortet. Av denna anledning lägger vi till en mouseDown-händelse endast i det bakre planet.
Varje 3D-objekt i Away3D kan ha extra variabler och varje färg i vårt spel har ett unikt id. Vi lägger till den här id-variabeln till "extra" -egenskapen i backplanet. Vi använder ids för att kontrollera om de valda två korten har samma färg eller inte.
Steg 13: Skapa alla kort
Efter kortskapningsfunktionen är vi redo att skapa dem alla.
funktion initCards (): void cards = new Array () för (var i: int = 0; i
Vi skjuter alla våra kort till en kortmatris. Det kommer att finnas två kort i varje färg (två blå, två röda och två gröna). På grund av detta skapar vi två kort med samma färg och trycker sedan på dem i matrisen.
Steg 14: Randomize Cards
Nästa steg är att randomisera kortmatrisen.
funktion randomizeCards (): void var newArray: Array = new Array (); medan (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); kort = newArray
Det är så enkelt. Först skapar vi en ny uppsättning. Då väljer vi ett slumpmässigt objekt från kortmatrisen, skjuter det till den nya matrisen och tar bort det från kortmatrisen. Efter att slingan har slutförts utjämnar vi kortmatrisen till vår nya array. Nu har vi en randomiserad grupp.
Steg 15: Lägga till kort i scenen
Nu har vi randomiserat våra kort, så vi kan lägga till dem på scenen. Vi använder ett rutnät för sina positioner
funktion addCardsToScene (): void cardsholder = new 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)
Den första "för" -loopen är för x-axeln och den andra är för y-axeln. Vi lägger till kort i en ny huvudhållare, så när vi vill rotera eller flytta korten kan vi bara använda huvudhållaren. Sedan ställer vi in korten med hjälp av nätsystemet. För det använder vi kortbredd, korthöjd, xoffset och yoffset variabler. Korten måste vara mitt i tabellen. För att göra detta måste vi få bredd och höjdvärden för huvudkorthållaren. Detta diagram visar hur vi får dem.
När vi får dem flyttar vi huvudhållaren in i mitten av bordet.
Steg 16: Mus ner händelse
Vi har lagt till kort på scenen. Vårt nästa steg kommer att skapa funktionsfunktionen mouseDown.
funktionen påBackClicked (e: Event) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget as Plane annat om (selectedCard2 == null) selectedCard2 = e.currentTarget som Plane waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotationZ: 0, tid: 1)
Först kontrollerar vi avaktiveraMouseEvents. Det betyder att om vi har tillstånd att klicka på kort fortsätter vi men om vi inte gör något händer. Om det första kortet inte är valt, är det korta kortet vårt första kort. Om första kortet inte är null är det här klickade kortet vårt andra kort.
Vårt spel måste göra ett mål efter vi väljer de två korten om de är lika eller inte. Därför körs vår "waitForDecision" -funktion och vi ställer in disableMouseEvents till true. Så medan spelet väntar på ett beslut kommer ingenting att hända om vi klickar på ett kort.
RotationsZ-egenskapen hos vårt klickade kort kommer att vara 180 grader med Tweener, så vi kan se kortets färg.
Steg 17: Vänta på ett beslut
När de två korten väljs, väntar spelet lite (det här är bara för skojs skull).
funktion waitForDecision (): void var timer: Timer = ny Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Som du kan se är det här en enkel Timer-användare. Det väntar 1000 milisekunder (1 sekund). Därefter utlöser TimerEvent funktionen makeDecision att köra.
Steg 18: fatta ett beslut
Vi väntade 1 sekund så nu är det dags att fatta ett beslut. Om kortens ID-värden är desamma kommer de att försvinna, om inte de kommer att vända sig nedåt igen
Vi gör precis det i den här funktionen. Vi kontrollerar ID-värdena för två valda kort. Om de är samma, ändras alfavärdena av dem 0 med Tweener (vi får dem att försvinna). När denna tween är färdig kallas funktionen removeCard. Parametern för removeCard-funktionen är korten själva. Vi gör det till de två korten samtidigt. Om de inte är desamma skickar vi dem till sina gamla positioner och gör dem vända neråt. Vad som helst, är valdCard1 och valdCard2 inställd till null.
Steg 19: Ta bort kort
Vi måste ta bort de två korten från vår huvudkorthållare när de försvinner, för att vi inte behöver dem längre.
I den här lektionen lärde vi oss hur man lägger till variabler och mouseEvents till Away3D-objekt. Med dessa färdigheter gjorde vi ett spel och som du kan se var det inte så svårt :)
Jag hoppas att du gillade den här handledningen, tack för att du läste!
Share
Accentsconagua
