Share
In questo suggerimento rapido imparerai come usare BitmapData copyPixels () metodo per creare un effetto di traccia sfocata molto veloce per i proiettili nei tuoi giochi sparatutto.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Usa i tasti freccia o WASD per spostare la nave e colpisci la barra spaziatrice per sparare proiettili verso il cursore del mouse.
Passeremo rapidamente (molto rapidamente) all'idea di base utilizzata in blitting prima di andare avanti, poiché la useremo in questo suggerimento rapido.
Copiare i pixel sullo schermo è il cuore del blitting. In AS3, è fatto copiando una regione rettangolare di pixel di a BitmapData ad un altro BitmapData, utilizzando BitmapData.copyPixels ().
L'immagine sopra illustra esattamente questo. Copiamo i pixel di una regione rettangolare da a BitmapData e mettilo in un altro.
L'idea che esploreremo in questo suggerimento rapido è copiare tutto ciò che ha bisogno di un effetto sfocato applicato in un contenitore e applicare effetti post-blitting per creare l'effetto che vogliamo.
Esiste già un codice molto semplice per uno sparatutto spaziale già fatto nei file sorgente, poiché questo non è l'obiettivo di questo post. C'è solo una nave che si muove con i tasti freccia o WASD. Il codice è molto commentato ed è molto semplice, quindi probabilmente non avrete problemi a capirlo. Usa immagini incorporate per le immagini nel tuo gioco, ma puoi anche usare gli sprite con una leggera svolta su una funzione che creeremo in seguito (ne discuteremo tra un momento).
Entriamo Main.as e creare a Bitmap che conterrà ogni proiettile e oggetto che deve essere sfocato. Aggiungilo prima di qualsiasi altra cosa nella lista dei bambini.
private var _container: Bitmap; private var _containerData: BitmapData; funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Creazione della nave giocatore e del vettore che conterrà i proiettili _playerShip = new PlayerShip (); _bullets = new Vector.(); // // Inizializzazione del contenitore _containerData = new BitmapData (550, 400, true, 0xFFFFFFFF); _container = new Bitmap (_containerData); // addChild (_container); addChild (_playerShip); // Listener per il ciclo di gioco addEventListener (Event.ENTER_FRAME, onEnterFrame);
Finora, tutto è stato molto semplice. Abbiamo solo creato il contenitore e aggiunto all'elenco di visualizzazione.
In questo passaggio ciò che dobbiamo fare è disegnare i proiettili nel contenitore ogni fotogramma. Lo faremo nel onEnterFrame () funzione del Principale classe.
funzione privata onEnterFrame (e: Event): void _playerShip.update (); // Aggiornamento di ogni punto elenco per (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); //
L'unica linea che conta è la linea 10. In quella linea, disegniamo i pixel di ogni proiettile (accedendo al BitmapData del figlio del proiettile, che è il BitmapData contenente i pixel dell'immagine incorporata) nella loro posizione. Se non stai usando immagini incorporate nel tuo gioco, puoi usare BitmapData.draw () anziché. Questo metodo è un po 'più lento, ma funzionerà allo stesso modo.
Passiamo l'intero rettangolo del proiettile BitmapData perché vogliamo disegnare tutto. Puoi giocare con questo rettangolo e la posizione da disegnare per creare risultati molto divertenti (ad esempio, una posizione basata su una funzione periodica come Math.sin () per creare un effetto trail interessante, anche se il proiettile va solo in linea retta, o solo disegnando il "fuoco" di un proiettile di razzi passando un rettangolo più piccolo per creare il percorso solo con lo sparo).
Quando compili ed esegui il tuo gioco, otterrai qualcosa di simile dopo aver sparato alcuni proiettili:
Tuttavia, non è quello che vogliamo veramente. Vogliamo aggiungere un effetto di traccia sfocata, quindi cosa fare?
Questo è l'ultimo passo. Tutto quello che ci resta da fare è applicare l'effetto sfocatura nel BitmapData che contiene tutte le immagini dai proiettili. Per fare ciò, useremo a ColorMatrixFilter.
private var _colorMatrixFilter: ColorMatrixFilter; funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Creazione della nave giocatore e del vettore che conterrà i proiettili _playerShip = new PlayerShip (); _bullets = new Vector.(); // // Inizializzazione del contenitore _containerData = new BitmapData (550, 400, true, 0); _container = new Bitmap (_containerData); // // Inizializzazione del filtro matrix _colorMatrixFilter = new ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,99, 0]); // addChild (_container); addChild (_playerShip); // Listener per il ciclo di gioco addEventListener (Event.ENTER_FRAME, onEnterFrame); private function onEnterFrame (e: Event): void _playerShip.update (); // Aggiornamento di ogni punto elenco per (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); // // Adding the blur effect on the container _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), new BlurFilter(2, 2, 1)); _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), _colorMatrixFilter); //
Il ColorMatrixFilter funziona manipolando ogni pixel nel BitmapData in base ai valori nel filtro matrix. Dai un'occhiata al dentro() funzione. Creiamo un nuovo ColorMatrixFilter lì dentro, passando un array con un gruppo di valori in esso. Questi valori creeranno la matrice di trasformazione del filtro matrix, consentendoci di manipolare i pixel nell'immagine.
Il filtro funziona fondamentalmente in questo modo: ogni componente del colore risultante (rosso, verde, blu e alfa) viene calcolato moltiplicando le componenti di origine per i rispettivi numeri nella rispettiva riga della matrice e sommandole, insieme al quinto valore della fila.
Ad esempio, se prendiamo il filtro matrix che abbiamo creato nel codice come nostro filtro matrix di esempio e lo applichiamo a un pixel con i valori "rosso = 50, verde = 10, blu = 200, alfa = 128", la componente rossa risultante del pixel sarà"rosso = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50", perché la prima riga della nostra matrice è"1 0 0 0 0"Il componente alfa sarà"alfa = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0.99) + 0 = 126", perché l'ultima riga della nostra matrice è"0 0 0 0,99 0".
Vedi cosa succede ora? Ogni fotogramma moltiplichiamo l'alfa di ogni pixel di 0,99, rendendolo leggermente più trasparente, al fine di creare l'effetto di scia. Se desideri saperne di più sul ColorMatrixFilter, puoi fare riferimento alla documentazione.
L'effetto sfocatura è curato applicando un semplice BlurFilter nel BitmapData.
Compila ora il gioco e otterrai l'effetto desiderato!
Hai appena imparato come applicare un ColorMatrixFilter al fine di creare un effetto di traccia sfocata, utilizzando il molto veloce BitmapData.copyPixels () metodo! Con questo, puoi aggiungere l'effetto sfocatura a ogni oggetto che desideri e non preoccuparti del rallentamento di Flash Player perché stai aggiungendo troppi bambini con i filtri sfocatura sullo stage. Un sacco di cose interessanti possono essere costruite con questo principio; devi solo essere creativo.
Grazie per aver letto! Se avete domande, si prega di commentare!
Accentsconagua