Share
In questo Tutorial Premium, impareremo come combinare diverse classi e abilità di ActionScript 3 per creare un fantastico gioco di tiro a segno.
Usando gli strumenti di Flash creeremo una grafica di bell'aspetto che sarà alimentata da diverse classi di ActionScript 3 come MouseCursor, Tween Nano, Sprite, Timer e altri eventi.
L'utente sarà in grado di inserire il nome di un giocatore e distruggere un numero predefinito di bersagli prima che il gioco finisca.
Apri Flash e crea un documento di 720 pixel di larghezza e 480 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
Un'interfaccia piacevole e colorata alimenterà il nostro codice, che comprende più forme, pulsanti, cursori personalizzati e altro ancora.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Un gradiente radiale blu sarà il cielo.
Seleziona lo strumento Rettangolo (R) e crea un rettangolo di 720x335 px, usa il pannello colorato per applicare uno sfondo #EFFDFE, # 7FD7FF radiale.
Verranno utilizzate tre forme principali per le nuvole, il resto verrà duplicato MovieClip.
Usa lo strumento Ovale (O) per creare cerchi e ovali di dimensioni diverse, dopo aver ottenuto la forma della nuvola che ti piace, colorali usando questo riempimento sfumato # F1FBFF, # C3ECFF. Utilizzare lo strumento Trasformazione sfumatura (F) per ruotare la sfumatura.
Aggiungiamo alcune montagne alla scena.
Usa lo strumento Rettangolo per creare due rettangoli sulla scena, usa questa sfumatura su di essi # 8DB400, # CFF500.
Con lo strumento Selezione (V), afferra gli angoli del rettangolo e dai loro una forma meno quadrata.
Usa la stessa tecnica solo questa volta trascinando i lati dei rettangoli, (vedrai una curva nel cursore del mouse), usa lo strumento Trasforma sfumatura per ruotare il gradiente.
Questa è l'erba grafica che creeremo. È composto da tre o quattro forme diverse in diversi colori.
Usa lo strumento Rettangolo per creare un rettangolo e usa la tecnica delle montagne per iniziare a modificare la forma. Puoi vedere come l'erba è stata creata guardando l'immagine successiva:
Una volta che hai la prima forma di erba, ora devi modificare i colori e le dimensioni, quindi metterli insieme e il gioco è fatto.
Il grafico a terra è piuttosto semplice, uno sfondo colorato # 5F4123, con alcune rocce # 3A2814.
Il tuo background dovrebbe assomigliare a questo ora:
Il pannello informativo mostrerà il nome del giocatore e il punteggio corrente. Iniziamo creando lo sfondo.
Usa lo Strumento Rettangolo Primitivo per creare un rettangolo di 230x40 px, #CCCCCC, alfa 60% e posizionalo come nell'immagine.
Duplica la forma e modificala a 225x30px, # 000000, alfa 70%. Centra la nuova forma sullo sfondo grigio.
Converti la nuova forma in MovieClip e assegnagli un nome infoBg.
Usa lo strumento Testo (T) per creare due campi di testo dinamici e posizionarli sullo sfondo.
Questo è il formato utilizzato per il nome del giocatore: Walway Rounded, 28pt, # 6CA8E6, nome istanza: nome del giocatore.
Il campo di testo sul lato è: Passerella arrotondata, 32pt, #FFFFFF, nome dell'istanza: Punto.
Il cursore personalizzato è composto da una serie di rettangoli arrotondati e un cerchio.
Uno sguardo alla prossima immagine ti darà una comprensione migliore di come è stata fatta.
Il Dartboard è uno degli elementi principali del gioco, è l'obiettivo da distruggere.
Usa lo strumento Ovale per creare un cerchio di 80x80 px con questo gradiente lineare # 697368, # 060604.
Duplica la forma, ridimensionala a 64x64 px e modifica la sfumatura su # F6F6F6, #DDDDDD.
Usa lo Strumento Ovale Primitivo per creare un cerchio di 46x46 px e modificare il raggio interno a 75,00. Usa di nuovo il gradiente nero.
Duplica il cerchio bianco, ridimensionalo a 18x18 px e riempilo con # AF4F50.
Converti le forme in MovieClip e assegnale il nome Bersaglio per freccette, assicurati di controllare il Esporta per ActionScript scatola.
Un hit counter sarà nell'angolo in alto a sinistra del palco.
Usa lo stesso formato del campo di testo PlayerName, cambia il colore in # FEE75C. Il campo di testo dinamico è chiamato colpi.
Questo è il pannello dei nomi, niente di difficile.
Questa sarà la prima cosa mostrata al giocatore. Contiene un campo di testo di input chiamato NameField e il tirassegno usato come un pulsante chiamato beginButton.
Suoneremo un suono quando viene colpito un bersaglio. Ci sono molti siti dove puoi scaricare effetti sonori e musica online, puoi ottenere l'effetto usato nel tutorial qui.
Per usare il suono, dobbiamo prima importarlo nella libreria. Premi Cmd + R, cerca il suono scaricato e fai clic su Apri.
Aprire la libreria e fare clic con il tasto destro sull'icona del suono, selezionare Proprietà e segnare il Esporta per ActionScript scatola.
Questo termina la fase grafica, inizia l'ActionScripting!
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Useremo un motore di interpolazione diverso dal predefinito incluso nel flash, questo aumenterà le prestazioni (è anche più facile da usare). È possibile scaricare Tween Nano dal suo sito Web ufficiale.
La parola chiave package consente di organizzare il codice in gruppi che possono essere importati da altri script. Si consiglia di nominarli iniziando con una lettera minuscola e utilizzare gli intercapori per le parole successive, ad esempio: le mie classi. È anche comune denominarli utilizzando il sito Web della tua azienda: com.mycompany.classesType.myClass.
In questo esempio, stiamo usando una singola classe, quindi non c'è davvero bisogno di creare una cartella delle classi.
pacchetto
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.ui.Mouse; import com.greensock.TweenNano; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Qui dichiariamo la classe usando il classe definizione della parola chiave seguita dal nome che vogliamo per la classe, ricorda che devi salvare il file usando questo nome.
Il si estende keyword definisce una classe che è una sottoclasse di un'altra classe. La sottoclasse eredita tutti i metodi, le proprietà e le funzioni, in questo modo possiamo usarli nella nostra classe.
public class Main estende Sprite
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su ciascuno di essi.
private var gridY: Array = new Array (); // Memorizza la coordinata y in cui un bardo può essere posizionato private var gridX: Array = new Array (); // Memorizza la coordinata x in cui un bardo può essere posizionato private var xPos: int = 0; // L'ultima posizione x usata da un bersaglio privato var yPos: int = 0; // L'ultima posizione y usata da un dartboard privato var di freccette: Array = new Array (); // Memorizza gli sprite dei dartboard private smack smack: SmackSound = new SmackSound (); // Il suono che verrà riprodotto quando un bersaglio viene distrutto timer privato var: Timer = new Timer (3000); // La quantità di tempo di attesa prima di cambiare i bersagli nello schermo private var currentDartboards: int = 0; // I bardboard già mostrati in stage, verifica il completamento del livello private var levelComplete: int = 30; // I bersagli da mostrare per completare il livello private var scorePanel: ScorePanel = new ScorePanel (); // Un'istanza del pannello punteggio
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 eseguita utilizzando la classe documento.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica Main (): void startCustomCursor (); namePanelHandler (); updateScore (); bg.addEventListener (MouseEvent.MOUSE_DOWN, addHits);
Questa funzione anima il pannello dei nomi per lo stage e aggiunge un listener al pulsante per impostare il nome nel campo di testo quando attivato.
private function namePanelHandler (): void namePanel.beginButton.stop (); namePanel.beginButton.addEventListener (MouseEvent.MOUSE_UP, setPlayerName); TweenNano.from (namePanel, 0.5, y: -namePanel.height / 2);
Imposta il nome scritto nel campo di testo del pannello del nome nel campo playerName nel pannello Informazioni.
funzione privata setPlayerName (e: MouseEvent): void smack.play (); namePanel.beginButton.gotoAndPlay (3); playerName.text = namePanel.nameField.text; TweenNano.to (namePanel, 0.5, y: stage.stageHeight + namePanel.height / 2, onComplete: beginGame);
La seguente funzione rende trascinabile il cursore personalizzato, inoltre nasconde il cursore del mouse predefinito.
funzione privata startCustomCursor (): void Mouse.hide (); cursor.startDrag (true);
Questa è una funzione importante, calcola l'area dello stage e crea una griglia basata sulla dimensione del Dartboard (80px).
Utilizzeremo gli array risultanti in un secondo momento per evitare che i bersagli si presentino l'uno di fronte all'altro.
funzione privata calculateGrid (): void gridX = []; gridY = []; per (var h: int = 1; h <= (stage.stageHeight - 160) / 80; h++) //The - reduces invisible/used area gridY.push(80 * h); for (var v:int = 1; v <= (stage.stageWidth - 160) / 80; v++) gridX.push(80 * v);
La prossima funzione creerà e aggiungerà i bersagli creati dal quantità parametro.
Segue questa logica:
funzione privata addRandomDartboards (amount: int): void calculateGrid (); per (var i: int = 0; i < amount; i++) var dartboard:Dartboard = new Dartboard(); dartboard.stop(); xPos = gridX[Math.floor(Math.random() * gridX.length)]; yPos = gridY[Math.floor(Math.random() * gridY.length)]; dartboard.x = xPos + 40; dartboard.y = yPos + 40; gridX.splice(gridX.indexOf(xPos), 1); gridY.splice(gridY.indexOf(yPos), 1); dartboard.addEventListener(MouseEvent.MOUSE_DOWN, destroyDartboard); addChild(dartboard); TweenNano.from(dartboard, 0.6, rotationY: 180); TweenNano.from(dartboard, 0.6, scaleX: 0.4); TweenNano.from(dartboard, 0.6, scaleY: 0.4); dartboards.push(dartboard); setChildIndex(cursor, (numChildren - 1)); currentDartboards++;
Questa funzione gestisce l'animazione per una darboard che è stata colpita, rimuove anche il bersaglio dall'array dei dartboard e ne aggiunge di nuovi se non ci sono più clip in scena.
Anche le animazioni dei punteggi e dei punteggi sono gestite qui.
funzione privata destroyDartboard (e: MouseEvent): void smack.play (); // Il suono hit e.target.removeEventListener (MouseEvent.MOUSE_DOWN, destroyDartboard); e.target.gotoAndPlay (3); e.target.addEventListener (Event.ENTER_FRAME, removeDartboard); dartboards.splice (dartboards.indexOf (e.target), 1); // Rimuovi dall'array if (dartboards.length == 0) // Aggiungi nuove tavole se tutte sono state distrutte timer.stop (); addRandomDartboards (5); timer.start (); / * Aggiorna punteggi, hit e play hit animation * / updateScore (1); updateHits (1); var plusOne: ScorePlus = new ScorePlus (); plusOne.x = e.target.x; plusOne.y = e.target.y + plusOne.height; addChild (plusone); TweenNano.from (plusOne, 0.5, scaleX: 0.5); TweenNano.from (plusOne, 0.5, scaleY: 0.5, onComplete: removeScoreGFX, onCompleteParams: [plusOne]);
Rimuove il Movie Clip "+1" del punteggio.
funzione privata removeScoreGFX (target: Sprite): void removeChild (target);
Controlla se l'animazione di darboard è terminata e la rimuove se è vera.
funzione privata removeDartboard (e: Event): void if (e.target.currentFrame == 8) e.target.removeEventListener (Event.ENTER_FRAME, removeDartboard); removeChild (e.target as Sprite);
Aggiunge il punteggio indicato al punteggio TextField.
private function updateScore (addToScore: int = 0): void score.text = String (int (score.text) + addToScore);
Aggiunge 1 al punteggio di colpi, questo viene chiamato quando un bersaglio viene distrutto.
funzione privata updateHits (addToHits: int = 0): void hits.text = String (int (hits.text) + addToHits); TweenNano.from (hits, 0.3, y: -5);
Aggiunge il punteggio totale di hit al punteggio TextField.
funzione privata addHits (e: MouseEvent): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0";
Inizia il gioco.
Crea i bersagli, rimuove il pannello dei nomi dei giocatori e avvia il timer.
funzione privata beginGame (restarting: Boolean = false): void if (! restarting) removeChild (namePanel); addRandomDartboards (5); timer.addEventListener (TimerEvent.TIMER, removeRemainingListeners); timer.start ();
Rimuove i bersagli che non sono stati colpiti e ne aggiunge di nuovi se il livello non è completo.
private function removeRemaining (): void for (var i: int = dartboards.length-1; i> = 0; i--) removeChild (dartboards [i]); dartboards.length = i; if (dartboards.length == 0 && currentDartboards < levelComplete) addRandomDartboards(5); timer.start(); else if (dartboards.length == 0 && currentDartboards >= levelComplete) // Se level complete levelCompleted ();
Se tutti i bersagli consentiti sono stati visualizzati nello stage, questa funzione verrà eseguita.
Calcola il punteggio finale, nasconde il pannello delle informazioni e mostra lo ScorePanel.
private function levelCompleted (): void score.text = String (int (score.text) + int (hits.text)); hits.text = "0"; score.visible = false; playerName.visible = false; TweenNano.to (infoBg, 0.5, x: -infoBg.width / 2); scorePanel.x = stage.stageWidth + scorePanel.width / 2; scorePanel.y = stage.stageHeight / 2; scorePanel.myScore.text = score.text; scorePanel.playAgain.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (scorePanel); setChildIndex (cursor, (numChildren - 1)); TweenNano.to (scorePanel, 0.5, x: stage.stageWidth / 2);
Le linee successive rendono possibile il riavvio. Troverete tutto spiegato nei commenti.
funzione privata restart (e: MouseEvent): void score.visible = true; // nasconde il punteggio score.text = "0"; // Imposta il punteggio su 0 playerName.visible = true; // Mostra di nuovo il nome del giocatore scorePanel.playAgain.removeEventListener (MouseEvent.MOUSE_UP, restart); // Rimuove l'ascoltatore dal pulsante nel pannello dei punteggi TweenNano.to (infoBg, 0.5, x: infoBg.width / 2); // Animazione del pannello delle informazioni e del pannello dei punteggi TweenNano.to (scorePanel, 0.5, x: stage.stageWidth + scorePanel.width / 2, onComplete: removeScorePanel); currentDartboards = 0; // Reimposta la lista corrente di freccette beginGame (true); // inizia il gioco
Rimuove il pannello dei punteggi dallo stage quando l'animazione è completa.
funzione privata removeScorePanel (): void removeChild (scorePanel);
Faremo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo QuickTip.
Ora sei pronto per testare il tuo gioco !, vai su Flash e premi Cmd + Return, controlla che tutto funzioni come previsto e divertiti!
Il risultato finale è un gioco colorato e divertente, prova a personalizzarlo, che ne dici di una porta su Android?
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua