Share
Segui le semplici istruzioni di questo Tutorial Premium per creare uno sparatutto divertente con Flash e AS3.
Usando gli sprite predefiniti e gli strumenti di Flash, creeremo un'interfaccia grafica di bell'aspetto che sarà alimentata da diverse classi di ActionScript 3.
L'utente sarà in grado di controllare un'astronave e sparare a più nemici viaggiando nello spazio.
Apri Flash e crea un documento di 320 pixel di larghezza e 480 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
La nostra interfaccia sarà composta da diversi sprite, campi di testo e filmati.
Continua con i prossimi passi e vedremo come crearlo.
Lo sfondo sarà molto semplice, poiché le stelle vengono generate utilizzando ActionScript.
Crea un rettangolo di 320x480 px e riempilo di nero. Potresti aggiungere un leggero gradiente radiale.
Usa il pannello Allinea (Cmd + K) per centrarlo nello stage.
Ho usato una grande libreria di sprite nella demo di questo tutorial, queste sono parte dello SpriteLib di Flying Yogi.
Importa gli sprite sullo stage (Cmd + R), convertili in MovieClip e regola i fotogrammi per visualizzare una bella animazione.
Sarà necessario un campo di testo dinamico per visualizzare il punteggio del gioco. Utilizzare lo strumento di testo (T) per crearne uno; nominalo scoreTF e posizionarlo nell'angolo in basso a sinistra del palco.
Per utilizzare un carattere personalizzato in un campo di testo dinamico, devi incorporarlo nella tua applicazione. Seleziona il campo di testo e usa il Proprietà pannello di Incorporare? pulsante per aggiungere i caratteri necessari.
La Vista avvisi verrà mostrata quando l'utente raggiunge uno stato di gioco, (vinci, perdi). Usa il font desiderato per creare una schermata semplice con due campi di testo dinamici; Nominali titleTF e msgTF, converti la scatola in MovieClip e imposta il nome della sua classe su AlertView.
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 spazio, esplosione e laser.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare Tween Nano dal suo sito Web ufficiale.
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.ui.Mouse; import com.greensock.TweenNano; import com.greensock.easing.Expo; import flash.events.MouseEvent; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
stelle private var: Sprite; // Memorizzerà lo sfondo delle stelle private var starsCopy: Sprite; // Un'altra versione dello sfondo delle stelle private var ship: Ship; proiettili privati var: Vector.= nuovo vettore. (); // Terrà i proiettili nei nemici di palchi privati: Array = new Array (); // Terrà i nemici in stage private var timer: Timer = new Timer (500); // Il momento in cui un nuovo nemico apparirà in privato var alertView: AlertView; vite private var: Vector. ; // Memorizzerà le vite private private boss: Boss; private var bossHealth: int = 20; private var laserSound: Laser = new Laser (); private var bossSound: UFO = new UFO (); private var exSound: Explosion = new Explosion ();
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 finale Main (): void
buildStars (200); // Questa funzione avvia la creazione del gioco
Il buildStars () il metodo usa la Stella MC nella libreria per creare uno sfondo con stelle disposte casualmente. Vengono creati due sprite per interpolarli entrambi e simulare il movimento, usando lo stesso trucco di questo tutorial di scrolling della parallasse.
funzione finale privata buildStars (n: int): void stars = new Sprite (); per (var i: int = 0; i < n; i++) var star:Star = new Star(); star.alpha = Math.random() * 1; star.scaleX = Math.random() * 1; star.scaleY = star.scaleX; star.x = Math.floor(Math.random() * stage.stageWidth); star.y = Math.floor(Math.random() * stage.stageHeight-20); stars.addChild(star); /* Create another stars sprite to make animation */ starsCopy = new Sprite(); for(var j:int = 0; j < n; j++) var star2:Star = new Star(); star2.alpha = Math.random() * 1 + 0.2; star2.scaleX = Math.random() * 1; star2.scaleY = star.scaleX; star2.x = Math.floor(Math.random() * stage.stageWidth); star2.y = Math.floor(Math.random() * stage.stageHeight-20); starsCopy.addChild(star2); starsCopy.y = -stage.stageHeight; addChild(starsCopy); addChild(stars); addShip(); //Add ship (player) to stage
Questa funzione crea un'istanza di Ship MC nella libreria e la posiziona sullo stage con un'animazione pulita.
funzione finale privata addShip (): void ship = new Ship (); ship.x = stage.stageWidth * 0.5; ship.y = stage.stageHeight + ship.height; addChild (nave); TweenNano.to (ship, 2, y: (stage.stageHeight - ship.height) - 10, facilità: Expo.easeOut, onComplete: listeners ()); addLives ();
Riutilizzando il MC della nave, tre sprite delle navi vengono aggiunti allo stage come un indicatore di vita. Le navi vengono aggiunte a un vettore per verificare la presenza del gioco più avanti nel gioco.
funzione finale privata addLives (): void lives = new Vector.(); per (var i: int = 0; i < 3; i++) var live:Ship = new Ship(); live.stop(); live.width = 16; live.height = 16; live.x = (stage.stageWidth - live.width * 0.7) - (5 * i+1) - live.width * i; live.y = stage.stageHeight - live.height * 0.7; addChild(live); lives.push(live);
Queste linee aggiungeranno gli ascoltatori necessari allo stage e al timer; questo include eventi mouse, eventi timer ed eventi EnterFrame che aggiorneranno il gioco ogni fotogramma.
ascoltatori di funzioni finali private (action: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.addEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.addEventListener (TimerEvent.TIMER, addEnemy); stage.addEventListener (Event.ENTER_FRAME, update); timer.start (); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, moveShip); stage.removeEventListener (MouseEvent.MOUSE_DOWN, shoot); timer.removeEventListener (TimerEvent.TIMER, addEnemy); stage.removeEventListener (Event.ENTER_FRAME, update); timer.stop ();
La nave del giocatore sarà controllata dal mouse, la prossima funzione si occuperà di:
funzione finale privata moveShip (e: MouseEvent): void ship.x = mouseX;
La nostra nave sarà in grado di sparare proiettili per distruggere e proteggersi dai nemici. Questa funzione verrà eseguita ogni volta che l'utente fa clic sul palco e posizionerà un proiettile davanti alla nave che verrà successivamente spostato dal aggiornare() funzione. Riproduce anche un suono di ripresa.
private final shoot di funzioni (e: MouseEvent): void var bullet: Bullet = new Bullet (); bullet.x = ship.x; bullet.y = ship.y - (ship.height * 0.5); laserSound.play (); // Riproduci sound bullets.push (bullet); addChild (proiettile);
Non sarebbe uno sparatutto senza qualcosa da sparare. I nemici sono creati dalla funzione successiva, un Timer viene usato per creare un nemico ogni 500 millisecondi (puoi cambiare quel valore nel passo delle variabili) che viene successivamente spostato dal aggiornare() funzione.
funzione finale privata addEnemy (e: TimerEvent): void var enemy: Enemy = new Enemy (); enemy.x = Math.floor (Math.random () * (stage.stageWidth - enemy.width)); enemy.y = -enemy.height; enemies.push (nemico); addChild (nemico);
La Vista avvisi mostra le informazioni del giocatore sullo stato del gioco, viene mostrato quando viene raggiunto un evento di gioco.
In questa funzione vengono utilizzati due parametri:
Accentsconagua
avviso di funzione finale privata (t: String, m: String): void listeners ('remove'); / * Crea e mostra avviso * / alertView = new AlertView (); alertView.x = stage.stageWidth * 0.5; alertView.y = stage.stageHeight * 0.5; alertView.titleTF.text = t; alertView.msgTF.text = m; alertView.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alertView); Il aggiornare() la funzione viene eseguita ogni fotogramma, gestisce tutto il movimento del gioco e le collisioni. È la funzione del ciclo di gioco per questo gioco. Dai un'occhiata ai prossimi passi per vedere il suo comportamento.
aggiornamento della funzione finale privata (e: Event): void // code
Lo sfondo viene spostato su ogni fotogramma per simulare il viaggio nello spazio; quando lo sprite delle stelle in basso raggiunge il limite dello stage, viene spostato in alto, creando un loop.
stars.y + = 5; starsCopy.y + = 5; if (stars.y> = stage.stageHeight - 20) stars.y = -stars.height; else if (starsCopy.y> = stage.stageHeight - 20) starsCopy.y = -stars.height;
Le prossime righe di codice controllano se ci sono proiettili in scena; se è vero, i proiettili sono spostati verso l'alto; quando un proiettile non è più visibile, viene distrutto.
if (bullets.length! = 0) for (var i: int = 0; i < bullets.length; i++) bullets[i].y -= 10; /* Destroy offstage bullets */ if(bullets[i].y < 0) removeChild(bullets[i]); bullets[i] = null; bullets.splice(i, 1);
Aggiungeremo un boss grande e cattivo al gioco. Quando l'utente raggiunge un determinato punteggio, apparirà il boss:
if (int (scoreTF.text) == 500 && boss == null) boss = new Boss (); bossSound.play (); boss.x = stage.stageWidth * 0.5; boss.y = -boss.height; TweenNano.to (boss, 3, y: 80); addChild (sporgenza);
Anche i nemici vengono spostati su ogni fotogramma. Questo codice trova tutti i nemici nello stage usando l'array e li sposta di 5px verso il basso.
if (enemy.length! = 0) for (var j: int = 0; j < enemies.length; j++) /* Move enemies */ enemies[j].y += 5;
Qui controlliamo se un nemico si scontra con la nave del giocatore; se lo fa, vengono eseguite una serie di azioni a partire dal suono dell'esplosione:
/ * se il nemico colpisce il giocatore * / if (nemici [j] .hitTestObject (nave)) exSound.play ();
Dopo aver riprodotto il suono, il nemico viene rimosso dallo stage e dalla matrice, ed è impostato su null in modo da (eventualmente) cancellarlo dalla memoria.
/ * Rimuovi nemico * / removeChild (nemici [j]); nemici [j] = null; enemy.splice (j, 1);
Anche una delle icone del segnalino vita verrà rimossa allo stesso modo del nemico.
/ * Rimuovi Live * / removeChild (lives [lives.length-1]); lives [lives.length-1] = null; lives.splice (lives.length-1, 1);
Poi controlliamo il numero delle vite, se il giocatore è fuori dalla vita usiamo il metodo di allerta per visualizzare un avviso che indica il gioco finito, se ci sono ancora vite disponibili la nave è animata nel palco.
/ * Se non sono rimaste vite, game over * / if (lives.length == 0) alert ('Game Over', 'Click to continue'); else / * Tween Ship * / ship.y = stage.stageHeight + ship.height; TweenNano.to (ship, 2, y: (stage.stageHeight - ship.height), facilità: Expo.easeOut); Il seguente codice gestisce le collisioni del boss, usa lo stesso metodo usato nella collisione nave-nemico. Qui usiamo il bossHealth variabile per determinare quando il boss è sconfitto.
per (var k: int = 0; k < bullets.length; k++) /* Hit Boss */ if(boss != null && bullets[k].hitTestObject(boss)) exSound.play(); removeChild(bullets[k]); bullets[k] = null; bullets.splice(k, 1); bossHealth--; scoreTF.text = String(int(scoreTF.text) + 50); if(bossHealth <= 0 && boss != null) removeChild(boss); boss = null; alert('You Won', 'Click to continue'); Un altro codice di rilevamento delle collisioni. I proiettili nell'array sono testati per la collisione con i nemici; quando ciò accade, entrambi vengono rimossi dal palco e dai loro array.
/ * se il proiettile colpisce il nemico * / if (bullets.length! = 0 && nemici [j]! = null && bullets [k] .hitTestObject (nemici [j])) exSound.play (); // Riproduci suono removeChild (nemici [j]); nemici [j] = null; enemy.splice (j, 1); removeChild (proiettili [k]); proiettili [k] = null; bullets.splice (k, 1); scoreTF.text = String (int (scoreTF.text) + 50); // Aggiungi punteggio al campo di testo nella fase
Il riavvio funzione() è chiamato dal mettere in guardia() funzione, gestisce le operazioni necessarie per reimpostare il gioco e riavviarlo.
riavvio della funzione finale privata (e: MouseEvent): void // code
La prima parte del ricomincia() la funzione gestisce gli sprite, le righe successive del codice rimuovono tutte le immagini dallo stage.
/ * Rimuovi Grafica * / removeChild (nave); nave = null; per (var i: int = 0; i < bullets.length; i++) removeChild(bullets[i]); bullets[i] = null; bullets.length = 0; for(var j:int = 0; j < enemies.length; j++) removeChild(enemies[j]); enemies[j] = null; enemies.length = 0; for(var k:int = 0; k < lives.length; k++) removeChild(lives[k]); lives[k] = null; lives.length = 0; removeChild(stars); stars = null; removeChild(starsCopy); starsCopy = null; if(boss != null) removeChild(boss); boss = null;
La prossima parte di ricomincia() rimuove la Vista avvisi dallo stage:
/ * Rimuovi avviso * / removeChild (alertView); alertView = null;
Nella parte successiva di ricomincia(), le variabili di integrità del punteggio e del capo vengono ripristinate:
/ * Resetta punteggio * / punteggioTF.text = '0'; / * Ripristina integrità Boss * / bossHealth = 50;
Alla fine, alla fine di ricomincia(), chiamiamo il metodo che inizia tutto:
/ * Riavvia * / buildStars (200);
Aggiungi il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
Hai imparato come creare un gioco Space Shooter con tutte le sue caratteristiche di base, prova ad estenderlo usando ciò che già sai!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
