În acest tutorial vom construi un joc de memorie 3D. De-a lungul drumului ne vom uita la adăugarea de variabile și mouseEvents la obiecte Away3D. Să începem…
Pasul 1: fișier ActionScript
Creați un nou fișier ActionScript 3.0.
Pasul 2: Editați profilul
În panoul Proprietăți, apăsați butonul Editare.
Pasul 3: Alegeți versiunea Flash Player
Alegeți profilul Flash Player 9 și faceți clic pe OK.
Pasul 4: Obțineți motorul Away3D!
Salvați fișierul ca "Memory Game.fla" în dosarul Tutorial joc de memorie. Descărcați acum motorul Away3D de la Descărcări Away3D. Vom utiliza versiunea 2.3.3 pentru Flash Player 9. Despachetați arhiva și copiați toate folderele în dosarul Tutorial pentru jocurile de memorie.
Pasul 5: Obțineți Tweener!
Descărcați Tweener de aici. Despachetați fișierele de clasă în dosarul Tutorial pentru jocul de memorie, astfel încât toate acestea să arate astfel:
Pasul 6: Importați texturi
Vom folosi 5 cărți diferite pentru acest joc (le puteți găsi în fișierele sursă). Importați-le în Flash accesând File> Import> Import to Library.
Pasul 7: Exportați texturi pentru ActionScript
Pentru a folosi aceste texturi în timpul rulării trebuie să le atașăm un nume de clasă. Selectați imaginile una câte una și faceți clic dreapta> Proprietăți> Exportare pentru ActionScript. Doar eliminați părțile ".png" ale numelor acestora.
Pasul 8: Începeți codarea
După toate acestea, suntem gata să începem codarea. Să umplem primele linii importând clasele:
După importarea claselor noastre, trebuie să definim variabilele noastre pentru a le utiliza în următorii pași.
Var scena: Scene3D; camera var: Camera3D; var vizual: View3D; (0,0), noua textură1 (0,0), textură nouă2 (0,0), textură nouă3 (0,0), textură nouă4 (0,0)] var backtexture: BitmapData = textureback nou (0,0) var woodtexture: BitmapData = texturewood (0,0) var cardwidth: Number = : Number = 10 varholderholder: ObjectContainer3D var selectatCard1: Plane var selectCard2: Plane var disableMouseEvents: Boolean = false
Matricea texturilor păstrează imaginile noastre de textură. Pentru a atașa imaginile de la bibliotecă la scenă, folosim această metodă: var imagineData: BitmapData = BibliotecaLinkygeName (0,0). Folosim aceeasi abordare pentru tabelul si masa din fata a cartilor. xoffset și yoffset definesc distanța dintre carduri.
Pasul 10: Configurarea Away3D
Mai întâi de toate trebuie să construim Away3D.
funcția initAway3D (): void scene = nou Scene3D (); camera = nou Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (new Number3D (0,0,0)) view = nou View3D (scena: camera, camera); view.x = stage.stageWidth / 2 view.y = etapa.stageHeight / 2 addChild (vizualizare);
prima linie din funcția noastră creează scena 3D. Vom adăuga obiecte 3D în el. După aceea, creăm camera. O vom muta înapoi și în sus un pic. Procedând astfel, vom putea vedea cărțile mai bine când jucăm jocul. Atunci o vom centra. În cele din urmă, creăm vizualizarea și o setăm în mijlocul scenei.
Pasul 11: Crearea mesei
În acest pas vom crea masa:
funcția createGround (): void var cube: Cube = nou Cub (lățime: 680, adâncime: 400, înălțime: 20; 20 scene.addChild (cub)
Pentru a face să pară mai realist, folosim un Cube în loc de un plan. Cel mai important lucru aici este să folosiți proprietăți de împingere în Cube pentru a le face vizibile sub carduri. Materialul pe care îl folosim pentru Cube este BitmapMaterial. Aceasta este cea mai bună modalitate de a folosi bitmap-urile ca texturi.
Pasul 12: Crearea unei cărți
Mai întâi vom crea un deținător. În acest suport vor fi două avioane. Una dintre aceste avioane este fața frontală a cardurilor, iar cealaltă este partea din spate. Vom folosi suportul pentru a roti sau a muta cartelele.
(format: BitmapData, id: int): ObjectContainer3D var carte: ObjectContainer3D = new ObjectContainer3D () var: true var: spate = plan nou (lățime: cardwidth, height: cardheight, material: new BitmapMaterial (backtexture, smooth: true) front.rotationY = 180 back.rotationZ = 180 back.rotationY = 180 back.extra = back.extra.id = id back.extra.targetCard = card back.addOnMouseDown (onBackClicked) card.rotationZ = 180 card.addChild (din față) card.addChild (înapoi) card.ownCanvas = true carte de întoarcere
În această funcție, recreăm ce ilustrează diagrama. Ar trebui să folosim rotația pentru a plasa cărțile cu fața în jos. Nu adăugăm un eveniment titularului, deoarece facem clic doar pe fața din spate a cardului. Din acest motiv, adăugăm un eveniment mouseDown numai în planul din spate.
Fiecare obiect 3D din Away3D poate avea variabile suplimentare și fiecare culoare din jocul nostru are un id unic. Vom adăuga această variabilă id la caracterul "extra" al planului din spate. Vom folosi id-urile pentru a verifica dacă cele două cărți selectate sunt de aceeași culoare sau nu.
Pasul 13: Crearea tuturor cardurilor
După crearea funcției de creare a cărților, suntem gata să le creăm pe toți.
funcția initCards (): void cards = array nou () pentru (var i: int = 0; i
Ne vom împinge toate cărțile la o matrice de cărți. Vor fi două cărți pentru fiecare culoare (două albastre, două roșii și două verde). Din acest motiv creăm două cărți cu aceeași culoare, apoi le împingem spre matrice.
Pasul 14: Carduri de Randomizare
Următorul pas este de a randomiza matricea cardurilor.
funcția randomizeCards (): void var newArray: Array = Array nou (); în timp ce (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); cards = newArray
Totul este atât de simplu. Mai întâi vom crea o nouă matrice. Apoi, alegem un element aleatoriu din matricea cardurilor, împingându-l la matricea nouă și eliminându-l din matricea cardurilor. După terminarea ciclului de timp, vom egaliza matricea cardurilor la noua noastră matrice. Acum avem o matrice randomizată.
Pasul 15: Adăugarea de carduri la scenă
Acum, ne-am randomizat cardurile, astfel încât să le putem adăuga la scenă. Vom folosi un sistem de rețea pentru pozițiile lor
funcția addCardsToScene (): void cardsholder = nou ObjectContainer3D () var currentindex: int = 0 pentru (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)
Prima buclă "pentru" este pentru axa x, iar cea de-a doua pentru axa y. Adăugăm cărți la un nou titular principal, așa că atunci când dorim să rotim sau să mutăm cardurile, putem folosi doar titularul principal. Apoi am stabilit cardurile folosind sistemul de rețea. Pentru aceasta, folosim variabilele cardwidth, cardheight, xoffset și yoffset. Cardurile trebuie să fie în mijlocul mesei. Pentru a face acest lucru trebuie să obțineți valorile de lățime și înălțime ale suportului principal al cartelei. Această diagramă arată modul în care le primim.
După ce le luăm, mutăm suportul principal în mijlocul mesei.
Pasul 16: Mouse Down Event
Am adăugat cărți la scenă. Următorul pas va fi crearea funcției eveniment mouseDown.
funcția onBackClicked (e: Eveniment) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget as Plane altceva if (selectedCard2 == null) selectedCard2 = e.currentTarget as Plane waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotationZ: 0, timp: 1)
Mai întâi verificăm disableMouseEvents. Asta înseamnă că dacă avem permisiunea de a face clic pe cărți vom continua, dar dacă nu se întâmplă nimic. Dacă prima carte nu este selectată, cartela este prima noastră carte. Dacă prima carte nu este nulă, atunci această carte este a doua carte.
Jocul nostru trebuie să facă un desicion după ce am selectat cele două cărți ca să fie aceleași sau nu. Din acest motiv funcția "waitForDecision" funcționează și am setat disableMouseEvents la true. Deci, în timp ce jocul așteaptă o decizie, nimic nu se va întâmpla dacă faceți clic pe un card.
Proprietatea rotationZ a cărții noastre clicate va fi de 180 de grade cu Tweener, pentru a vedea culoarea cardului.
Pasul 17: Așteptați o decizie
Când cele două cărți sunt selectate, jocul așteaptă un pic (acesta este doar pentru distracție).
funcția de așteptareForDecision (): void var timer: Timer = nou Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
După cum puteți vedea, aceasta este o simplă utilizare a temporizatorului. Se așteaptă 1000 milisecunde (1 secundă). După aceea, TimerEvent declanșează funcția makeDecision să ruleze.
Pasul 18: Luați o decizie
Am așteptat o secundă, deci acum este momentul să luăm o decizie. Dacă valorile id ale cardurilor sunt aceleași, ele vor dispărea, dacă nu se vor întoarce cu fața în jos
Facem exact asta în această funcție. Verificam valorile id ale cartilor selectate. Dacă ele sunt identice, valorile alfa ale acestora se vor schimba cu Tweener (le vom face să dispară). Când această completare este terminată, se va apela funcția removeCard. Parametrul funcției removeCard este cartea însăși. Facem asta la cele două cărți în același timp. Dacă nu sunt la fel, îi trimitem la vechile lor poziții și le facem cu fața în jos. Indiferent de desicion, selectatCard1 și selectatCard2 va fi setat la null.
Pasul 19: Înlăturarea cardurilor
Trebuie să scoatem cele două cărți de la suportul principal al cardurilor atunci când dispare, pentru că nu mai avem nevoie de ele.
funcția removeCard (e: ObjectContainer3D): void cardsholder.removeChild (e) totalchildren-- dacă (totalchildren == 0) trace ("WIN")
După ce sunt scoase din scenă, valoarea totală a copiilor scade unul câte unul. Când atinge 0, înseamnă că ai câștigat jocul!
Pasul 20: Realizarea
Ultimul pas este de a scrie o funcție de buclă pentru a face Away3D în timpul rulării.
funcția startToRender (): void addEventListener (Event.ENTER_FRAME, render); funcția rendere (e: Event): void view.render ();
Pasul 21: Apelați toate funcțiile
Suntem gata să sunăm toate funcțiile pe care le-am scris.
În această lecție am învățat cum să adăugăm variabilele și mouseEvents către obiectele Away3D. Cu aceste abilități am făcut un joc și după cum puteți vedea că nu a fost așa de greu :)
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Share
Accentsconagua
