Share
In questo tutorial Premium, costruiremo un gioco Breakout; "Brick Breaker" da zero utilizzando Flash e AS3.
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 giocare attraverso una serie di livelli, puoi facilmente aggiungere tutti i livelli che vuoi!
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 e di bell'aspetto. Conterrà più forme, pulsanti, bitmap e altro ancora.
Passiamo direttamente alla creazione di questa GUI.
Questa è la schermata principale o la vista, sarà la prima immagine che apparirà nel nostro gioco.
Crea un rettangolo 320x480 e riempilo con questo gradiente radiale: # 3A9826, # 102A07.
Daremo un po 'più di dettaglio aggiungendo un filtro di Photoshop, se non hai Photoshop puoi provare ad aggiungere un bell'effetto usando gli strumenti di Flash.
Apri l'immagine in Photoshop e vai a Filtri> Texture> Patchwork, utilizzare le seguenti impostazioni:
Finirai con qualcosa di simile a questo:
Questo sfondo sarà sul palco così come gli indicatori di paddle, palla e testo. Converti lo sfondo in a Un filmato e nominalo bg.
Seleziona lo Strumento Testo (T), seleziona un font adatto e scrivi il titolo del gioco. Ho usato questo formato: Akashi, 55pt, # FFCC33.
Seleziona il campo di testo e utilizza il pannello Filtri per aggiungere un'ombra esterna:
Duplica il testo (Cmd + D) e spostalo di 3px verso l'alto per dargli un po 'di rilievo.
Convertire la grafica in a Un filmato e nominalo schermata MENU, ricorda di segnare il Esporta per ActionScript scatola. È possibile eliminare questo dallo stage al termine, come verrà chiamato utilizzando AS3.
Usa lo Strumento Rettangolo Primitivo (R) per creare un rettangolo tondo di 57x11,5 px, modifica il raggio dell'angolo a 10 e applica questo gradiente: # 4E4E4E, #BABABA, # B0B3BA.
Aggiungi alcune linee di dettaglio con lo strumento Rettangolo, usa il tuo stile personale!
Puoi anche aggiungere un po 'di colore alla tua racchetta, ecco il risultato finale della mia, il colore usato è: # CC0000.
Convertire la grafica in a Un filmato e nominalo pagaia.
Per creare la palla, seleziona lo Strumento Ovale (O) e usalo per creare un cerchio 12x12px, #CCCCCC.
Duplica il cerchio (Cmd + D) cambiandone le dimensioni a 10x10px e riempilo con questo gradiente radiale: # 95D4FF, # 0099FF.
Infine, taglia il secondo cerchio a metà e usa lo strumento Selezione (V) per formare una curva nella parte inferiore. Cambia il suo colore con un gradiente lineare bianco con alfa 60, 10.
Convertire la grafica in a Un filmato e nominalo palla.
Il nostro mattone sarà molto semplice.
Utilizzare lo strumento Rettangolo per creare un rettangolo di 38 x 18 px e applicare il gradiente successivo: # CC0000, # 8E0000, # FF5656.
Converti il rettangolo in un MovieClip e applica il filtro ombra utilizzato nel testo del titolo per dargli un aspetto più gradevole.
Converti nuovamente l'immagine in a Un filmato e nominalo mattone, ricorda di segnare il Esporta per ActionScript scatola.
La schermata Informazioni mostrerà i crediti, l'anno e il copyright del gioco.
Sarà piuttosto semplice da creare poiché abbiamo già tutti gli elementi in esso utilizzati.
Convertire la grafica in a Un filmato e nominalo AboutScreen, ricorda di segnare il Esporta per ActionScript scatola.
Questa è la schermata di gioco, sarà sul palco dall'inizio e conterrà gli indicatori di paddle, palla, sfondo e testo. (Aggiungeremo i mattoni usando il codice.)
I nomi delle istanze sono abbastanza semplici e auto esplicativi: pagaia, palla, bg, punteggioTF, viveTF e levelTF.
Per utilizzare dinamicamente il carattere personalizzato, è necessario incorporarlo nell'applicazione.
Seleziona un campo di testo dinamico e fai clic su Incorporare? pulsante nel Pannello Proprietà.
Seleziona / aggiungi tutti i caratteri necessari e clicca ok.
Questa schermata apparirà quando il gioco è stato deciso; o vinci, perdi o raggiungi la partita (vincendo tutti i livelli o perdendo tutte le vite).
In questa vista vengono utilizzati due campi di testo dinamici, che visualizzeranno lo stato attuale del gioco più un breve messaggio. I campi di testo sono nominati titleTF e msgTF.
Convertire la grafica in a Un filmato e segnare il Esporta per ActionScript box, imposta il nome della classe su AlertScreen.
Questo termina la parte grafica, quindi inizia l'ActionScript!
Useremo un motore di interpolazione diverso dal predefinito incluso nel 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 flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.Event; import com.greensock.TweenNano; import com.greensock.easing.Circ;
Queste sono le variabili e le costanti che useremo, leggere i commenti nel codice per scoprire di più su di loro.
const privato BRICK_W: int = 39; // brick's width const privato BRICK_H: int = 19; // brick's height const privato OFFSET: int = 6; // Un offset usato per centrare i mattoni private const W_LEN: int = 8; // la lunghezza dei livelli, solo 8 mattoni orizzontali dovrebbero essere creati sul palco privato const SCORE_CONST: int = 100; // l'ammontare da aggiungere al punteggio quando viene colpito un mattoncino privato: Vector.= nuovo vettore. (); // memorizza tutti i mattoni private var xSpeed: int = 5; private var ySpeed: int = -5; private var xDir: int = 1; // x direction private var yDir: int = 1; private var gameEvent: String = "; // memorizza eventi come win, lose, gameover private var currentLevel: int = 0; private var menuScreen: MenuScreen; // un'istanza della schermata del menu private var aboutScreen: AboutScreen; private var alertScreen: AlertScreen; private var lives: int = 3; private var levels: Array = []; // memorizza i livelli
Tutti i nostri livelli saranno archiviati in array multidimensionali.
Questi sono array contenenti array; puoi scriverli in una sola riga, ma se li alline puoi effettivamente vedere il modulo che il livello prenderà.
const privato LEVEL_1: Array = [[0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0], [0,0,0, 1,1,0,0,0], [0,0,0,1,1,0,0,0], [0,1,1,1,1,1,1,0], [0, 1,1,1,1,1,1,0], [0,0,0,1,1,0,0,0], [0,0,0,1,1,0,0,0] [0,0,0,0,0,0,0,0]]; // questo forma un segno +! const privato LEVEL_2: Array = [[0,0,0,0,0,0,0,0], [0,0,0,1,1,0,0,0], [0,0,1, 0,0,1,0,0], [0,0,0,0,0,1,0,0], [0,0,0,0,1,0,0,0], [0, 0,0,1,0,0,0,0], [0,0,1,0,0,0,0,0], [0,0,1,1,1,1,0,0] ,]; // questo costituisce un numero 2!
In questi livelli il 1s rappresentano lo spazio nel palcoscenico in cui verrà posizionato un mattone, e il 0s sono solo uno spazio vuoto. Questi livelli verranno in seguito letti da una funzione che posizionerà i mattoni sul palco. Puoi aggiungere tutti i livelli che vuoi usando questa classe!
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 si esegue quando il gioco viene caricato, nel caso di una classe di documento).
Chiama le funzioni necessarie per iniziare il gioco. Dai un'occhiata a queste funzioni nei seguenti passaggi.
funzione pubblica finale Main (): void / * Aggiungi livelli * / levels.push (LEVEL_1, LEVEL_2); // aggiungiamo i livelli all'array per sapere quanti sono / * Schermata del menu, Pulsanti Listener * / menuScreen = new MenuScreen (); addChild (schermata MENU); menuScreen.startB.addEventListener (MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener (MouseEvent.MOUSE_UP, tweenMS);
Le righe successive gestiscono i pulsanti della schermata Menu e interpolano la visualizzazione Menu o About a seconda del pulsante premuto.
private final function tweenMS (e: MouseEvent): void if (e.target.name == 'startB') // se si fa clic sul pulsante di avvio TweenNano.to (menuScreen, 0.3, y: -menuScreen.height, facilità : Circ, onComplete: init); // schermata menu tween else // se si fa clic sul pulsante aboutScreen = new AboutScreen (); // aggiungi sullo schermo addChild (aboutScreen); TweenNano.from (aboutScreen, 0.3, x: stage.stageWidth, ease: Circ); // Interpolazione sullo schermo aboutScreen.addEventListener (MouseEvent.MOUSE_UP, hideAbout); // aggiungi un listener del mouse per rimuoverlo / * Rimuove About view * / private final function hideAbout (e: MouseEvent): void TweenNano.to (aboutScreen, 0.3, x: stage.stageWidth, facilità: Circ, onComplete : function rmv (): void aboutScreen.removeEventListener (MouseEvent.MOUSE_UP, hideAbout); removeChild (aboutScreen););
Questa funzione esegue le operazioni necessarie per iniziare il gioco, leggere i commenti nel codice per saperne di più.
funzione finale privata init (): void / * Schermata del menu Destroy * / menuScreen.startB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.removeEventListener (MouseEvent.MOUSE_UP, tweenMS); removeChild (schermata MENU); menuScreen = null; / * Hide Cursor * / Mouse.hide (); / * Build Level Bricks * / buildLevel (LEVEL_1); / * Start Listener * / bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
La Paddle sarà controllata dal mouse, seguirà la posizione del mouse x .
funzione finale privata movePaddle (e: MouseEvent): void / * Segui Mouse * / paddle.x = mouseX;
Per impedire che la paletta lasci il palco, creiamo confini invisibili ai lati dello schermo.
/ * Segui Mouse * / paddle.x = mouseX; / * Bordi * / if ((paddle.x - paddle.width / 2) < 0) paddle.x = paddle.width / 2; else if((paddle.x + paddle.width / 2) > stage.stageWidth) paddle.x = stage.stageWidth - paddle.width / 2;
I livelli saranno creati da questa funzione.
Usa un parametro per ottenere il livello da costruire, calcola le sue dimensioni ed esegue un ciclo forato annidato, con un ciclo per l'altezza e uno per la larghezza. Successivamente, crea una nuova istanza Brick che viene posizionata in base alla larghezza, all'altezza e al numero corrispondente a io e j.
Infine, il mattone viene aggiunto al mattoni vettore per accedervi al di fuori di questa funzione.
private final function buildLevel (level: Array): void / * Lunghezza del livello, altezza * / var len: int = level.length; per (var i: int = 0; i < len; i++) for(var j:int = 0; j < W_LEN; j++) if(level[i][j] == 1) var brick:Brick = new Brick(); brick.x = OFFSET + (BRICK_W * j); brick.y = BRICK_H * i; addChild(brick); bricks.push(brick);
Questa funzione aggiunge o rimuove il mouse e inserisce i listener del frame. Usa un parametro per determinare se gli ascoltatori dovrebbero essere aggiunti o rimossi: l'impostazione predefinita è Inserisci.
private final function gameListeners (action: String = 'add'): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.addEventListener (Event.ENTER_FRAME, update); else stage.removeEventListener (MouseEvent.MOUSE_MOVE, movePaddle); stage.removeEventListener (Event.ENTER_FRAME, update);
Il prossimo codice chiama il gameListeners () funzione per iniziare il gioco.
private final function startGame (e: KeyboardEvent): void bg.removeEventListener (MouseEvent.MOUSE_UP, startGame); gameListeners ();
La velocità della palla è determinata dal xSpeed e yspeed variabili, quando il aggiornare la funzione viene eseguita, la palla inizia a muoversi usando questi valori ogni fotogramma.
aggiornamento della funzione finale privata (e: Event): void / * Ball Movement * / ball.x + = xSpeed; ball.y + = ySpeed;
Questo codice controlla le collisioni tra la palla e le pareti.
/ * Collisione muro * / se (palla.x. < 0)ball.x = ball.x + 3;xSpeed = -xSpeed;;//Left if((ball.x + ball.width) > stage.stageWidth) ball.x = ball.x - 3; xSpeed = -xSpeed;; // Giusto se (ball.y < 0)ySpeed = -ySpeed;;//Up
Un'istruzione if viene usata per verificare quando la pagaia manca alla palla. Se è così, il giocatore perde una vita.
Accentsconagua
if (ball.y + ball.height> paddle.y + paddle.height) alert ('You Lose', 'Play Again?'); gameEvent = 'lose'; lives -; livesTF.text = String (lives );; // giù / perdere Quando la palla colpisce la paletta, la velocità è impostata su negativa per far alzare la palla. Controlliamo anche in quale lato della paletta la palla ha colpito per scegliere il lato dove si muoverà in seguito.
/ * Collisione della paletta, controlla il lato della paletta che colpisce la palla * / se (paddle.hitTestObject (palla) && (ball.x + ball.width / 2) < paddle.x) ySpeed = -5; xSpeed = -5; //left else if(paddle.hitTestObject(ball) && (ball.x + ball.width / 2) >= paddle.x) ySpeed = -5; xSpeed = 5; //destra
Noi usiamo a per e hitTest per verificare le collisioni dei mattoni, quando la palla colpisce un mattone, viene utilizzata la stessa tecnica utilizzata nella pagaia per determinare il lato che seguirà la palla.
/ * Collisione di mattoni * / per (var i: int = 0; i < bricks.length; i++) if(ball.hitTestObject(bricks[i])) /* Check the which side of the brick the ball hits, left, right */ if((ball.x + ball.width / 2) < (bricks[i].x + bricks[i].width / 2)) xSpeed = -5; else if((ball.x + ball.width / 2) >= (mattoni [i] .x + mattoni [i] .width / 2)) xSpeed = 5;
Il seguente codice modifica la direzione Y della pallina e rimuove il mattone dallo stage e dal vettore.
/ * Cambia la direzione y della pallina * / ySpeed = -ySpeed; removeChild (mattoni [i]); bricks.splice (i, 1);
Se vuoi, puoi cambiare questa logica in modo che la velocità y della palla sia invertita solo se colpisce la parte superiore o inferiore di un mattone e non quando colpisce i lati. Provalo e guarda cosa ne pensi.
Ogni colpo di mattone aggiungerà 100 al punteggio, il punteggio sarà preso dalla costante del punteggio e aggiunto al punteggio corrente usando int e Stringa funzioni. Questo codice controlla anche se non ci sono più mattoni nel vettore e visualizza un avviso se è così.
/ * Punteggio ++ * / scoreTF.text = String (int (scoreTF.text) + SCORE_CONST); / * Controlla se tutti i mattoni sono distrutti * / if (bricks.length < 1) alert('You Win!', 'Next Level ?'); gameEvent = 'win'; La schermata di avviso mostra le informazioni del giocatore sullo stato del gioco, viene mostrato quando viene raggiunto un evento di gioco, come perdere una vita o completare un livello.
In questa funzione vengono utilizzati due parametri:
avviso di funzione finale privata (t: String, m: String): void gameListeners ('remove'); Mouse.show (); alertScreen = new AlertScreen (); addChild (alertScreen); TweenNano.from (alertScreen.box, 0.3, scaleX: 0.5, scaleY: 0.5, facilità: Circ); alertScreen.box.titleTF.text = t; alertScreen.box.msgTF.text = m; alertScreen.box.boxB.addEventListener (MouseEvent.MOUSE_UP, restart); La funzione successiva controlla lo stato del gioco (vinci, perdi, finito) ed esegue un'azione in base ad esso.
riavvio privato della funzione finale (e: MouseEvent): void if (gameEvent == 'win' && levels.length> currentLevel + 1) // se il livello è chiaro ma rimangono più livelli currentLevel ++; changeLevel (levels [currentLevel]); // next level levelTF.text = 'Level' + String (currentLevel + 1); else if (gameEvent == 'win' && levels.length <= currentLevel+1) //if level is clear and no more levels are available alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Congratulations!'); gameEvent = 'finished'; else if(gameEvent == 'lose' && lives > 0) // se il livello è fallito ma vive> 0 changeLevel (levels [currentLevel]); // stesso livello else if (gameEvent == 'lose' && lives <= 0) //if level failed and no more lives left alertScreen.box.boxB.removeEventListener(MouseEvent.MOUSE_UP, restart); removeChild(alertScreen); alertScreen = null; alert('Game Over', 'Try Again!'); gameEvent = 'finished'; else if(gameEvent == 'finished') //reached when no more lives or levels are available /* Add menu screen */ menuScreen = new MenuScreen(); addChild(menuScreen); menuScreen.startB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); menuScreen.aboutB.addEventListener(MouseEvent.MOUSE_UP, tweenMS); TweenNano.from(menuScreen, 0.3, y: -menuScreen.height, ease: Circ); /* Reset vars */ currentLevel = 0; lives = 3; livesTF.text = String(lives); scoreTF.text = '0'; levelTF.text = 'Level ' + String(currentLevel + 1); xSpeed = 5; ySpeed = -5; clearLevel(); Questa funzione cambia al livello scritto nel parametro.
private final function changeLevel (level: Array): void / * Clear * / clearLevel (); / * Ridisegna i mattoni * / buildLevel (livello); / * Start * / Mouse.hide (); bg.addEventListener (MouseEvent.MOUSE_UP, startGame);
Una funzione per cancellare i mattoni rimanenti e gli avvisi dal palco. Inoltre, ripristina la posizione della paletta e della palla.
private final function clearLevel (): void / * Remove Alert Screen * / alertScreen.box.boxB.removeEventListener (MouseEvent.MOUSE_UP, restart); removeChild (alertScreen); alertScreen = null; / * Clear Level Bricks * / var bricksLen: int = bricks.length; per (var i: int = 0; i < bricksLen; i++) removeChild(bricks[i]); bricks.length = 0; /* Reset Ball and Paddle position */ ball.x = (stage.stageWidth / 2) - (ball.width / 2); ball.y = (paddle.y - paddle.height) - (ball.height / 2) -2; paddle.x = stage.stageWidth / 2;
Faremo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo QuickTip.
Il risultato finale è un gioco personalizzabile e divertente, prova ad aggiungere grafica e livelli personalizzati!
Spero che questo tutorial di Active Premium ti sia piaciuto, grazie per la lettura!
