Share
Dai un'occhiata a questo tutorial Premium e crea un divertente gioco di piattaforme che cadono utilizzando Flash e ActionScript 3.0. Non colpire le piattaforme viola o muoverti al di fuori dello schermo, altrimenti perderai una vita!
Usando gli strumenti di disegno di Flash creeremo un'interfaccia grafica di bell'aspetto che sarà alimentata da diverse classi ActionScript 3.
L'utente sarà in grado di spostare un personaggio attraverso il palco e le piattaforme, è possibile modificare i parametri della classe per personalizzare il gioco.
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 DEBDA0 320x480px # e centrarlo nello stage. Duplica la forma precedente e modifica la larghezza a 2px e il suo colore a # C3A287, duplica la forma (Cmd + D) più volte e sposta ogni 2 px a destra per ottenere il risultato mostrato sopra.
Seleziona lo strumento di testo (T), scegli un bel font e scrivi il titolo del gioco. Ho usato questo formato: Candara Bold, 80pt, # 746253. Puoi anche aggiungere la grafica del giocatore e della piattaforma che creeremo nei passaggi successivi.
Usa la stessa tecnica per creare due pulsanti, allinearli al centro e nominarli startB e creditsB. Converti tutto in a Un filmato e impostare il nome dell'istanza su menuView.
Questo sarà il GameView. Aggiungi lo sfondo MC sul palco e creare due Campi di testo dinamici e posizionali come mostrato nell'immagine. È inoltre possibile aggiungere alcune forme semplici dietro il TextField per rendere il testo più chiaro.
Utilizzare il Strumento primitivo rettangolo (R) per creare un quadrato 30x30px e riempirlo con # CC6600. Duplica la forma, modifica le sue dimensioni a 28x28 px e usa questo riempimento sfumato: # F9D03 a # EA7736. Puoi aggiungere un'icona o una lettera per identificare il tuo personaggio, ho usato il un dal logo ActiveTuts +.
Infine, seleziona la parte inferiore della forma (come mostrato nell'immagine) convertirla in Un filmato e nominalo Harea, questo sarà veramente utile per evitare collisioni indesiderate con i blocchi. Seleziona tutte le forme e convertile in un unico MC; nominalo Giocatore e segnare il Esporta per ActionScript scatola.
Utilizza la stessa tecnica utilizzata nell'ultimo passaggio per creare due blocchi 60x14 px, convertili in MC, assegna un nome a quello grigio Bloccare e quello viola blocchi danneggiati. Non dimenticare di segnare il Esporta per ActionScript scatola.
Un avviso verrà mostrato quando perdi tutte le vite, mostrerà il punteggio finale che hai raggiunto. Utilizzare il Strumento primitivo rettangolo per crearlo e aggiungere il filtro mostrato nell'immagine per un miglior aspetto. 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 in Flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare Tween Nano dal suo sito Web ufficiale. Per informazioni su come installarlo, leggi questo tutorial.
Useremo gli effetti sonori per migliorare la sensazione del gioco (in questo caso per far sapere al giocatore quando hanno perso una vita), puoi trovare il suono usato in questo esempio su Soungle.com usando la parola chiave blip. Salva il suono nella tua libreria con un nome di classe di blip.
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.Event; import flash.events.KeyboardEvent; import flash.events.TimerEvent; import flash.utils.Timer; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic;
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ì.
blocchi var privati: Vector.= nuovo vettore. (); // Un vettore per memorizzare i blocchi mobili private var player: Player = new Player (); gravità var privata: int = 3; // La variabile gravity usata per spostare il player e blocca var var privateLeft: Boolean = false; // memorizza la direzione del player private var moveRight: Boolean = false; private var blockTimer: Timer = new Timer (800); // tempo di attesa prima che venga generato un nuovo blocco vita privata var: Life; vite private var: int = 3; private var lifeTimer: Timer = new Timer (8000); // tempo di attesa prima che venga visualizzata una nuova vita private var blip: Blip = new Blip (); // Un'istanza del suono
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe, questo è il primo ad essere eseguito quando si crea un'istanza di un oggetto o il primo ad essere eseguito quando il progetto è caricato se è nella classe documento.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
Accentsconagua
funzione public final Main (): void initialListeners ('add'); Inizieremo aggiungendo gli ascoltatori del mouse ai pulsanti nella visualizzazione menu, questi ci porteranno alla schermata di gioco o alla schermata dei crediti.
private final function initialListeners (action: String = 'add'): void if (action == 'add') menuView.startB.addEventListener (MouseEvent.MOUSE_UP, gameView); menuView.creditsB.addEventListener (MouseEvent.MOUSE_UP, showCreditsView);
Quando il Inizio viene premuto il pulsante, la messa a fuoco è impostata sullo stage per ricevere le azioni della tastiera per spostare il lettore, quindi la vista Menu viene interpolata e rimossa.
private final function gameView (e: MouseEvent): void / * Focus Stage * / stage.focus = stage; / * Rimuovi MenuView, Start Game * / TweenNano.to (menuView, 0.5, y: -menuView.height, onComplete: function (): void removeChild (menuView); menuView = null; addInitialBlocks (););
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 showCreditsView (e: MouseEvent): void var credits: CreditsView = new CreditsView (); addChild (crediti); TweenNano.from (crediti, 0.4, x: stage.stageWidth); credits.addEventListener (MouseEvent.MOUSE_UP, function (): void TweenNano.to (credits, 0.4, x: stage.stageWidth, onComplete: function (): void removeChild (credits); credits = null;); );
Il seguente codice aggiunge i blocchi specificati nel parametro in una posizione casuale, chiamerà anche la funzione per aggiungere il giocatore allo stage.
funzione finale privata addInitialBlocks (n: int = 3): void for (var i: int = 0; i < n; i++) var block:Block = new Block(); block.x = Math.random() * (stage.stageWidth - block.width); block.y = (stage.stageHeight * 0.5) + Math.random() * (stage.stageHeight * 0.5); addChild(block); blocks.push(block); addPlayer();
Il giocatore verrà aggiunto quando i blocchi iniziali sono sul palco. Apparirà nel centro X del palco.
funzione finale privata addPlayer (): void player.x = (stage.stageWidth * 0.5) - (player.width * 0.5); player.y = player.height; addChild (giocatore); gameListeners ();
Il seguente codice imposterà il valore appropriato della variabile di movimento su true o false a seconda di quale tasto è stato premuto, quindi la variabile verrà controllata ogni frame (in un'altra funzione). Questo farà muovere il giocatore in base a quella variabile.
funzione finale privata movePlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true;
Quando i tasti freccia vengono rilasciati, la variabile appropriata è impostata su falso fermare il movimento.
funzione finale privata stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false;
Questa funzione è chiamata da un timer; calcolerà un numero intero casuale da 0 a 3, quando il risultato è uguale a 0, verrà aggiunto un blocco errato, se il risultato è diverso da 0, verrà aggiunto un blocco normale. I blocchi vengono aggiunti a una proprietà Vector chiamata blocchi, in questo modo siamo in grado di accedervi al di fuori di questa funzione.
funzione finale privata addBlock (e: TimerEvent): void var r: int = Math.floor (Math.random () * 4); if (r! = 0) var block: Block = new Block (); block.x = Math.random () * (stage.stageWidth - block.width); block.y = stage.stageHeight + block.height; addChild (blocco); blocks.push (blocco); else var badBlock: BadBlock = new BadBlock (); badBlock.name = 'bad'; badBlock.x = Math.random () * (stage.stageWidth - badBlock.width); badBlock.y = stage.stageHeight + badBlock.height; addChild (blocchi danneggiati); blocks.push (blocchi danneggiati);
Un'altra funzione temporizzata, una grafica di vita verrà aggiunta quando il timer è completo. La posizione della vita sarà l'ultimo blocco del vettore - 1.
funzione finale privata addLife (e: TimerEvent): void life = new Life (); life.x = blocks [blocks.length - 1] .x; life.y = blocks [blocks.length - 1] .y - life.height; addChild (la vita);
Questa funzione aggiunge e rimuove gli ascoltatori necessari per avviare il gioco.
private final function gameListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (Event.ENTER_FRAME, update); blockTimer.addEventListener (TimerEvent.TIMER, addBlock); blockTimer.start (); lifeTimer.addEventListener (TimerEvent.TIMER, addLife); lifeTimer.start (); else stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (Event.ENTER_FRAME, update); blockTimer.removeEventListener (TimerEvent.TIMER, addBlock); blockTimer.stop (); lifeTimer.removeEventListener (TimerEvent.TIMER, addLife); lifeTimer.stop ();
Quando il giocatore perde una vita, verrà mostrata una piccola animazione nel campo di testo delle vite e verrà riprodotto un suono per avvisare l'utente.
funzione finale privata animateLives (): void TweenNano.from (livesTF, 0.8, x: livesTF.x - 3, ease: Elastic.easeOut); blip.play ();
In questa parte iniziamo la funzione principale del gioco, questa funzione verrà eseguita ogni fotogramma.
Le prossime righe di codice controllano le variabili di movimento, se è vero, il giocatore verrà spostato.
aggiornamento della funzione finale privata (e: Event): void / * Controls * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4;
Questo codice crea muri invisibili ai lati del palco per impedire al giocatore di uscire da esso.
/ * Confini dello schermo * / if (player.x <= 0) //Left player.x = 0; else if(player.x >= (stage.stageWidth - player.width)) // Right player.x = (stage.stageWidth - player.width);
Il giocatore viene spinto verso il basso dalla variabile gravità.
/ * Gravità del giocatore * / player.y + = gravità;
Le linee successive controllano le collisioni tra il giocatore e i blocchi. Quando il giocatore si scontra con un blocco normale, rimane sopra di esso. Quando viene colpito un blocco brutto, una vita viene persa e il giocatore viene trasferito.
per (var i: int = 0; i < blocks.length; i++) if(player.hArea.hitTestObject(blocks[i]) && blocks[i].name == 'bad') for(var j:int = 3; j < blocks.length; j++) if(blocks[j].name != 'bad') player.x = blocks[j].x; player.y = blocks[j].y - player.height; lives--; animateLives(); livesTF.text = 'x' + String(lives); j = blocks.length; if(player.hArea.hitTestObject(blocks[i])) player.y = blocks[i].y - (player.height + 3);
La gravità colpisce anche i blocchi, ma nella direzione opposta.
blocchi [i] .y - = gravità;
I blocchi vengono distrutti quando non sono più visibili sul palco.
if (blocchi [i] .y < -blocks[i].height) removeChild(blocks[i]); blocks[i] = null; blocks.splice(i, 1);
Il punteggio del gioco aumenta ogni frame, questo codice cambia il campo di testo per riflettere quello.
scoreTF.text = String (int (scoreTF.text) + 1);
Le seguenti righe gestiscono il grafico della vita e le variabili.
Se una vita (a 1-Up) è sul palco, verrà spostata verso l'alto e rimossa se viene colpita dal giocatore o non è più visibile sul palco.
if (life! = null) life.y - = gravità; / * Rimuovi + Life * / if (life.y < 0) removeChild(life); life = null; /* Grab +Life */ if(life != null && player.hitTestObject(life)) removeChild(life); life = null; lives++; livesTF.text = 'x' + String(lives); /* Lose Lives */ if(player.y > stage.stageHeight || Player visita < -5) player.x = blocks[3].x; player.y = blocks[3].y - player.height; lives--; animateLives() livesTF.text = 'x' + String(lives);
Quando il giocatore è fuori dalla vita, il showAlert () la funzione è chiamata. Questa funzione interromperà il gioco e rivelerà il punteggio finale.
se (vite < 0) showAlert();
Puoi aggiungere quanti livelli vuoi, questo è un esempio di come puoi aggiungere un livello.
Quando il punteggio raggiunge il 500 la gravità aumenta di 1, questo renderà il gioco più veloce e più difficile atterrare sulle piattaforme, riduce anche il tempo in cui le vite vengono aggiunte.
if (int (scoreTF.text)> 500 && int (scoreTF.text) < 502) gravity = 4; lifeTimer = new Timer(12000);
Prova ad aumentare la velocità dopo ogni 500 punti.
Questa funzione interrompe il gioco e rivela il punteggio finale, inoltre aggiunge un ascoltatore del mouse per reimpostare il gioco quando viene cliccato.
funzione finale privata showAlert (): void gameListeners ('rmv'); var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text + '!'; livesTF.text = "; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (alert); TweenNano.from (alert, 0.7, y: -alert.height, ease: Elastic.easeOut); La prossima funzione ricaricherà il SWF, ripristinando tutte le variabili e i metodi e ritornando al Schermata del menu.
riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Aggiungi il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
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!
