In questo tutorial costruiremo un gioco di memoria 3D. Lungo la strada vedremo l'aggiunta di variabili e mouseEvents agli oggetti Away3D. Iniziamo…
Passaggio 1: file ActionScript
Crea un nuovo file ActionScript 3.0.
Passaggio 2: Modifica profilo
Nel pannello Proprietà premi il pulsante Modifica.
Passaggio 3: scegli la versione di Flash Player
Scegli il profilo di Flash Player 9 e fai clic su OK.
Passaggio 4: Ottieni il motore Away3D!
Salva il tuo file come "Memory Game.fla" nella cartella Tutorial del gioco di memoria. Ora scarica il motore Away3D da Away3D Downloads. Useremo la versione 2.3.3 per Flash Player 9. Disimballare l'archivio e copiare tutte le cartelle nella cartella Tutorial del gioco di memoria.
Passaggio 5: Ottieni il tweener!
Scarica Tweener da qui. Disimballare i file di classe nella cartella Tutorial di Memory Game in modo che assomigli a questo:
Passaggio 6: Importa trame
Useremo 5 carte diverse per questo gioco (puoi trovarle nei file sorgente). Importali in Flash andando su File> Importa> Importa nella libreria.
Passaggio 7: Esporta trame per ActionScript
Per utilizzare queste trame in runtime, è necessario associare loro un nome di classe. Seleziona le immagini una per una e vai con il tasto destro del mouse> Proprietà> Esporta per ActionScript. Basta rimuovere le parti ".png" dei loro nomi.
Passaggio 8: avviare la codifica
Dopotutto, siamo pronti per iniziare a programmare. Completiamo le nostre prime righe importando le classi:
Dopo aver importato le nostre classi dovremmo definire le nostre variabili da utilizzare nei seguenti passaggi.
scena var: Scene3D; var camera: Camera3D; var view: View3D; var totalchildren: int = 10 carte var: Array var textures: Array = [nuova texture0 (0,0), nuova texture1 (0,0), nuova texture2 (0,0), nuova texture3 (0,0), nuova trama4 (0,0)] var backtexture: BitmapData = new textureback (0,0) var woodtexture: BitmapData = new texturewood (0,0) var cardwidth: Number = 110 var cardheight: Number = 150 var xoffset: Number = 10 var yoffset : Number = 10 var cardsholder: ObjectContainer3D var selectedCard1: Plane var selectedCard2: Plane var disableMouseEvents: Boolean = false
L'array di trame contiene le nostre immagini di texture. Per allegare immagini al nostro palco dalla biblioteca, utilizziamo questo metodo: var imageData: BitmapData = LibraryLinkageName (0,0). Usiamo lo stesso approccio per il nostro tavolo e il retro delle carte. xoffset e yoffset definiscono la distanza tra le carte.
Passaggio 10: installazione Away3D
Prima di tutto abbiamo bisogno di costruire Away3D.
function initAway3D (): void scene = new Scene3D (); camera = new Camera3D (); camera.y = 700 camera.z = 500 camera.lookAt (nuovo Number3D (0,0,0)) view = new View3D (scene: scene, camera: camera); view.x = stage.stageWidth / 2 view.y = stage.stageHeight / 2 addChild (vista);
la prima riga nella nostra funzione crea la scena 3D. Aggiungeremo oggetti 3D in esso. Dopodiché creiamo la camera. Lo sposteremo un po 'indietro e verso l'alto. In questo modo, saremo in grado di vedere meglio le carte quando giochiamo. Quindi lo centreremo. Alla fine creiamo la vista e la posizioniamo nel mezzo della scena.
Passaggio 11: creazione della tabella
In questo passaggio creeremo la tabella:
function createGround (): void var cube: Cube = new Cube (width: 680, depth: 400, height: 20, pushback: true, ownCanvas: true, material: new BitmapMaterial (woodtexture)) cube.y = - 20 scene.addChild (cube)
Per renderlo più realistico usiamo un cubo invece di un aereo. Il punto più importante qui è usare le proprietà di pushback in Cube per renderlo visibile sotto le carte. Il materiale che utilizziamo per Cube è BitmapMaterial. Questo è il modo migliore per usare bitmap come texture.
Passaggio 12: creazione di una scheda
Per prima cosa creeremo un titolare. Ci saranno due aerei in questo supporto. Uno di questi piani è la faccia anteriore delle carte e l'altra è la parte posteriore. Useremo il supporto per ruotare o spostare le carte.
function createCard (texture: BitmapData, id: int): ObjectContainer3D var card: ObjectContainer3D = new ObjectContainer3D () var front: Plane = new Plane (width: cardwidth, height: cardheight, material: new BitmapMaterial (texture, smooth: true)) var indietro: Plane = new Plane (width: 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 (front) card.addChild (back) card.ownCanvas = true carta di ritorno
In questa funzione stiamo ricreando ciò che illustra il diagramma. Dovremmo usare la rotazione per posizionare le carte a faccia in giù. Non stiamo aggiungendo un evento al titolare, perché facciamo solo clic sulla faccia posteriore della carta. Per questo motivo aggiungiamo un evento mouseDown solo al piano posteriore.
Ogni oggetto 3D in Away3D può avere variabili extra e ogni colore nel nostro gioco ha un ID univoco. Aggiungeremo questa variabile id alla proprietà "extra" del piano posteriore. Useremo id per verificare se le due carte selezionate sono dello stesso colore o meno.
Passaggio 13: creazione di tutte le schede
Dopo la funzione di creazione delle carte, siamo pronti a crearle tutte.
function initCards (): void cards = new Array () per (var i: int = 0; i
Spingeremo tutte le nostre carte su un array di carte. Ci saranno due carte di ogni colore (due blu, due rosse e due verdi). Per questo motivo creiamo due carte con lo stesso colore e poi li spingiamo all'array.
Step 14: Randomize Cards
Il prossimo passo è quello di randomizzare l'array di carte.
function randomizeCards (): void var newArray: Array = new Array (); while (cards.length> 0) newArray.push (cards.splice (Math.floor (Math.random () * cards.length), 1) [0]); cards = newArray
È tutto così semplice. Per prima cosa stiamo creando un nuovo array. Quindi preleviamo un oggetto casuale dall'array delle carte, spingendolo nel nuovo array e rimuovendolo dall'array delle carte. Dopo che il ciclo while è terminato, equalizziamo l'array di carte al nostro nuovo array. Ora abbiamo un array randomizzato.
Passaggio 15: aggiunta di schede alla scena
Ora, abbiamo randomizzato le nostre carte, quindi possiamo aggiungerle alla scena. Useremo un sistema a griglia per le loro posizioni
function addCardsToScene (): void cardsholder = new ObjectContainer3D () var currentindex: int = 0 per (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)
Il primo ciclo "for" è per l'asse x e il secondo è per l'asse y. Stiamo aggiungendo le carte a un nuovo titolare principale, quindi quando vogliamo ruotare o spostare le carte possiamo usare solo il titolare principale. Quindi impostiamo le carte usando il sistema di griglia. Per questo stiamo usando le variabili di ampiezza di card, cardheight, xoffset e yoffset. Le carte devono essere nel mezzo del tavolo. Per fare ciò abbiamo bisogno di ottenere i valori di larghezza e altezza del titolare della carta principale. Questo diagramma mostra il modo in cui li stiamo ottenendo.
Dopo averli portati, spostiamo il supporto principale nel centro del tavolo.
Passaggio 16: evento Mouse Down
Abbiamo aggiunto le carte alla scena. Il prossimo passo sarà la creazione della funzione evento mouseDown.
function onBackClicked (e: Event) if (disableMouseEvents == false) if (selectedCard1 == null) selectedCard1 = e.currentTarget as Plane else if (selectedCard2 == null) selectedCard2 = e.currentTarget as Piano waitForDecision () disableMouseEvents = true Tweener.addTween (e.currentTarget.extra.targetCard, y: 50, rotationZ: 0, time: 1)
Per prima cosa controlliamo disableMouseEvents. Ciò significa che se abbiamo il permesso di fare clic su carte continuiamo, ma se non lo facciamo non succede nulla. Se la prima carta non è selezionata, la carta cliccata è la nostra prima carta. Se la prima carta non è nulla, questa carta cliccata è la nostra seconda carta.
Il nostro gioco deve fare una scelta dopo aver selezionato le due carte sul fatto che siano uguali o meno. Per questo motivo la nostra funzione "waitForDecision" è in esecuzione e impostiamo disableMouseEvents su true. Quindi, mentre il gioco è in attesa di una decisione, non accadrà nulla se clicchiamo su una carta.
La proprietà rotationZ della nostra carta cliccata sarà di 180 gradi con Tweener, quindi possiamo vedere il colore della carta.
Passaggio 17: attendere una decisione
Quando le due carte sono selezionate, il gioco attende un po '(questo è solo per divertimento).
function waitForDecision (): void var timer: Timer = new Timer (1000,1) timer.addEventListener (TimerEvent.TIMER, makeDecision) timer.start ()
Come puoi vedere, questo è un semplice uso del timer. Aspetta 1000 millisecondi (1 secondo). Successivamente, TimerEvent attiva la funzione makeDecision per l'esecuzione.
Passaggio 18: prendere una decisione
Abbiamo aspettato 1 secondo quindi ora è il momento di prendere una decisione. Se i valori di identificazione delle carte sono gli stessi, scompariranno, altrimenti non gireranno a faccia in giù
Lo stiamo facendo esattamente in questa funzione. Stiamo controllando i valori ID di due carte selezionate. Se sono uguali, i valori alfa di essi cambieranno 0 con Tweener (li facciamo scomparire). Al termine di questa interpolazione, viene richiamata la funzione removeCard. Il parametro della funzione removeCard sono le carte stesse. Facciamo questo alle due carte allo stesso tempo. Se non sono uguali, li inviamo alle loro vecchie posizioni e li facciamo a faccia in giù. Qualunque sia la richiesta, la carta selezionata1 e la carta selezionata2 saranno impostate su null.
Passaggio 19: rimozione delle carte
Abbiamo bisogno di rimuovere le due carte dal nostro portacarte principale quando scompaiono, perché non ne abbiamo più bisogno.
function removeCard (e: ObjectContainer3D): void cardsholder.removeChild (e) totalchildren-- if (totalchildren == 0) trace ("WIN")
Dopo essere stati cacciati dalla scena, il valore dei bambini totali diminuisce uno per uno. Quando raggiunge 0 significa che hai vinto la partita!
Passaggio 20: Rendering
Il passo finale è scrivere una funzione di loop per eseguire il rendering di Away3D in runtime.
function startToRender (): void addEventListener (Event.ENTER_FRAME, render); function render (e: Event): void view.render ();
Passaggio 21: chiama tutte le funzioni
Siamo pronti a chiamare tutte le funzioni che abbiamo scritto.
In questa lezione abbiamo imparato come aggiungere variabili e mouseEvents agli oggetti Away3D. Con queste abilità abbiamo fatto un gioco e come puoi vedere non è stato così difficile :)
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Share
Accentsconagua
