Share
In questo tutorial, imparerai come creare la tua versione del classico gioco Whack-a-Mole - solo che le nostre sfortunate creature scelte saranno vermi. Sarai in grado di modificare la velocità del gioco e le scatole di successo dei vermi.
Useremo in particolare classi comuni di ActionScript 3 Eventi del mouse per creare un divertente Colpisci una talpa come il gioco in 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.
(Nota: c'è un errore nell'immagine qui sopra, la larghezza e l'altezza sono nella direzione sbagliata! Grazie a Roel Traa per indicarlo.)
Verrà utilizzata un'interfaccia semplice e intuitiva, con diverse forme, pulsanti e MovieClip, per continuare con i passaggi successivi per creare questa GUI.
Seleziona il Strumento rettangolo (R) per creare un rettangolo 320x480px # CC9866, # BA7743 e centrarlo nello stage.
Utilizzare il Strumento di testo (T) per aggiungere un titolo usando il tuo font preferito. Puoi anche usare parte della grafica del gioco per renderlo più bello. L'immagine del worm utilizzata in questo tutorial è stata scaricata da qui sotto a Creative Commons Licenza.
Usa di nuovo il Strumento di testo per creare tre pulsanti come mostrato nell'immagine sopra. Convertili in pulsanti e dai loro nomi di istanze descrittivi per usarli facilmente più avanti nel codice. Converti la grafica in scena in un singolo Un filmato e nominalo TitleView, ricordati di controllare il Esporta per la casella ActionScript.
Cancella l'ultima vista tranne lo sfondo e crea una serie di Campi di testo dinamici come mostrato nell'immagine, dai loro nomi di istanza descrittivi e convertili in pulsanti. Utilizzare il Strumento rettangolo (R) per creare un pulsante freccia che verrà utilizzato per tornare al Schermata del titolo.
Il Titoli di coda schermo apparirà di fronte al Titolo Schermo, usa la grafica e i caratteri usati prima per crearlo. Nominalo CreditsView e ricorda di controllare il Esporta per ActionScript scatola.
La grafica semplice fumetto è usata nel Gioco Schermo, non c'è davvero una procedura per creare questa grafica, basta usare la tua immaginazione e gli strumenti di disegno di Flash per creare qualcosa come l'immagine sopra. Ogni buca nella schermata di gioco è a Un filmato che contiene un'animazione del verme che esce, è fondamentalmente una semplice animazione fotogramma per fotogramma, assicurati di controllare la sorgente per una migliore comprensione.
Verrà mostrato un avviso quando tutti i worm hanno mostrato, mostrerà il punteggio finale che hai raggiunto. Utilizzare il Strumento rettangolo per crearlo e aggiungere un nome descrittivo al campo di testo in basso, impostarne il nome dell'istanza AlertView e segnare il Esporta per ActionScript scatola.
Useremo un motore di interpolazione diverso da quello predefinito incluso nel flash, questo aumenterà le prestazioni oltre ad essere più facile da usare.
È possibile scaricare TweenNano dal suo sito Web ufficiale.
Useremo gli effetti sonori per migliorare la sensazione del gioco, puoi trovare il suono utilizzato in questo esempio in Soungle.com utilizzando la parola chiave colpire.
Renderemo interattiva la nostra applicazione utilizzando una classe esterna, aggiungendo il suo nome al file 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.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Expo;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro, alcuni dei loro nomi sono auto spieganti quindi non ci sarà alcun commento lì.
private var titleView: TitleView = new TitleView (); opzioni private var: OptionsView; crediti privati var: CreditsView; private var lastSelected: TextField; // l'ultima velocità selezionata nella schermata delle opzioni private var lastSelected2: TextField; // l'ultima area selezionata nella schermata delle opzioni private var hitSize: Number = 1; // La maschera della dimensione del colpo è in fondo scala all'inizio timer var privato: Timer = new Timer (1400); // ora predefinita per i worm che compaiono fori var privati: Vector.= nuovo vettore. (); // memorizza gli 8 fori nella fase private var currentWorms: int = 0; // i worm hanno già mostrato private var wormsHit: int = 0; private var totalWorms: String = '10'; // totale di worm da visualizzare
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 o viene eseguita usando la classe! Document.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione public final Main (): void addChild (titleView); holes.push (h1, h2, h3, h4, h5, h6, H7, H8); startButtonListeners ();
Inizieremo aggiungendo gli ascoltatori del mouse ai pulsanti nella vista del titolo, questo ci porterà alla schermata del gioco, delle opzioni o dei crediti.
funzione finale privata startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.addEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.optionsB.removeEventListener (MouseEvent.MOUSE_UP, addOptions); titleView.playB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Il Opzioni Lo schermo viene interpolato quando l'utente fa clic sul pulsante delle opzioni, un ascoltatore del mouse viene aggiunto al pulsante freccia per rimuoverlo quando viene eseguito.
funzione finale privata addOptions (e: MouseEvent): void options = new OptionsView (); addChild (opzioni); TweenNano.from (opzioni, 0.3, x: stage.stageWidth, onComplete: function (): void options.backBtn.addEventListener (MouseEvent.MOUSE_UP, hideOptions);); optionsListeners ();
Questi ascoltatori vengono aggiunti quando il Opzioni Schermata in figura, gestiscono i pulsanti sul palco. Più del suo comportamento nei prossimi passi.
private final function optionsListeners (action: String = 'add'): void if (action == 'add') options.slowBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.addEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.addEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.addEventListener (MouseEvent.MOUSE_UP, selectHitArea);
Le opzioni predefinite sono impostate da queste linee, impostano i pulsanti attualmente selezionati che sono lenti e grandi.
lastSelected = options.slowBtn.slowTF; lastSelected2 = options.bigBtn.bigTF;
Un parametro determinerà se gli ascoltatori vengono aggiunti o rimossi, le righe successive vengono eseguite se quel parametro non indica di aggiungere gli ascoltatori.
else options.slowBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.mediumBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.fastBtn.removeEventListener (MouseEvent.MOUSE_UP, changeSpeed); options.smallBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.mediumBtn1.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea); options.bigBtn.removeEventListener (MouseEvent.MOUSE_UP, selectHitArea);
Il pulsante freccia rimuoverà il Opzioni schermo quando si fa clic.
funzione finale privata hideOptions (e: MouseEvent): void TweenNano.to (opzioni, 0.3, x: stage.stageWidth, onComplete: function (): void options.removeEventListener (MouseEvent.MOUSE_UP, hideOptions); removeChild (opzioni) ; options = null;);
Questa funzione viene eseguita quando vengono premuti i pulsanti di velocità, la prima parte modifica il colore del testo dei pulsanti, cambia l'opzione corrente in bianco e il nuovo valore selezionato in giallo.
funzione finale privata changeSpeed (e: MouseEvent): void / * Cambia destinazione e ultimo colore selezionato * / lastSelected.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966;
Questa è la seconda parte della funzione di velocità, rileva il pulsante cliccato controllandone il nome e aumenta / diminuisce il Timer di conseguenza.
if (e.target.name == 'slowTF') timer = new Timer (1400); lastSelected = e.target as TextField; else if (e.target.name == 'mediumTF') timer = new Timer (1100); lastSelected = e.target as TextField; else if (e.target.name == 'fastTF') timer = new Timer (800); lastSelected = e.target as TextField;
La funzione successiva viene eseguita quando si fa clic su un pulsante nella selezione dell'area attiva. Si comporta allo stesso modo dell'ultima funzione.
funzione finale privata selectHitArea (e: MouseEvent): void / * Cambia obiettivo e ultimo colore selezionato * / lastSelected2.textColor = 0xFFFFFF; e.target.textColor = 0xFF9966; / * Rileva il pulsante cliccato e modifica di conseguenza l'area di successo * / if (e.target.name == 'smallTF') hitSize = 0; lastSelected2 = e.target as TextField; else if (e.target.name == 'mediumTF') hitSize = 0.5; lastSelected2 = e.target as TextField; else if (e.target.name == 'bigTF') hitSize = 1; lastSelected2 = e.target as TextField;
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.optionsB.visible = false; titleView.creditsB.visible = false; titleView.playB.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.creditsB.visible = true; titleView.playB.visible = true; titleView.optionsB.visible = true; credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
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é 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 cosa può causare.
Le seguenti righe rimuovono il Titolo schermo e lascia il Gioco Schermo visibile. Chiama anche una funzione per preparare il gioco da giocare.
Accentsconagua
funzione finale privata showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nullo;); prepareWorms (); Usiamo una dichiarazione for qui per aggiungere a Listener del mouse ad ogni buca Un filmato nel palco Questo renderà i Worm cliccabili.
funzione finale privata prepareWorms (): void for (var i: int = 0; i < 8; i++) /* Add Mouse Listeners */ holes[i].addEventListener(MouseEvent.MOUSE_DOWN, wormHit);
Come il buco Un filmato ha più di un frame, deve essere fermato per impedire che tutti i worm si mostrino allo stesso tempo.
/ * Stop Worms al frame 1 * / holes [i] .gotoAndStop (1); startTimer ();
Questo timer inizierà il conto alla rovescia e farà comparire a Worms casualmente nello stage.
funzione finale privata startTimer (): void timer.addEventListener (TimerEvent.TIMER, showWorm); timer.start ();
Questo codice controlla se i worm mostrati non hanno ancora superato il limite e chiama un Mettere in guardia se è vero.
funzione finale privata showWorm (e: TimerEvent): void if (currentWorms == int (totalWorms)) alert (); else var randomHole: int = Math.floor (Math.random () * 8); // Usato per calcolare quale worm apparirà
L'area di impatto selezionata in Opzioni lo schermo sarà cambiato qui su ogni worm usando le proprietà di scala di AS3.
holes [randomHole] .addFrameScript (1, function () holes [randomHole] .worm.hArea.scaleX = hitSize; holes [randomHole] .worm.hArea.scaleY = hitSize;);
Passeranno alcuni millisecondi dove il worm sarà visibile, quando il MovieClip ha raggiunto l'ultimo frame si fermerà e tornerà al primo frame.
holes [randomHole] .addFrameScript (holes [randomHole] .totalFrames - 1, function () holes [randomHole] .gotoAndStop (1);); fori [randomHole] .play (); currentWorms ++;
Questa funzione gestisce quando viene cliccato un worm, fondamentalmente riproduce un suono, aumenta il punteggio e nasconde nuovamente il worm.
funzione finale privata wormHit (e: MouseEvent): void if (e.target.name == 'hArea' || e.target.name == 'worm') var hit: Hit = new Hit (); hit.play (); wormsHit ++; e.target.parent.gotoAndPlay (18); scoreTF.text = wormsHit + '/' + totalWorms;
Puoi aggiungere un bonus personalizzato se tutti i worm vengono colpiti cambiando le prossime linee di codice.
if (totalWorms == String (wormsit)) alert ();
Questa funzione interrompe il gioco e rivela il punteggio finale, inoltre aggiunge un ascoltatore del mouse per reimpostare il gioco quando viene cliccato.
avviso funzione finale privata (): void timer.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); addChild (allarme); TweenNano.from (alert, 0.6, scaleX: 0.2, scaleY: 0.2, facilità: Expo.easeOut);
La prossima funzione ricaricherà swf, riavvia qualsiasi variabile, metodo e ritornerà al Schermata del titolo.
riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Come puoi vedere, molte variabili / parametri di gioco possono essere modificati e adattati alle tue esigenze. Prova a creare la tua versione del gioco!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
