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.
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!
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.
Apri Flash e crea un documento di 480 pixel di larghezza e 320 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
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.
Questo sfondo è stato creato in Flash utilizzando forme rettangolari e ovali semplici. La barra marrone nella parte inferiore fungerà da barra informazioni.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di 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
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;
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
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
Iniziamo aggiungendo il TitleView dalla Libreria allo stage.
addChild (titleView); startButtonListeners ();
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);
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););
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;);
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.
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);
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 ();
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.
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))
Se la collisione è vera, chiamiamo il distruggere()
metodo del fumetto QuickObject e rimuovere l'elemento dall'array.
palloncini [i] .destroy (); balloons.splice (i, 1);
Quindi riproduciamo un suono che indica il colpo, migliorando la sensazione di gioco.
pop.play ();
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);
Viene chiamato un avviso quando vengono estratti tutti i palloncini; vedremo questa funzione più avanti nel tutorial.
if (targetTF.text == '0') alert ();
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);
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;
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.
La funzione di aggiornamento eseguirà una serie di operazioni EnterFrame. Vediamo quelle azioni nei seguenti passaggi.
aggiornamento della funzione finale privata (e: Event): void
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);
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');
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();
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);
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');
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!