Share
In questo suggerimento rapido useremo il ColorMatrixFilter e BlurFilter per creare un effetto Motion Trail.
Abbiamo trovato questo fantastico autore grazie a FlashGameLicense.com, il posto dove comprare e vendere giochi Flash.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Crea un nuovo progetto in FlashDevelop (o qualsiasi editor che usi), imposta le dimensioni di swf su 600x400 e lo sfondo su nero (# 000000).
Quindi, per impostare la scena ne avremo due sprites, uno è per il display principale a cui aggiungeremo tutti gli oggetti di visualizzazione e l'altro è per l'effetto Motion Trail che utilizza il display principale come riferimento.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
E aggiungi il sprites al Palcoscenico.
// // Imposta display // Dobbiamo aggiungere i nostri due display allo stage addChild (_mtDisplay); addChild (_mainDisplay);
Ora stiamo per incorporare la nostra immagine stellare per l'uso, o se vuoi usare la tua immagine.
[Incorpora (source = '... / ... /images/star.png')] var star: Class;
L'ultima cosa che vogliamo fare per l'installazione è creare a ciclo continuo funzione. Questo verrà aggiornato ogni frame, per cose come il posizionamento e l'aggiornamento del Motion Trail. Quindi crea un'altra funzione e un listener di eventi per chiamarla ogni frame.
Il tuo Main.as la classe dovrebbe assomigliare a questo.
package rtmTrail import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite public function Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); funzione privata init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Carica immagini [Incorpora (source = '... / ... /images/star.png')] var star: Class; // // Imposta display // Dobbiamo aggiungere i nostri due display allo stage addChild (_mtDisplay); addChild (_mainDisplay); // Aggiungi un nuovo Listener di eventi per la nostra funzione di loop ogni volta che inseriamo // il frame per spostare gli sprite e aggiornare il nostro effetto MotionTrail addEventListener (Event.ENTER_FRAME, loop); private function loop (e: Event): void private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Per testare il Motion Trail ne creeremo dieci sprites dall'immagine della stella e posizionali in luoghi casuali. Inoltre stiamo andando a creare un Punto questo ci dice la velocità e la direzione in cui si muoveranno. La prima cosa da fare è crearne due Array per memorizzare queste informazioni; uno è per il folletto e l'altro è per il Punto.
private var _sprites: Array = new Array (); private var _spritesDir: Array = new Array (); private var _txt: TextField = new TextField ();
Aggiungi questo al dentro funzione per creare e posizionare in modo casuale dieci stelle.
// Disegna alcune stelle var spr: Sprite; var bmp: Bitmap; per (var i: int = 0; i < 10; i++) spr = new Sprite(); bmp = new star(); spr.addChild(bmp); bmp.smoothing = true; spr.x = Math.random() * 240 + 80; spr.y = Math.random() * 240 + 80; // We are going to add the new sprite into the _sprites Array and a // Point that tells us where to move the sprite in the _spritesDir Array. _sprites.push(spr); _spritesDir.push(new Point(Math.random() * 6, Math.random() * 6)); // Last thing to do is add it to our main Display _mainDisplay.addChild(spr);
Ora per creare il Campo di testo Aggiungi questo.
Accentsconagua
// Aggiungi un campo di testo troppo _txt.defaultTextFormat = new TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Real Time Motion Trail" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Ora dobbiamo trasferirci nel nostro ciclo continuo funzione per folletto controllo del movimento. Abbastanza semplice, usa a per loop per passare attraverso ciascuno folletto abbiamo e se colpisce il bordo inversa la xey del Punto quindi va nella direzione opposta. Dovremo anche spostare lo sprite nel loop per i valori nel file Punto e, per renderlo più interessante, ruotarlo lentamente.
loop di funzioni private (e: Event): void // Aggiorna le forme di sprite per (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; se (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Sposta la forma Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotate Sprite Shape _sprites [i] .rotation + = 2;
Per spostare il Campo di testo in alto a sinistra dobbiamo solo sottrarre dal X proprietà ogni fotogramma, e se esce dallo schermo riportarlo sul lato destro dello schermo.
loop di funzioni private (e: Event): void // Aggiorna le forme di sprite per (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; se (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Sposta la forma Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotate Sprite Shape _sprites [i] .rotation + = 2; // Sposta testo _txt.x - = 4 se (_txt.x < -200) _txt.x = 600;
Dopo averlo testato, avresti dovuto vedere qualcosa di simile (con le stelle e il testo che si muovono sullo schermo, ovviamente).
Ora è il momento di fare il nostro MotionTrail Classe. Ciò che questa classe sta per fare è prendere un DisplayObject che è disegnato per il proprio display (a folletto) e usando un paio di filtri, sbiaditi e sfocati.
Quindi fai il tuo nuovo MotionTrail.as Classe e lascia che si estenda il folletto Classe.
Per un po 'di pre-setup per i passi in arrivo creeremo alcune variabili, prima le _display per memorizzare un riferimento del display principale, a BitmapData attirare a, a Rettangolo la dimensione del palco e a Punto nell'angolo in alto a sinistra per i filtri. L'ultimo è un schieramento per il ColorMatrixFilter.
package rtmTrail import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.DisplayObject; import flash.display.Sprite; import flash.geom.Point; import flash.geom.Rectangle; public class MotionTrail estende Sprite public function MotionTrail (display: DisplayObject) // Riferimento al display utilizzato per il motion trail _display = display; // Crea un oggetto BitmapData da disegnare su // Se vuoi usare questo per il tuo progetto e le dimensioni non sono 600x400 //, dovresti cambiarlo qui e il rettangolo sotto _bitmapData = new BitmapData (600, 400 , vero, 0x000000); // Alcune cose per cui i filtri devono essere inseriti affinché funzioni _rect = new Rectangle (0, 0, 600, 400); _pnt = new Point (0, 0); _cMatrix = new Array (); // Aggiungi un po 'di trasparenza in modo da non distogliere l'attenzione dal Main Display alpha = 0.6; addChild (nuovo Bitmap (_bitmapData)); private var _display: DisplayObject; private var _bitmapData: BitmapData; private var _rect: Rectangle; private var _pnt: Point; private var _cMatrix: Array;
Dato che abbiamo fatto questo corso, dobbiamo tornare molto velocemente al _mtDisplay variabile e cambiarlo dal folletto Classe al MotionTrail Classe, insieme con l'inserimento del _mainDisplay variabile.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: MotionTrail = new MotionTrail (_mainDisplay);
Per creare il nostro Matrice per il ColorMatrixFilter, l'idea di base è di sfumare i colori in modo da ridurre lentamente tutti i valori a zero. Aggiungi questo al costruttore.
// Crea Matrix per ColorMatrixFilter _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Green _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // Alpha
Questo moltiplicherà ogni valore di ogni pixel per 0.92 e con ogni fotogramma diventerà sempre più piccolo fino a raggiungere il suo limite a 0. Quindi quanto più i valori sono vicini a 1,0 quanto più ci vuole per raggiungere lo zero, il che significa una traccia più lunga (e viceversa: più vicino a 0.0 più breve è il sentiero).
Ora creiamo il ColorMatrixFilter e il BlurFilter.
Il ColorMatrixFilter userà il schieramento abbiamo appena creato e ne creeremo due BlurFilters. L'ho trovato usando due BlurFilters dà un buon effetto a impulsi e non sfoca troppo lentamente o troppo velocemente, ma se preferisci avere uno che va bene anche tu.
Aggiungi prima le variabili per i filtri.
private var _cFilter: ColorMatrixFilter; private var _bFilter: BlurFilter; private var _bFilter2: BlurFilter;
Crea i filtri nel costruttore
_cFilter = new ColorMatrixFilter (_cMatrix); _bFilter = new BlurFilter (2, 2, 1); _bFilter2 = new BlurFilter (8, 8, 1);
Ora è il momento di creare una funzione per aggiornare i nostri Motion Trails. Crea una funzione chiamata aggiornare nel MotionTrail Classe. Per fare il percorso dobbiamo disegnare il Main Display al BitmapData ogni frame che rende l'effetto trail.
public function update (): void // Disegna visualizzazione su BitmapData _bitmapData.draw (_display);
Ora dovresti avere una pista se la esegui, ma ovviamente i Motion Trails svaniscono e lo faremo svanire con i filtri che abbiamo fatto nell'ultimo passaggio.
Ora possiamo applicare i filtri al BitmapData. Usiamo lo stesso BitmapData per la fonte, il _rect e _pnt variabili per il sourceRect e destPoint rispettivamente, e l'ultimo è il filtro che vogliamo applicare.
Dato che abbiamo alcuni filtri, non vogliamo applicarli tutti i fotogrammi perché farlo rallenterebbe troppo. Invece, stiamo per cambiare il ColorMatrixFilter e BlurFilter lavorare in diversi frame e cambiare il BlurFilters allo stesso modo.
Per cambiarli, avremo una variabile per tenere traccia del frame e usare l'operatore del modulo per verificare.
private var _count: Number = 0;
public function update (): void // Disegna visualizzazione su BitmapData _bitmapData.draw (_display); // Applica effetti a BitmapData if (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); else if (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); else _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Aumenta il conteggio _count ++;
Ora che il aggiornare la funzione è finita la aggiungiamo alla nostra ciclo continuo funzione.
// Aggiorna Motion Blur _mtDisplay.update ();
Eccezionale! Abbiamo finito con questo suggerimento rapido e puoi procedere e provarlo.
Dovresti avere ottenuto lo stesso risultato del campione swf e ora puoi provare ad estenderlo. Ci sono molti effetti diversi che puoi fare, soprattutto se conosci il ColorMatrixFilter.
Ad esempio, puoi sfumare il colore della traccia in rosso in questo modo:
// Offset Valore rosso di 30 ogni volta _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Green _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) // Alpha
Oppure puoi anche cambiare i colori rendendo tutte le tracce blu:
// Solo tracce blu _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0, 0, 0]) // Green _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Grazie per aver letto. Spero che tutti voi abbiate imparato qualcosa da questo e che si rivelerà utile in futuro, probabilmente un nuovo fantastico gioco che usa questo effetto.
