Share
In questo tutorial, costruiremo un semplice gioco "keepy-uppy". Clicca il frisbee per spedirlo verso il cielo, quindi giralo con il mouse per impedirlo di cadere a terra! Raccogli i power-up per cambiare la dimensione del disco.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Usando elementi grafici pre-creati creeremo un'interfaccia piacevole che sarà alimentata da diverse classi ActionScript 3.
L'utente sarà in grado di spostare un personaggio attraverso il palco, raccogliere elementi di aggiornamento e battere la gravità, è possibile modificare i valori 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 dall'aspetto colorato, che include più forme, pulsanti e altro.
La maggior parte della grafica che abbiamo utilizzato è stata creata in tutorial precedenti, quindi non sarà necessario includerne la creazione.
L'immagine sopra mostra il Nomi di istanza usato nel MovieClip. Quelli che iniziano con a Lettera maiuscola siamo Nomi di classi di libreria e non dovrebbe essere sul palco, ci sono anche due clip di nuvole sopra questa grafica, sono chiamate nuvole e clouds2.
Useremo un motore di interpolazione diverso dal predefinito incluso nel flash, questo aumenterà le prestazioni e sarà più facile da usare.
Puoi scaricare TweenNano dal suo sito ufficiale. Scopri come aggiungerlo al tuo progetto qui.
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.MouseEvent; import flash.events.Event; import flash.net.navigateToURL; import flash.net.URLRequest; import com.greensock.TweenNano; import com.greensock.easing.Elastic; 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, alcuni dei loro nomi sono auto spieganti quindi non ci sarà alcun commento lì.
private var firsttime: Boolean = true; gravità var privata: int = 2; private var throwSpeed: int; private var xMouse: int; private var xSpeed: int; private var topHeight: int = 40; private var top: Boolean; punteggio var privato: int = 0; private var scoreVal: int = 1; timer var privato: Timer = new Timer (10000); private var cancelBonus: Timer = new Timer (3000); upgrade di private var: Sprite;
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 eseguita usando la classe! Document.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica Main (): void addGameListeners ();
In questa funzione aggiungiamo i primi ascoltatori di giochi necessari per iniziare il gioco. Abbiamo anche impostato il buttonMode proprietà del Frisbee su true (questo mostrerà il cursore della mano al passaggio del mouse) e nasconderà l'indicatore di posizione.
funzione privata addGameListeners (): void frisbee.addEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.buttonMode = true; indicator.visible = false;
La prima mossa del frisbee attiverà i timer che si occupano degli aggiornamenti e chiamerà il aggiornare funzione che è la funzione principale del gioco.
funzione privata launchFrisbee (e: MouseEvent): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, launchFrisbee); frisbee.addEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.addEventListener (Event.ENTER_FRAME, update); timer.addEventListener (TimerEvent.TIMER, showUpgrade); timer.start (); xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0;
Questa funzione ripristina le variabili utilizzate per far muovere e cadere il frisbee; viene eseguito ogni volta che si fa clic sul frisbee.
funzione privata throwFrisbee (e: MouseEvent): void xSpeed = 0; xMouse = frisbee.mouseX; throwSpeed = 0; top = falso;
Una funzione temporizzata gestirà le bolle di aggiornamento. Il timer è stato impostato nella dichiarazione delle variabili per avere un intervallo di 10 secondi. La prima cosa da fare è controllare una bolla precedente sullo schermo e rimuoverla se ce n'è una.
funzione privata showUpgrade (e: TimerEvent): void / * Rimuovi precedente sprite * / if (upgrade! = null) removeChild (upgrade); upgrade = null;
Gli aggiornamenti sono bolle che appaiono sullo schermo che daranno al giocatore abilità o miglioramenti speciali.
Il codice seguente calcola un numero casuale (può essere 0 o 1) e crea un'istanza del doppio punto di aggiornamento se il numero è 0.
var randomNumber: int = Math.floor (Math.random () * 2); if (randomNumber == 0) upgrade = new Double (); upgrade.name = 'd';
Se il numero calcolato è 1, l'aggiornamento grande frisbee viene aggiunto allo stage. Viene dato un nome agli aggiornamenti per determinare il valore quando viene colpito.
else upgrade = new Big (); upgrade.name = 'b'; upgrade.x = Math.floor (Math.random () * stage.stageWidth); // fornisce una posizione x random addChild (upgrade);
Un'altra funzione a tempo.
Questo sarà chiamato quando il giocatore palio la bolla di aggiornamento, contando 3 secondi per terminare l'effetto di aggiornamento.
private function cancelUpgrade (e: TimerEvent): void cancelBonus.stop (); cancelBonus.removeEventListener (TimerEvent.TIMER, cancelUpgrade); scoreVal = 1; // cancel double points scoreTF.textColor = 0xffffff; frisbee.scaleX = 1; // Restituisce la scala al normale frisbee.scaleY = 1;
La funzione principale del gioco, gestirà le collisioni con le pareti, gli aggiornamenti e il movimento di frisbee ogni fotogramma. Essendo una funzione così importante ed estesa, daremo un'occhiata alla prossima parte di questo tutorial di gioco.
aggiornamento della funzione privata (e: Event): void
Aggiungi il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
La funzione principale del gioco, gestirà le collisioni con le pareti, gli aggiornamenti e il movimento di frisbee ogni fotogramma, imparerà come funziona nei prossimi passi.
aggiornamento della funzione finale privata (e: Event): void
Il frisbee verrà spostato usando il valore throwSpeed. Questo valore cambierà più avanti nel codice per far salire il frisbee, quando questa variabile è 0, la gravità si muoverà verso il basso il frisbee.
frisbee.y - = throwSpeed;
Il seguente codice controlla se il frisbee ha raggiunto il punto più alto consentito, in caso contrario la variabile throwSpeed aumenta per farlo salire. Allo stesso tempo la gravità viene applicata alla variabile causando alla fine la perdita del suo valore positivo e facendo cadere il frisbee.
if (throwSpeed> = topHeight) top = true; if (throwSpeed < topHeight && !top) throwSpeed += 5; if(throwSpeed <= 0) throwSpeed = 0; throwSpeed -= gravity; frisbee.y += gravity * 3;
Il movimento x del frisbee viene calcolato in base all'area in cui il giocatore fa clic.
if (xmouse < frisbee.width * 0.5) frisbee.x += xSpeed; //click the left side, so move it right if(xMouse > frisbee.width * 0.5) frisbee.x - = xSpeed; // fai clic sul lato destro, quindi spostalo a sinistra
xSpeed è il valore che fa muovere il frisbee a sinistra o a destra.
Questo codice rallenta questo movimento sottraendo il suo valore fino a raggiungere l'altezza massima.
if (xSpeed < topHeight * 0.01 && !top) xSpeed += 1; if(xSpeed <= 0) xSpeed = 0;
Fermiamoci qui per fare un test rapido e assicurarci che il nostro codice funzioni:
Per simulare il movimento di frisbee ruotiamo il un lettera al suo interno (Questo è un filmato all'interno del clip filmato di Frisbee, che ha un nome dell'istanza di una lettera.)
frisbee.aLetter.rotationZ + = 50;
Il punteggio aumenta quando il frisbee lascia il palco e per quando è invisibile al giocatore. Se lo fai clic più vicino alla cima, il punteggio ottenuto sarà più alto.
if (frisbee.y < 0) score += scoreVal; scoreTF.text = String(score);
Questo indicatore segue la posizione x del frisbee mentre non è in scena.
indicator.visible = true; indicator.x = frisbee.x + (frisbee.width * 0.5);
Il prossimo codice sposta lo sfondo iniziale (se non è stato cancellato) e le nuvole che saranno riutilizzate nel gioco.
if (bg! = null) bg.y + = throwSpeed; clouds.y + = throwSpeed; clouds2.y + = throwSpeed;
Il primo sfondo apparirà solo all'inizio del gioco, quindi verrà cancellato quando il giocatore non potrà più vederlo.
if (bg! = null && bg.y> stage.stageHeight) removeChild (bg); bg = null;
Gli sfondi delle nuvole appariranno per tutto il tempo durante la durata del gioco. Quando uno sfondo non è più visibile, la sua posizione viene ripristinata.
if (clouds.y> stage.stageHeight) clouds.y = -280; if (clouds2.y> stage.stageHeight) clouds2.y = -280;
Fermiamoci ancora una volta per fare un test rapido e assicurarci di avere punteggio, indicatore, rotazione, nuvole e aggiornamenti in loop (sebbene non facciano ancora niente?):
я
I punti doppi vengono aggiunti al punteggio quando il 2x l'aggiornamento è attivo, cambiamo anche il colore del campo del punteggio per rendere più visibile la modifica.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'd') removeChild (upgrade); upgrade = null; scoreVal = 2; scoreTF.textColor = 0xf3ba35; cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
Quando il giocatore afferra il grande bolla, la scala di frisbee aumenta di 1, rendendo più facile fare clic.
if (upgrade! = null && frisbee.hitTestObject (upgrade) && upgrade.name == 'b') removeChild (upgrade); upgrade = null; frisbee.scaleX = 2; frisbee.scaleY = 2;
L'aggiornamento corrente sarà attivo solo per 3 secondi, quando passa quel tempo, i suoi poteri vengono annullati.
cancelBonus.addEventListener (TimerEvent.TIMER, cancelUpgrade); cancelBonus.start ();
La difficoltà del gioco è la gravità, questo codice cambia la gravità in base al punteggio. Quando il punteggio raggiunge 100 la gravità aumenta di 0,5.
se (punteggio> = 100 && punteggio < 102) gravity += 0.5;
Pareti invisibili sono usate sui lati per impedire che il frisbee vada fuori scena.
if (frisbee.x <= 0)//Left frisbee.x = 0; else if(frisbee.x >= (stage.stageWidth - frisbee.width)) // Right frisbee.x = (stage.stageWidth - frisbee.width);
Se il frisbee cade fino in fondo, il gioco è finito.
if (frisbee.y> stage.stageHeight) gameOver ();
Il prossimo codice disabilita tutti gli eventi del mouse e arresta il timer, questo impedirà al gioco di svolgere attività indesiderate.
private final function gameOver (): void frisbee.removeEventListener (MouseEvent.MOUSE_UP, throwFrisbee); stage.removeEventListener (Event.ENTER_FRAME, update); timer.stop (); timer.removeEventListener (TimerEvent.TIMER, showUpgrade);
Questa funzione interrompe il gioco e rivela il punteggio finale, inoltre aggiunge un ascoltatore del mouse per reimpostare il gioco quando viene cliccato.
var alert: AlertView = new AlertView (); alert.buttonMode = true; alert.x = stage.stageWidth * 0.5; alert.y = stage.stageHeight * 0.5; alert.scoreTF.text = scoreTF.text + '!'; alert.addEventListener (MouseEvent.MOUSE_UP, restart); addChild (allarme); TweenNano.from (alert, 0.7, y: -alert.height, ease: Elastic.easeOut);
La prossima funzione ricaricherà swf, riavvia qualsiasi variabile, metodo e tornerà alla prima schermata.
riavvio della funzione finale privata (e: MouseEvent): void navigateToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Sono stati fatti! Provalo:
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