Share
In questo Tutorial Premium imparerai a creare un divertente gioco retrò usando Flash e ActionScript 3.0. Guarda la demo: il risultato è basato sul classico Boxe per gli Atari.
Usando gli strumenti di disegno di Flash creeremo l'interfaccia grafica che sarà alimentata da diverse classi ActionScript 3.
Il giocatore sarà in grado di muoversi e combattere contro l'avversario entro il tempo stabilito.
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 dall'aspetto colorato, che include più forme, clip film e altro.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Un semplice rettangolo verde riempirà il palco.
Selezionare lo strumento Rettangolo (R) per creare un rettangolo 320x480px # 649428 e centrarlo nello stage.
'
Usando lo stesso strumento crea una serie di rettangoli # FF9A2E per costruire un anello 290x213px.
Per ottenere l'effetto pixel sui personaggi, usa lo strumento rettangolo per creare piccoli rettangoli e quadrati per abbinare l'immagine sopra. Ti potrebbe piacere scaricare questa immagine e metterla su un livello inferiore nella tua timeline, quindi posizionare dei rettangoli sopra di essa.
Tre campi di testo dinamici sono posizionati nello stage, saranno utilizzati come contatori di colpi e un timer. Controlla l'immagine qui sopra e posizionali di conseguenza.
Per utilizzare un carattere personalizzato in un campo di testo dinamico, è necessario prima incorporarlo.
Con il campo di testo selezionato, vai al pannello Proprietà e fai clic sul pulsante di incorporamento per visualizzare una finestra di dialogo in cui puoi selezionare i caratteri necessari utilizzati nel gioco. In alternativa, seleziona "Maiuscolo", "Minuscolo", "Numeri" e "Punteggiatura".
Converti le forme degli stage in MovieClip e dai loro i nomi delle istanze mostrati nell'immagine.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni oltre ad essere 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.utils.Timer; import flash.events.TimerEvent; import flash.events.KeyboardEvent; import flash.events.Event; import com.greensock.TweenNano; import flash.events.MouseEvent; 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 auto-esplicativi quindi non ci saranno commenti lì.
timer var privato: Timer = new Timer (1000); // usato per diminuire il tempo private var min: int = 2; // minuti totali di combattimento private var secs: int = 0; // starting seconds private var moveLeft: Boolean = false; // i successivi vars sono usati per muovere il giocatore in modo fluido var varaleRight: Boolean = false; private var moveUp: Boolean = false; private var moveDown: Boolean = false; private var eTimer: Timer = new Timer (50); // il ritardo del movimento nemico
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 viene eseguito quando il file SWF è caricato se parte della classe theDocument.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica finale Main (): void // code?
Inizieremo chiamando la funzione addListeners e interrompendo le animazioni dei personaggi.
addListeners (); / * Stop MovieClip * / player.stop (); enemy.stop ();
Successivamente aggiungiamo la chiave necessaria e gli ascoltatori di enterframe.
funzione finale privata addListeners (): void stage.addEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.addEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.addEventListener (KeyboardEvent.KEY_DOWN, hit); stage.addEventListener (KeyboardEvent.KEY_UP, resetHit); stage.addEventListener (Event.ENTER_FRAME, update);
? Seguito dai timer richiesti:
/ * Timers * / timer.addEventListener (TimerEvent.TIMER, updateCounter); timer.start (); eTimer.addEventListener (TimerEvent.TIMER, enemyUpdate); eTimer.start ();
Questa funzione viene eseguita ogni secondo, gestisce il timer sul palco.
private final function updateCounter (e: TimerEvent): void / * Riduci il tempo * / secs--; se (sec < 0) secs = 59; min--; if(min == 0 && secs == 0) //remove listeners if out of time removeListeners();
Aggiungeremo 0 alla sinistra dei secondi se il numero è inferiore a 10 (quindi il timer avrà sempre due cifre).
/ * Orologio a due cifre * / var s: String = "; if (String (secs) .length == 1) s = '0'; else s ="; time.text = String (min) + ':' + s + String (secs);
Qui rileviamo il tasto premuto e modifichiamo la variabile di conseguenza. Potremmo spostare il giocatore usando questa stessa funzione, ma il movimento non sarà fluido come se avessimo usato un evento enterframe.
funzione finale privata movePlayer (e: KeyboardEvent): void / * Movement * / if (e.keyCode == 37) moveRight = false; moveLeft = true; else if (e.keyCode == 39) moveLeft = false; moveRight = true; if (e.keyCode == 38) moveDown = false; moveUp = true; else if (e.keyCode == 40) moveUp = false; moveDown = true;
Questa funzione rileva il tasto rilasciato per fermare il movimento del giocatore.
funzione finale privata stopPlayer (e: KeyboardEvent): void if (e.keyCode == 37) moveLeft = false; else if (e.keyCode == 39) moveRight = false; if (e.keyCode == 38) moveUp = false; else if (e.keyCode == 40) moveDown = false; if (e.keyCode == 90 || e.keyCode == 88) player.gotoAndStop (1);
Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice di gioco funzioni.
Aggiungi il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
Ora provalo. Il timer dovrebbe contare il conto alla rovescia e le immagini dovrebbero apparire, ma il movimento non funzionerà ancora:
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.
Questa funzione cambia il frame nel Movie Clip del giocatore nel frame di attacco.
hit della funzione finale privata (e: KeyboardEvent): void if (e.keyCode == 90) // Z key stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = 1; player.gotoAndPlay (2); else if (e.keyCode == 88) // X key stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); player.scaleY = -1; // cambia la scala per usare altro braccio player.gotoAndPlay (2);
Ferma gli attacchi del giocatore.
funzione finale privata resetHit (e: KeyboardEvent): void if (e.keyCode == 90 || e.keyCode == 88) stage.addEventListener (KeyboardEvent.KEY_DOWN, hit);
Una delle funzioni principali della classe contiene il codice logico che verrà eseguito su enterframe. Ho suddiviso la spiegazione tra i prossimi passi.
aggiornamento della funzione finale privata (e: Event): void
Controlla le variabili di movimento per spostare il giocatore.
/ * Controlli * / if (moveLeft) player.x - = 4; else if (moveRight) player.x + = 4; if (moveUp) player.y - = 4; else if (moveDown) player.y + = 4;
Impedire al giocatore di lasciare l'anello.
/ * Bordi giocatore * / if (player.hitTestObject (topWall)) player.y = topWall.y + topWall.height + player.height * 0.5; else if (player.hitTestObject (bottomWall)) player.y = bottomWall.y - player.height * 0.5 - bottomWall.height; if (player.hitTestObject (leftWall)) player.x = leftWall.x + leftWall.width + player.width * 0.5; else if (player.hitTestObject (rightWall)) player.x = rightWall.x - player.width * 0.5;
Impedisci al nemico di lasciare l'anello.
/ * Bordi nemici * / if (enemy.hitTestObject (topWall)) enemy.y = topWall.y + topWall.height + enemy.height * 0.5; else if (enemy.hitTestObject (bottomWall)) enemy.y = bottomWall.y - enemy.height * 0.5 - bottomWall.height; if (enemy.hitTestObject (leftWall)) enemy.x = leftWall.x + leftWall.width + enemy.width * 0.5; else if (enemy.hitTestObject (rightWall)) enemy.x = rightWall.x - enemy.width * 0.5;
I personaggi vengono respinti se si verifica una collisione (non attaccando).
/ * Hit * / if (player.hitTestObject (nemico)) player.x = player.x - 5; enemy.x = enemy.x + 5;
Facciamo un'altra pausa per vedere come funziona il nostro codice a questo punto. Usa i tasti freccia per muoverti e Z / X per colpire:
Un colpo verrà aggiunto al segnalino quando il giocatore / pugno nemico colpisce la testa del nemico / giocatore.
/ * Head Hit * / if (player.currentFrame! = 1 && player.fist.hitTestObject (enemy.head)) playerHits.text = String (int (playerHits.text) + 1); player.x = enemy.x - player.width - 26; if (enemy.currentFrame! = 1 && enemy.fist.hitTestObject (player.head)) enemyHits.text = String (int (enemyHits.text) + 1); enemy.x = player.x + enemy.width + 26;
La seconda funzione principale, questa volta gestisce l'IA nemica.
funzione finale privata enemyUpdate (e: TimerEvent): void
Queste linee controllano il movimento nemico.
/ * Movimento nemico * / se (nemico.x> giocatore.x + 40) nemico.x - = 4; if (enemy.x < player.x) enemy.x += 4; if(enemy.y > player.y) enemy.y - = 4; if (enemy.y < player.y) enemy.y += 4;
Questo codice gestisce l'attacco del nemico. Praticamente controlla la sua posizione e fa pugni quando il pugno può colpire la testa del giocatore.
/ * Attacco nemico * / se (nemico.y> giocatore.y + 10 && nemico.y < player.y + 21) enemy.scaleY = 1; enemy.gotoAndPlay(2); else if(enemy.y < player.y - 10 && enemy.y > player.y - 21) enemy.scaleY = -1; enemy.gotoAndPlay (2); else if (player.x - enemy.x> = -40 && player.x - enemy.x <= -30) enemy.gotoAndPlay(2); else enemy.gotoAndStop(1);
Gli ascoltatori saranno rimossi quando il tempo è finito.
private final function removeListeners (): void stage.removeEventListener (KeyboardEvent.KEY_DOWN, movePlayer); stage.removeEventListener (KeyboardEvent.KEY_UP, stopPlayer); stage.removeEventListener (KeyboardEvent.KEY_DOWN, hit); stage.removeEventListener (KeyboardEvent.KEY_UP, resetHit); stage.removeEventListener (Event.ENTER_FRAME, update);
? Come faranno i timer.
/ * Stop Timers * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, updateCounter); eTimer.stop (); eTimer.removeEventListener (TimerEvent.TIMER, enemyUpdate); enemy.gotoAndStop (1); showAlert ();
Dopo questo viene mostrato un avviso, questo codice crea un'istanza dell'avviso.
funzione finale privata showAlert (): void var alert: AlertView = new AlertView (); alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5;
Per visualizzare il testo corretto nell'avviso, controlliamo i contatori per determinare il risultato.
/ * Controlla la vittoria o la sconfitta in base agli hit * / if (int (playerHits.text)> int (enemyHits.text)) alert.msg.text = 'vinci!'; else if (int (playerHits.text) < int(enemyHits.text)) alert.msg.text = 'you lose!'; else alert.msg.text = 'draw!'; TweenNano.from(alert, 0.3, scaleX: 0.5, scaleY: 0.5); alert.addEventListener(MouseEvent.MOUSE_UP, restart); addChild(alert);
La prossima funzione ricaricherà il SWF, ripristinando tutte le variabili e ritornando 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 verificare che tutto funzioni come previsto.
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!
Accentsconagua