Share
Dai un'occhiata a questo Tutorial Premium per creare un puzzle game divertente, ispirato a Frenzic, usando Flash e ActionScript 3.
Nella demo sopra, riempire le caselle esterne con quadrati colorati. Ottieni più punti per riempire una scatola con quadrati dello stesso colore.
Usando gli strumenti di disegno di Flash creeremo un'interfaccia grafica di bell'aspetto che sarà alimentata da diverse classi ActionScript 3.
Il giocatore sarà in grado di fare clic su quattro diverse posizioni per ordinare i blocchi di colore sui quadrati, più punti si guadagnano se si riempie un quadrato con un colore a blocco singolo.
Apri Flash e crea un documento di 320 pixel di larghezza e 480 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
Verrà visualizzata un'interfaccia colorata dall'aspetto piacevole, che comprende più forme, pulsanti, suoni e altro ancora.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Seleziona lo strumento Rettangolo (R) per creare un rettangolo 320x480px # 0D6191, # 001217 e centrarlo nello stage. Usa lo stesso strumento per creare una linea nera 2x480px con il 20% di alpha, premi CMD + D per duplicarla più volte e allarga le linee per ottenere l'effetto nell'immagine sopra.
Seleziona lo strumento Testo (T), seleziona un font bello e scrivi il titolo del gioco. Ho usato questo formato: Orbitron Bold, 60pt, # A3FF24. È possibile aggiungere un semplice filtro glow per renderlo migliore.
Usa la stessa tecnica per creare due pulsanti, allinearli al centro e nominarli startB e creditsB. Converti tutto in a Un filmato e stabilirne il nome TitleView; segnare il Esporta per ActionScript box ed elimina la clip dal palco.
Questo sarà il GameView. Aggiungi lo sfondo MC sul palco e creare due Campi di testo dinamici e posizionali come mostrato nell'immagine. Dai un nome ai campi di testo livesTF e scoreTF.
Utilizzare il Strumento rettangolo (R) per creare un quadrato 70x70px e riempirlo usando il gradiente di sfondo, convertirlo in MC e premere CMD + D per duplicarlo in modo da avere cinque in totale. Usa il pannello Allinea per posizionarli come mostrato nell'immagine.
I nomi delle istanze devono corrispondere alle loro posizioni, ovvero: Su giù sinistra destra e il centro sarà mainHolder.
Utilizza la stessa tecnica utilizzata nell'ultimo passaggio per creare tre blocchi 30x30 px, convertirli in MC e nominarli in base al colore: OrangeBlock, PurpleBlock e GreenBlock. Non dimenticare di segnare il Esporta per ActionScript scatola.
Un avviso verrà mostrato quando perdi tutte le vite e mostrerà il punteggio finale che hai raggiunto. Utilizzare il Strumento primitivo rettangolo per crearlo e riempirlo con questa sfumatura lineare: da # 000000 a # 333333. Imposta il nome dell'istanza su AlertView e segnare il Esporta per ActionScript scatola.
Questa schermata sarà facile da realizzare dato che abbiamo già tutta la grafica. Imposta il nome dell'istanza su CreditsView e segnare il Esporta per ActionScript scatola.
Useremo un motore di interpolazione diverso dal predefinito incluso nel flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare Tween Nano dal suo sito Web ufficiale.
Useremo gli effetti sonori per migliorare la sensazione del gioco, puoi trovare i suoni usati in questo esempio in Soungle.com usando le parole chiave campana e ronzio. Aggiungili alla tua biblioteca, con i nomi delle classi di campana, Bell4, e ronzio, rispettivamente.
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.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Bounce; import flash.utils.Timer; import flash.events.TimerEvent; import flash.net.navigateToURL; import flash.net.URLRequest;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro, alcuni dei loro nomi sono autoesplicativi quindi non ci sarà alcun commento lì.
private var titleView: TitleView = new TitleView (); crediti privati var: CreditsView; private var blockColor: Vector.= nuovo vettore. (); // Memorizza i colori disponibili, usati per creare nuove istanze di blocchi private var: Vector. = nuovo vettore. (); // Memorizzerà tutti i blocchi sullo schermo per accedervi in qualsiasi momento var posizioni private: Vector. = nuovo vettore. (); // Contiene i possibili blocchi posizioni private var currentXPosition: int; private var currentYPosition: int; private var eventTarget: Object; // Utilizzato per accedere alla destinazione dell'evento della funzione place private var timer: Timer = new Timer (3000); // Avrai 3 secondi per posizionare il blocco nel centro privato var var .: int = 5; punteggio var privato: int = 0; campana var privata: Bell = new Bell (); private var bell4: Bell4 = new Bell4 (); private var buzz: Buzz = new Buzz ();
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 (quando nella Document Class) il primo ad essere eseguito quando il progetto carica.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica finale Main (): void // code?
Inizieremo aggiungendo il TitleView al palcoscenico; se non lo facciamo la prima schermata mostrata sarà la GameView.
addChild (titleView);
Il blockColor vector è usato per creare una nuova istanza del blocco selezionato; i parametri sono i blocchi che abbiamo creato nei passaggi precedenti.
Il posizioni il vettore memorizza il possibile X e y posizioni che possono avere un blocco; mescolando questo ci darà la posizione finale relativa al mainHolder MC.
Accentsconagua
blockColor.push ('orange', 'green', 'purple'); positions.push (5, 35); startButtonListeners (); In questa funzione aggiungiamo gli ascoltatori del mouse ai pulsanti nella vista titolo. Questi ci porteranno alla schermata di gioco o alla schermata dei crediti.
funzione finale privata startButtonListeners (action = 'add'): void if (action == 'add') titleView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.creditsB.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startB.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
La schermata dei crediti viene visualizzata quando l'utente fa clic sul pulsante dei crediti, un ascoltatore del mouse viene aggiunto all'intero MC per rimuoverlo.
funzione finale privata showCredits (e: MouseEvent): void credits = new CreditsView (); addChild (crediti); TweenNano.from (crediti, 0.3, x: stage.stageWidth, onComplete: function (): void titleView.visible = false; credits.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Quando viene cliccato lo schermo dei crediti, verrà rimosso dal palco e rimosso.
funzione finale privata hideCredits (e: MouseEvent): void titleView.visible = true; TweenNano.to (crediti, 0.3, x: stage.stageWidth, onComplete: function (): void credits.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (credits); credits = null;);
Quando il Inizio viene premuto il pulsante, la vista del titolo viene interpolata e rimossa rivelando la vista di gioco.
funzione finale privata showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: function (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nullo; ); counter.gotoAndStop (1); addListeners (); Fermiamoci qui per fare un test rapido e assicurarci che il nostro commutatore dello schermo il codice funziona (prova prima i crediti per poter tornare indietro). Imposta la classe del documento del tuo FLA in Principale.
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.
Torna al codice e aggiungi la seguente funzione. Aggiungerà un listener di mouse ai quadrati in modo da poterli fare clic per posizionare il blocco corrente.
funzione finale privata addListeners (): void up.addEventListener (MouseEvent.MOUSE_UP, placeBlock); right.addEventListener (MouseEvent.MOUSE_UP, placeBlock); down.addEventListener (MouseEvent.MOUSE_UP, placeBlock); left.addEventListener (MouseEvent.MOUSE_UP, placeBlock);
Questi array sono creati all'interno dei MovieClip quadrati, sono usati per registrare blocchi, colori e posizioni all'interno di ogni quadrato.
Le lettere rappresentano le seguenti posizioni:
Continua il addListeners () funzione:
/ * Crea una matrice per ogni contenitore per determinare quando è piena e il colore dei blocchi * / up.blocks = []; right.blocks = []; down.blocks = []; left.blocks = []; / * Crea un valore booleano per ogni contenitore per evitare di posizionare blocchi nella stessa posizione * / su.a = falso; right.a = false; down.a = falso; left.a = false; up.b = falso; right.b = false; down.b = falso; left.b = falso; up.c = falso; right.c = false; down.c = false; left.c = false; up.d = falso; right.d = false; down.d = false; left.d = false; newBlock (true);
Questo codice seleziona un colore di blocco casuale dal vettore, questo verrà utilizzato per creare un'istanza del blocco effettivo. Un parametro viene utilizzato per determinare se il timer per iniziare il conteggio verrà attivato.
funzione finale privata newBlock (firstTime: Boolean = false): void / * New Block * / var randomBlock: int = Math.floor (Math.random () * 3); var block: Sprite; switch (blockColor [randomBlock]) case 'orange': block = new OrangeBlock (); rompere; case 'green': block = new GreenBlock (); rompere; case 'purple': block = new PurpleBlock (); rompere; default: trace ('BlockColor Error'); rompere; Dopo aver selezionato il colore del blocco, la posizione in cui verrà posizionata viene calcolata usando il posizioni Vector e poi aggiunto al vettore di blocchi e al palco. Continua il newBlock () funzione:
currentXPosition = posizioni [Math.floor (Math.random () * 2)]; currentYPosition = posizioni [Math.floor (Math.random () * 2)]; block.x = mainHolder.x + currentXPosition; block.y = mainHolder.y + currentYPosition; blocks.push (blocco); addChild (blocco);
Prima di continuare con il gioco, dobbiamo verificare che il blocco appena creato possa essere effettivamente inserito in un contenitore quadrato. Il seguente codice controlla ogni array di contenitori per assicurarsi che sia disponibile una posizione vuota in una delle caselle in cui è possibile posizionare il blocco; se non c'è, il blocco viene distrutto e la funzione viene richiamata per generarne un'altra.
/ * Cerca uno spazio disponibile per spostare il blocco * / var position: Array = [currentXPosition, currentYPosition]; if (String (position) == '5,5' && up.a && right.a && down.a && left.a) removeChild (block); block = null; newBlock (); else if (String (position) == '35, 5 '&& up.b && right.b && down.b && left.b) removeChild (block); block = null; newBlock (); else if (String (position) == '5,35' && up.c && right.c && down.c && left.c) removeChild (block); block = null; newBlock (); else if (String (position) == '35, 35 '&& up.d && right.d && down.d && left.d) removeChild (block); block = null; newBlock ();
Se hai utilizzato un layout diverso per il tuo gioco, assicurati di cambiare il valore che stai controllando (non lo è '35, 35', poiché i blocchi del tuo gioco non appariranno necessariamente in quel punto).
Il timer inizia il conteggio quando la funzione viene chiamata per la prima volta.
if (firstTime) / * Start Timer * / timer.addEventListener (TimerEvent.TIMER, timesUp); timer.start (); counter.play (); // termina la funzione newBlock ()
Tre secondi sono dati per mettere un blocco in un contenitore quadrato, se quel tempo passa e il blocco è ancora nel quadrato centrale, verrà rimossa una vita.
private final function timesUp (e: TimerEvent): void / * Rimuovi Live * / lives--; livesTF.text = String (lives); buzz.play ();
Dopo aver rimosso la vita, il blocco nel quadrato centrale verrà distrutto e verrà generato un nuovo blocco. Questo codice controlla anche se il giocatore ha esaurito le vite e chiama una funzione che scriveremo più tardi.
/ * Rimuovi blocco inutilizzato * / var i: int = blocks.length - 1; removeChild (blocchi [i]); blocchi [i] = null; blocks.splice (i, 1); / * Controlla se sono morti * / se (vive < 1) alert(); else /* Next Block */ newBlock();
Facciamo un'altra pausa per vedere come funziona il nostro codice a questo punto:
Questa funzione viene eseguita quando il giocatore fa clic su uno dei quadratini del contenitore. In pratica controlla se è disponibile la posizione corretta per posizionare il quadrato e posizionarlo se è vero. La funzione nel passaggio successivo viene chiamata quando viene inserito il blocco.
private final function placeBlock (e: MouseEvent): void var i: int = blocks.length - 1; eventTarget = e.target; / * Verifica se la posizione è disponibile * / var position: Array = [currentXPosition, currentYPosition]; if (String (position) == '5,5' &&! e.target.a) blocks [i] .x = e.target.x + position [0]; blocchi [i] .y = e.target.y + posizione [1]; e.target.a = true; blockPlaced (); else if (String (position) == '35, 5 '&&! e.target.b) blocks [i] .x = e.target.x + position [0]; blocchi [i] .y = e.target.y + posizione [1]; e.target.b = true; blockPlaced (); else if (String (position) == '5,35' &&! e.target.c) blocks [i] .x = e.target.x + position [0]; blocchi [i] .y = e.target.y + posizione [1]; e.target.c = true; blockPlaced (); else if (String (position) == '35, 35 '&&! e.target.d) blocks [i] .x = e.target.x + position [0]; blocchi [i] .y = e.target.y + posizione [1]; e.target.d = true; blockPlaced ();
Anche in questo caso, potrebbe essere necessario modificare i valori qui selezionati, in modo che corrispondano alla posizione dei blocchi.
Quando il blocco viene inserito nel contenitore, aggiungiamo il blocco alla matrice che tiene traccia dei blocchi memorizzati in quel contenitore. Questo ci aiuterà a determinare quando il contenitore è pieno.
private final function blockPlaced (): void var i: int = blocks.length - 1; / * Spingi il blocco nell'array dei blocchi del contenitore * / eventTarget.blocks.push (blocks [i]);
Ogni blocco inserito incrementa il punteggio di uno. Quando la scatola è piena il punteggio aumenterà di 50 e se la scatola è completamente riempita da un singolo colore il punteggio totale aumenterà di 200.
segnare ++;
Un breve suono indicherà che il blocco è stato posizionato.
bell.play ();
Il prossimo codice controlla se il contenitore è stato riempito da un singolo blocco di colore usando l'array contenitore. Aumenta il punteggio di 200, riproduce il suono corrispondente e rimbalza il contenitore come un segno visivo. Cancella anche le variabili nel contenitore.
/ * Se il contenitore è pieno e ogni blocco è dello stesso colore * / if (eventTarget.blocks.length == 4 && String (eventTarget.blocks [0]) == String (eventTarget.blocks [1]) && String (eventTarget. blocks [1]) == String (eventTarget.blocks [2]) && String (eventTarget.blocks [2]) == String (eventTarget.blocks [3])) score + = 200; bell4.play (); TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, facilità: Bounce.easeOut, onComplete: function (): void per (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Questo codice viene eseguito quando il contenitore è pieno ma i blocchi all'interno non sono dello stesso colore.
/ * Se il contenitore è pieno ma i blocchi sono colori diversi * / else if (eventTarget.blocks.length == 4) bell4.play (500, 2); punteggio + = 50; TweenNano.from (eventTarget, 0.4, x: eventTarget.x - 5, facilità: Bounce.easeOut, onComplete: function (): void per (var j: int = 0; j < 4; j++) removeChild(eventTarget.blocks[j]); eventTarget.blocks = []; ); eventTarget.a = false; eventTarget.b = false; eventTarget.c = false; eventTarget.d = false;
Dopo aver cancellato i contenitori pieni, il punteggio viene impostato sul campo di testo sullo stage, il timer viene resettato e viene chiamato un altro blocco.
scoreTF.text = String (score); timer.stop (); timer.start (); counter.gotoAndPlay (1); newBlock ();
La funzione di avviso viene eseguita quando il giocatore ha esaurito le vite; visualizza il punteggio finale raggiunto e aggiunge un ascoltatore per tornare alla schermata del titolo.
avviso funzione finale privata (): void timer.stop (); counter.gotoAndStop (1); var alert: AlertView = new AlertView (); alert.messageBox.msgTF.text = 'Punteggio:' + String (punteggio); alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (allarme); TweenNano.from (alert.messageBox, 0.7, y: -alert.messageBox.height, facilità: Bounce.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');
Hai creato un gioco molto divertente, prova ad aggiungere le tue caratteristiche e la tua grafica.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
