Crea un gioco Popping Balloon in Flash

Uno dei giochi Flash più popolari di sempre è Bloons, in cui si gioca a una scimmia che lancia delle freccette per far scoppiare i palloncini. Ha generato numerosi sequel, anche ramificandosi in altri generi come la difesa della torre. Questo tutorial ti mostrerà come creare il tuo gioco di popping con il pallone, usando il motore QuickBox2D.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Fare clic e tenere premuto per determinare l'angolo del tiro. Prova a far scoppiare tutti i palloncini!


Passaggio 1: breve panoramica

In questo tutorial utilizzeremo una serie di classi ActionScript per creare un gioco Bloons Inspired. L'obiettivo del gioco è sparare ai palloncini per farli scoppiare tutti.


Passaggio 2: Impostazioni documento Flash

Apri Flash e crea un documento di 480 pixel di larghezza e 320 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.


Passaggio 3: interfaccia

Verrà utilizzata un'interfaccia colorata e semplice, con diverse forme, pulsanti e clip. Nei prossimi pochi passi costruiremo questa GUI. La grafica di scoiattolo e ghianda proviene da openclipart.org.


Passaggio 4: sfondo

Questo sfondo è stato creato in Flash utilizzando forme rettangolari e ovali semplici. La barra marrone nella parte inferiore fungerà da barra informazioni.


Passaggio 5: titolo e palloncini

Per creare il titolo, seleziona lo strumento testo (T) e cambia il colore in #EEEEEE; scrivi il tuo testo del titolo (ho usato il font GoodDog) e aggiungi una semplice ombra esterna. Per il fumetto, seleziona lo strumento Ovale (O) e crea un ovale FFCE47 # 20x30 px. Usa lo strumento Poly Star per il piccolo triangolo sottostante.


Passaggio 6: pulsanti

Usa di nuovo il Strumento di testo per creare due pulsanti come mostrato nell'immagine sopra. Convertili in pulsanti e fornisci loro nomi di istanze descrittivi, in modo che possiamo usarli facilmente più avanti nel codice. Converti la grafica sul palco in un singolo Un filmato e nominalo TitleView - ricordati di controllare il Esporta per la casella ActionScript.


Passaggio 7: schermata di gioco

Questa è la schermata di gioco, che contiene tutti gli elementi dinamici e interattivi del gioco. Più di essi verranno generati in fase di runtime utilizzando ActionScript. Puoi leggere i nomi delle istanze nell'immagine sopra.


Passaggio 8: schermata dei crediti

Il Titoli di coda schermo apparirà di fronte al Titolo schermo; usa la grafica e i caratteri di prima per crearlo. Nominalo CreditsView e ricorda di controllare il Esporta per ActionScript scatola.


Passaggio 9: avviso

Un allarme verrà mostrato quando tutti i palloncini sono stati spuntati; mostrerà un gioco sul messaggio e il punteggio. Utilizzare il Strumento rettangolo per crearlo e impostarne il nome istanza AlertView. Ancora una volta, segna il Esporta per ActionScript scatola.


Passaggio 10: suoni

Useremo effetti sonori per migliorare la sensazione del gioco; è possibile trovare il suono utilizzato in questo esempio in Soungle.com utilizzando la parola chiave pop.


Passaggio 11: TweenNano

Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni oltre ad essere più facile da usare.

È possibile scaricare TweenNano dal suo sito Web ufficiale.


Passaggio 12: QuickBox 2D

Useremo l'utile libreria fisica QuickBox2D per creare questo gioco. Se non lo conosci, puoi seguire la serie introduttiva da Activetuts+.

Puoi scaricare QuickBox2D dal suo sito ufficiale.


Passaggio 13: impostare la classe del documento


Renderemo interattiva la nostra applicazione utilizzando una classe esterna. Aggiungi il suo nome al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.


Passaggio 14: creare una nuova classe ActionScript


Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.


Step 15: Struttura della classe

Crea la tua struttura di base per iniziare a scrivere il tuo codice.

 pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code

Passaggio 16: Classi richieste

Queste sono le classi che dovremo importare affinché la nostra classe funzioni; il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.

 import flash.display.MovieClip; import com.actionsnippet.qbox. *; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import Box2D.Common.Math. *; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest;

Passaggio 17: variabili

Queste sono le variabili che useremo. Leggi i commenti nel codice per saperne di più su di loro; alcuni dei loro nomi sono auto esplicativi quindi non ci sarà alcun commento lì.

 private var titleView: TitleView = new TitleView (); crediti privati ​​var: CreditsView; mondo privato var: QuickBox2D; private var ghianda: QuickObject; private var ghiande: Array = []; // memorizza le ghiande lanciate da contatti var privati: QuickContacts; // usato per gestire le collisioni nei palloni var private quickbox2d: Array = []; // memorizza i palloncini in stage private var yImpulse: Number = 0; // forza verticale per sparare alla ghianda private var xImpulse: int = 3; // forza orizzontale predefinita la ghianda viene generata pop var privato: Pop = new Pop (); // il suono nella libreria

Passaggio 18: costruttore

Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto. Il costruttore della classe di documenti è un caso speciale: viene eseguito all'inizio del gioco.

Usiamo questo per chiamare le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.

 funzione pubblica finale Main (): void // Code

Passaggio 19: Aggiungi vista titolo

Iniziamo aggiungendo il TitleView dalla Libreria allo stage.

 addChild (titleView); startButtonListeners ();

Passaggio 20: avviare i pulsanti ascoltatori

Questo aggiungerà gli ascoltatori del mouse ai pulsanti nella vista del titolo, che ci porterà alla schermata del gioco o dei crediti.

 funzione finale privata startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView);  else titleView.creditsBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.playBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView); 

Passaggio 21: Mostra crediti

Il Titoli di coda la schermata viene visualizzata quando l'utente fa clic sul pulsante Crediti. Un ascoltatore del mouse viene aggiunto al completo Un filmato rimuoverlo.

 funzione finale privata showCredits (e: MouseEvent): void titleView.creditsBtn.visible = false; titleView.playBtn.visible = false; credits = new CreditsView (); addChild (crediti); TweenNano.from (crediti, 0.3, x: -credits.width, onComplete: function (): void credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits);); 

Passaggio 22: Nascondi crediti

Quando il Titoli di coda viene cliccato sullo schermo, verrà interrotto e rimosso dallo stage.

 funzione finale privata hideCredits (e: MouseEvent): void TweenNano.to (crediti, 0.3, x: -credits.width, onComplete: function (): void titleView.creditsBtn.visible = true; titleView.playBtn.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;); 

Passaggio 23: Mostra vista gioco

Le seguenti righe rimuovono il Titolo schermo e lasciare il Gioco Schermo visibile. Qui chiamiamo anche le funzioni necessarie per iniziare il gioco; quelle funzioni sono spiegate nei prossimi passi.

 funzione finale privata showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = null; startGame ();); 

Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice di gioco funzioni:

Tieni presente che alcune righe sono state commentate perché alcune funzioni non sono ancora state create.

Ricorda che le Milestones sono incluse nei file sorgente, quindi se per qualche motivo il tuo file non imita questo, dai un'occhiata alla fonte per vedere che cosa sta causando.


Passaggio 24: ascoltatori di giochi

Questa funzione aggiunge gli ascoltatori del mouse necessari per eseguire la ripresa ghianda.

 private final function gameListeners (action: String = 'add'): void if (action == 'add') bg.addEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.addEventListener (MouseEvent.MOUSE_UP, shot); restartBtn.addEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.addEventListener (Event.ENTER_FRAME, update);  else bg.removeEventListener (MouseEvent.MOUSE_DOWN, startCharge); bg.removeEventListener (MouseEvent.MOUSE_UP, girato); restartBtn.removeEventListener (MouseEvent.MOUSE_UP, restartLvl); stage.removeEventListener (Event.ENTER_FRAME, update); 

Passo 25: Inizia partita

Qui iniziamo il gioco creando il mondo di Box2D e chiamando le funzioni che creeranno i palloncini e gestiranno gli eventi del mouse.

 funzione finale privata startGame (): void / * Nascondi gCircle * / gCircle.visible = false; / * Nuovo mondo B2D * / world = new QuickBox2D (this, debug: 0); contacts = world.addContactListener (); contacts.addEventListener (QuickContacts.ADD, onAdd); / * Crea funzione fumetto * / gameListeners (); createBalloons (); 

Passaggio 26: Crea palloncini

Nidificato per i loop vengono utilizzati per posizionare i palloncini sul palco. Questa funzione utilizzerà QuickBox2D addBox metodo per creare un nuovo oggetto Box2D che verrà impostato come Sensore - questo significa che non ci sarà alcuna reazione fisica alla collisione (cioè la ghianda non rimbalzerà su di essa), ma una collisione sarà ancora rilevata. Usando questo metodo possiamo distruggere il palloncino ma lasciare che la ghianda prosegua come se nulla fosse accaduto.

Il fumetto viene quindi aggiunto a un array; questo ci garantirà l'accesso a tutti i palloncini all'esterno di questa funzione.

 funzione finale privata createBalloons (h: int = 5, v: int = 3): void for (var i: int = 0; i < h; i++)  for(var j:int = 0; j < v; j++)  var balloon:QuickObject = world.addBox(x:10 + (i * 0.66), y:4 + (j * 1), width: 0.66, height: 1, skin:Balloon, fixedRotation:true, draggable:false, density:0); balloon.shape.m_isSensor = true; balloons.push(balloon);   /* Set balloon counter */ targetTF.text = String(balloons.length); /* Start Physics */ world.start(); 

Certo, non devi usare nidificato per anelli per posizionare i palloncini; questo è il modo più semplice per posizionarli in una griglia, ma puoi posizionarli manualmente se preferisci.


Passaggio 27: rilevamento collisione

Questa funzione gestisce la collisione menzionata al punto 26. La prima cosa da fare è passare attraverso l'array di palloncini, controllando ciascuno per vedere se si scontrano con la ghianda.

 funzione finale privata onAdd (e: Event): void for (var i: int = 0; i < balloons.length; i++)  if(contacts.isCurrentContact(balloons[i], acorn)) 

Passo 28: distruggi palloncino

Se la collisione è vera, chiamiamo il distruggere() metodo del fumetto QuickObject e rimuovere l'elemento dall'array.

 palloncini [i] .destroy (); balloons.splice (i, 1);

Passaggio 29: Riproduci suono

Quindi riproduciamo un suono che indica il colpo, migliorando la sensazione di gioco.

 pop.play ();

Passaggio 30: punteggio di aggiornamento e contatori obiettivo

I segnalini punteggio e bersaglio vengono aggiornati in base ai palloni spuntati e ai palloncini rimasti.

 scoreTF.text = String (int (scoreTF.text) + 50); targetTF.text = String (balloons.length);

Passaggio 31: verifica il completamento del livello

Viene chiamato un avviso quando vengono estratti tutti i palloncini; vedremo questa funzione più avanti nel tutorial.

 if (targetTF.text == '0') alert (); 

Passo 32: Carica iniziale

Questo codice rivelerà l'indicatore di direzione della ghianda, ripristinerà la variabile dell'impulso y della ghianda e aggiungerà un listener enterframe che gestirà l'obiettivo.

 funzione finale privata startCharge (e: MouseEvent): void yImpulse = 0; gCircle.visible = true; gCircle.addEventListener (Event.ENTER_FRAME, addebito); 

Passaggio 33: addebito

L'indicatore di mira ruota per mostrare la direzione in cui la ghianda sarà sparata e regola di conseguenza la variabile dell'impulso y. La direzione dello sparo è influenzata da due variabili, xImpulse e yImpulse, che sono combinati per formare un impulso vettore dopo. xImpulse rimane costante, e yImpulse viene modificato mentre l'utente tiene premuto il pulsante del mouse.

 carica della funzione finale privata (e: Event): void gCircle.rotation - = 3; yImpulse - = 0,2; / * Previene la rotazione eccessiva * / se (gCircle.rotation < -80)  yImpulse = -5.4; gCircle.rotation = -80;  

Step 34: Shot

Le seguenti azioni si verificano quando il pulsante del mouse è attivo.

 private final function shot (e: MouseEvent): void / * Nascondi gCircle * / gCircle.removeEventListener (Event.ENTER_FRAME, charge); gCircle.visible = false; gCircle.rotation = 0; / * Crea un nuovo Acorn * / acorn = world.addBox (x: 2,76, y: 7,33, larghezza: 0,66, altezza: 0,53, skin: Acorn, fixedRotation: true, draggable: false, density: 1); acorns.push (ghianda); / * Spara ghianda * / var impulso: b2Vec2 = nuovo b2Vec2 (xImpulse, yImpulse); acorn.body.ApplyImpulse (impulso, acorn.body.GetWorldCenter ()); / * Update Acorn counter * / acornsTF.text = String (int (acornsTF.text) -1); 

Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice di gioco funzioni:

Tieni presente che alcune righe sono state commentate poiché tali funzioni non sono ancora state create.


Passaggio 35: funzione di aggiornamento

La funzione di aggiornamento eseguirà una serie di operazioni EnterFrame. Vediamo quelle azioni nei seguenti passaggi.

 aggiornamento della funzione finale privata (e: Event): void 

Passaggio 36: rimuovere le ghiande fuori scena

Le righe successive rimuoveranno ogni ghianda che esce dal palco.

 / * Rimuovi le ghiande fuori scena * / per (var i: int = 0; i < acorns.length; i++)  if(acorns[i].y > 10.66) ghiande [i] .destroy (); acorns.splice (i, 1);

Passaggio 37: verifica del livello non riuscito

Il gioco termina quando il giocatore finisce le ghiande (o distrugge tutti i palloncini come menzionato prima).

 / * Verifica il livello non riuscito * / if (int (acornsTF.text) <= 0)  alert('lose');    

Passaggio 38: Livello di riavvio

Questo codice viene eseguito quando si fa clic sul pulsante Riavvia. Ripristina le variabili e gli ascoltatori necessari per riavviare il livello.

 private final function restartLvl (e: MouseEvent): void / * Remove Listeners * / gameListeners ('rmv'); / * Destroy World * / world = null; / * Distruggi i palloncini, azzera il punteggio e le ghiande * / per (var i: int = 0; i < balloons.length; i++)  balloons[i].destroy(); scoreTF.text = '0'; acornsTF.text = '5';  balloons = [];//clear balloons array startGame(); 

Passaggio 39: avviso

Questa funzione interromperà il gioco e mostrerà il messaggio Game Over. Aggiunge anche un ascoltatore del mouse per ripristinare il gioco quando si fa clic.

 avviso di funzione finale privata (gameState: String = 'win'): void gameListeners ('rmv'); world.stop (); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text; alert.addEventListener (MouseEvent.MOUSE_UP, restart); if (gameState == 'lose') alert.titleTF.text = 'Livello fallito!';  addChild (avviso); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, facilità: Expo.easeOut); 

Passaggio 40: riavvio

Questo codice ricaricherà il SWF, ripristinando i valori e ritornando alla schermata iniziale.

 riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0'); 

Conclusione

Crea le tue modifiche al gioco e divertiti a crearlo. Forse potresti cambiare il layout dei palloncini o aggiungere nuovi livelli o modificare la grafica.

Spero che questo tutorial ti sia piaciuto, grazie per la lettura!