Share
Oggi ti mostrerò come creare una semplice ricerca di parole con un'interfaccia "Evidenziatore", che è facile da modificare con le tue parole e il layout. Useremo Flash e AS3. Continuare a leggere!
Diamo un'occhiata al risultato finale su cui lavoreremo:
In questo tutorial utilizzeremo una serie di classi ActionScript per creare un classico gioco di ricerca di parole con alfabeto Alphabet. L'obiettivo del gioco è evidenziare le lettere per formare una parola. Sarai in grado di creare il tuo zuppa di alfabeto e includere le tue parole.
Apri Flash e crea un documento 320x480px. Imposta la frequenza dei fotogrammi su 24 fps.
Verrà utilizzata una semplice interfaccia arancione, con diverse forme, pulsanti e MovieClip; continuare con i passaggi successivi per creare questa GUI.
Questo sfondo è stato creato in Flash utilizzando forme rettangolari semplici. Il colore esadecimale per l'arancione è # EE923F.
Per creare il titolo, seleziona prima lo strumento di testo (T), cambia il colore in #EEEEEE e scrivi il testo del titolo. Quindi, duplica il campo di testo (Cmd + D), cambia il colore in # C97B35 e invia il nuovo campo di testo all'indietro per creare l'effetto di stampa tipografica.
Usa di nuovo il Strumento di testo per creare due 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 ActionScript scatola.
Questa è la schermata di gioco - beh, è lo sfondo, poiché tutto in questa schermata verrà creato dinamicamente utilizzando ActionScript 3.
Il Di schermo apparirà di fronte al Titolo Schermo; usa la grafica e i caratteri usati prima per deporla. Nominalo AboutView e ricorda di controllare il Esporta per ActionScript scatola.
Viene visualizzato un avviso quando vengono trovate tutte le parole, verrà visualizzato un gioco su messaggio e istruzioni. Utilizzare il Strumento rettangolo per crearlo e impostarne il nome istanza AlertView, . Di nuovo segnare 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 campana.
Useremo un motore di interpolazione diverso dal predefinito incluso nel flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare TweenNano dal suo sito Web ufficiale.
Renderemo interattiva la nostra applicazione utilizzando una classe esterna. Aggiungi il suo nome (Principale) 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. Questa sarà la classe del documento.
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.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.display.Shape; import flash.events.MouseEvent; import flash.display.MovieClip; import com.greensock.TweenNano; import com.greensock.easing.Bounce; 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 si spiegano da soli, quindi non ci saranno commenti.
private var titleView: TitleView = new TitleView (); private var about: AboutView; // parole per trovare private const L1: Vector.= nuovo ["CLASS", "PUBLISH", "DEFAULT", "SETTINGS", "FLASH"]; // Usato per posizionare le parole nello stage private const L1Map: Array = [[0, 0, 'C', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'L', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'A', 0, 0, 0, 0, 0, 0, 'S'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'E'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'T'], [0, 0, 0, 0, 0, 0, 0, 0, 'F', 'T'], ['D', 'E', 'F', 'A', 'U', 'L', 'T', 0, 'L', 'I'], [0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N'], [0, 0, 0, 0, 0, 0, 0, 0, 'S', 'G'], [0, 0, 'P', 'U', 'B', 'L', 'I', 'S', 'H', 'S'], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]; alfabeto privato var: Vector. = nuovo ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', ' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ',' Y ' , 'Z']; private var soupFmt: TextFormat = new TextFormat ('Arial', 19, 0x666666); private var wordsFmt: TextFormat = new TextFormat ('Arial', 12, 0xEEEEEE); private var wordsList: TextField = new TextField (); private var line: Shape = new Shape (); private var tfs: MovieClip = new MovieClip (); campana var privata: Bell = new Bell (); var privata corretta: int = 0; // numero di parole trovate finora
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguito quando il FLA viene caricato se parte della classe di documenti.
Chiama 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);
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.aboutBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.aboutBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
Il Titoli di coda la schermata viene visualizzata quando l'utente fa clic sul pulsante dei crediti; un ascoltatore del mouse viene aggiunto al completo Un filmato rimuoverlo.
funzione finale privata showCredits (e: MouseEvent): void titleView.aboutBtn.visible = false; titleView.startBtn.visible = false; about = new AboutView (); about.y = stage.stageHeight + about.height; addChild (circa); TweenNano.to (circa, 0.3, y: stage.stageHeight-about.height, onComplete: function (): void about.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 (circa, 0.3, y: stage.stageHeight + about.height, onComplete: function (): void titleView.aboutBtn.visible = true; titleView.startBtn .visible = true; about.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (about); about = null;);
Le seguenti righe rimuovono il Titolo schermo e lasciare il Gioco schermo visibile. Chiama anche le funzioni necessarie per iniziare il gioco - aggiungeremo queste funzioni nei passaggi successivi.
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; ); buildSoup (); gameListeners ( 'add'); 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 i file Milestone sono inclusi nel download sorgente, quindi se per qualche motivo il tuo file non imita questo dai un'occhiata alla fonte per vedere cosa può causare.
Questa funzione aggiunge gli ascoltatori del mouse necessari per disegnare la linea che evidenzierà le lettere.
private final function gameListeners (action: String): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.addEventListener (MouseEvent.MOUSE_UP, detectLetters); else stage.removeEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.removeEventListener (MouseEvent.MOUSE_UP, detectLetters);
Una delle funzioni più importanti del gioco. Creerà e posizionerà i personaggi per costruire la zuppa alfabetica. Codificheremo il suo comportamento nei prossimi passaggi.
funzione finale privata buildSoup (): void // Code ...
I cicli for nidificati vengono utilizzati per leggere l'array multidimensionale; viene creato un campo di testo per ogni elemento trovato e viene assegnata una posizione a quel campo di testo.
per (var i: int = 0; i < 10; i++) for(var j:int = 0; j < 12; j++) var tf:TextField = new TextField(); tf.width = 22; tf.height = 22; tf.defaultTextFormat = soupFmt; tf.selectable = false; tf.x = 10 + (31.3 * i); tf.y = 10 + (35 * j)
Le parole sono già impostate nell'array delle lettere originali, quindi il codice seguente cambierà gli 0 in caratteri casuali ottenuti dalla matrice Alphabet. Poiché questo cambia solo gli 0, i caratteri originali non verranno modificati.
/ * Cambia 0 in lettere casuali * / if (L1Map [j] [i] == 0) L1Map [j] [i] = alfabeto [Math.floor (Math.random () * alphabet.length)]; tf.text = L1Map [j] [i]; addChild (TFS); tfs.addChild (tf);
Questo campo di testo mostra le parole da trovare, è posizionato nella parte inferiore dello stage.
/ * Aggiungi lista parole * / wordsList.selectable = false; wordsList.x = 5; wordsList.y = 430; wordsList.autoSize = TextFieldAutoSize.LEFT; wordsList.defaultTextFormat = wordsFmt;
Per visualizzare correttamente le parole dall'array possiamo lanciarlo su una stringa, ma dobbiamo rimuovere le virgole che vengono aggiunte automaticamente.
/ * Rimuovi ',' * / var string: String = "; for (var k: int = 0; k < L1.length; k++) string += String(String(L1[k]).replace(',',")) +"; wordsList.text = string; addChild(wordsList); Questo conclude il buildSoup () funzione.
La linea di selezione inizierà a disegnare quando l'utente fa clic sul palco; questa funzione crea la forma e aggiunge un listener per seguire il movimento del mouse.
funzione finale privata startDraw (e: MouseEvent): void line = new Shape (); addChild (line); line.graphics.moveTo (mouseX, mouseY); line.graphics.lineStyle (16, 0xFF8E2A, 0.4); stage.addEventListener (MouseEvent.MOUSE_MOVE, drawLine);
Il prossimo codice disegna la linea nella direzione del mouse.
private final function drawLine (e: MouseEvent): void line.graphics.lineTo (mouseX, mouseY);
Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice di gioco funzioni:
Disegna la linea, ma non si ferma. Ci occuperemo di questo nel prossimo passo.
Tieni presente che alcune righe sono state commentate poiché alcune funzioni non sono ancora state create.
Ricorda che i Milestones sono inclusi nei file sorgente, quindi se per qualche motivo il tuo file non imita questo dai un'occhiata alla fonte per vedere cosa potrebbe causare.
Quando il pulsante del mouse è attivo, il metodo di disegno si arresta e viene eseguito il codice per rilevare le parole evidenziate. Spiego questo codice nei prossimi passi.
private final function detectLetters (e: MouseEvent): void
Per rilevare i caratteri evidenziati, creiamo una variabile stringa che memorizzerà i campi di testo colpiti dalla linea di selezione.
/ * Ottieni lettere selezionate * / var selectedWord: String = "; for (var i: int = 0; i < tfs.numChildren; i++) if(line.hitTestObject(tfs.getChildAt(i))) selectedWord += (tfs.getChildAt(i) as TextField).text;
Quindi confrontiamo il risultato con ogni parola nell'array predefinito; se si trova la parola viene riprodotto un suono, il corretta la variabile viene incrementata e la parola cambia colore nella barra in basso.
/ * Controlla se la parola è sulla lista * / per (var j: int = 0; j < L1.length; j++) if(selectedWord == L1[j]) wordsList.htmlText = wordsList.htmlText.replace( selectedWord, ""+ selectedWord +""); bell.play (); correct ++;
Questo codice chiama e avvisa quando vengono trovate tutte le parole.
if (correct == L1.length) alert ();
Questa funzione interrompe il gioco e mostra il messaggio di gioco, aggiunge anche un ascoltatore del mouse per ripristinare il gioco quando viene cliccato.
private final function alert (): void gameListeners ('rm'); var alert: AlertView = new AlertView (); addChild (allarme); alert.addEventListener (MouseEvent.MOUSE_UP, restart); // o il prossimo livello! TweenNano.from (alert.messageBox, 0.5, y: -alert.messageBox.height, facilità: Bounce.easeOut); Questo conclude il detectLetters () funzione.
La funzione successiva ricaricherà il file SWF, ripristinando qualsiasi variabile e metodo e tornando alla prima schermata.
riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Ora siamo pronti a testare il nostro gioco e vedere se tutto funziona come previsto.
Puoi cambiare la lista delle parole semplicemente cambiando questa riga nel codice:
const privato L1: Vector.= nuovo ["CLASS", "PUBLISH", "DEFAULT", "SETTINGS", "FLASH"]; // Parole da trovare
Questo cambierà solo l'elenco di parole che il codice dovrebbe rilevare; per far apparire effettivamente le parole nella zuppa dell'alfabeto, leggi il passaggio successivo.
Il brodo Alphabet viene creato sulla base di questo array di mappe 10x12. Basta cambiare le lettere in quelle desiderate per aggiungere e posizionare le parole e usare 0 per tutto il resto. Le virgolette possono rendere il processo difficile, quindi consiglio di scrivere i caratteri solo all'inizio e poi di aggiungere le virgolette quando la mappa è pronta.
private const L1Map: Array = [[0, 0, 'C', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'L', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'A', 0, 0, 0, 0, 0, 0, 'S'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'E'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'T'], [0, 0, 0, 0, 0, 0, 0, 0, 'F', 'T'], ['D', 'E', 'F', 'A', 'U', 'L', 'T', 0, 'L', 'I'], [ 0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N'], [0, 0, 0, 0, 0, 0, 0, 0, 'S', 'G'] , [0, 0, 'P', 'U', 'B', 'L', 'I', 'S', 'H', 'S'], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
Crea le tue zuppe di alfabeto utilizzando l'array di mappe sopra.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
