Share
I denna Snabba Tips ska vi använda Colormatrixfilter och BlurFilter för att skapa en Motion Trail-effekt.
Vi hittade denna fantastiska författare tack vare FlashGameLicense.com, platsen att köpa och sälja Flash-spel.
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Skapa ett nytt projekt i FlashDevelop (eller vilken redaktör du använder), sätt dimensionerna för swf till 600x400 och bakgrunden till svart (# 000000).
Nästa, för att ställa upp scenen kommer vi att ha två sprites, en är för huvuddisplayen som vi kommer att lägga till alla bildobjekt och den andra är för rörelsespårseffekten som använder huvuddisplayen som referens.
privat var _mainDisplay: Sprite = new Sprite (); privat var _mtDisplay: Sprite = new Sprite ();
Och lägg till sprites till Skede.
// // Set up Displays // Vi måste lägga till våra två skärmar till Stage addChild (_mtDisplay); addChild (_mainDisplay);
Nu ska vi bädda in vår stjärnbild för användning, eller om du vill använda din egen bild.
[Bädda in (source = '... / ... /images/star.png')] var stjärna: Klass;
Det sista vi vill göra för installationen är att skapa en slinga fungera. Detta kommer att uppdateras varje ram, för saker som positionering och uppdatering av rörelsespåret. Så gör en annan funktion och en händelse lyssnare att kalla det varje ram.
Din Main.as klassen ska se ut så här.
paketet rtmTrail importera flash.display.Sprite; importera flash.events.Event; public class Main sträcker Sprite public function Main (): void if (stage) init (); annars addEventListener (Event.ADDED_TO_STAGE, init); privatfunktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Ladda upp bilder [Bädda in (source = '... / ... /images/star.png')] var stjärna: Klass; // // Set up Displays // Vi måste lägga till våra två skärmar till scenen addChild (_mtDisplay); addChild (_mainDisplay); // Lägg till en ny Event Listener för vår loop-funktion när vi går in // ramen för att flytta sprites och uppdatera vår MotionTrail Effect addEventListener (Event.ENTER_FRAME, loop); privat funktionsling (e: händelse): void privat var _mainDisplay: Sprite = new Sprite (); privat var _mtDisplay: Sprite = new Sprite ();
För att testa Motion Trail ska vi skapa tio sprites från stjärnbilden och placera dem på slumpmässiga platser. Dessutom ska vi skapa en Punkt Det berättar för oss hur snabbt och riktigt de ska röra sig. Det första du behöver göra är att skapa två arrayer att lagra denna information; en är för Sprite och den andra är för Punkt.
private var _sprites: Array = new Array (); privat var _spritesDir: Array = new Array (); privat var _txt: TextField = nytt TextField ();
Lägg till det här i i det funktionen att slumpmässigt skapa och placera tio stjärnor.
// Rita några stjärnor var spr: Sprite; var bmp: Bitmapp; för (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);
Nu för att skapa Textfält Lägg till detta.
Accentsconagua
// Lägg till ett textfält för _txt.defaultTextFormat = nytt TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Real Time Motion Trail" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Nu måste vi flytta in i vårt slinga funktion för Sprite rörelsekontroll. Ganska enkelt, använd a för slinga för att gå igenom vardera Sprite vi har och om det träffar kanten invers x eller y av Punkt så det går i andra riktningen. Vi måste också flytta sprite i loop med värdena i Punkt och för att göra det mer intressant, rotera det långsamt.
privat funktion loop (e: Event): void // Uppdatera Sprite Shapes för (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; om (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Flytta Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotera Sprite Shape _sprites [i] .rotation + = 2;
För att flytta Textfält Överst till vänster måste vi bara subtrahera från x egendom varje ram, och om den går av skärmen sätt tillbaka den till höger på skärmen.
privat funktion loop (e: Event): void // Uppdatera Sprite Shapes för (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; om (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Flytta Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotera Sprite Shape _sprites [i] .rotation + = 2; // Flytta Text _txt.x - = 4 om (_txt.x < -200) _txt.x = 600;
Efter att ha testat det, borde du ha sett något som detta (med stjärnorna och texten som rör sig runt på skärmen förstås).
Nu är det dags att göra vårt MotionTrail Klass. Vad den här klassen ska göra är att ta en Display som dras till sin egen display (a Sprite) och använda ett par filter, blekade och suddiga.
Så gör din nya MotionTrail.as Klass och låt den förlänga Sprite Klass.
För lite förinstallation för de steg som kommer kommer vi att skapa några variabler, först den _visa för att lagra en referens från huvudskärmen, a BitmapData att rita till, a Rektangel scenens storlek och a Punkt i det övre vänstra hörnet för filtren. Upplagt är en Array för Colormatrixfilter.
paketet rtmTrail importera flash.display.Bitmap; importera flash.display.BitmapData; importera flash.display.DisplayObject; importera flash.display.Sprite; importera flash.geom.Point; importera flash.geom.Rectangle; public class MotionTrail utökar Sprite public function MotionTrail (display: DisplayObject) // Referens till displayen som används för rörelsespåret _display = display; // Gör ett BitmapData-objekt att dra till // Om du vill använda det här för ditt eget projekt och dimensionerna inte är 600x400 // så måste du ändra det här och rektangeln nedan _bitmapData = ny BitmapData (600, 400 , sant, 0x000000); // Några saker som filtren behöver inmatas för att den ska fungera _rect = ny rektangel (0, 0, 600, 400); _pnt = ny punkt (0, 0); _cMatrix = new Array (); // Lägg till lite genomskinlighet så att den inte tar uppmärksamhet från huvudskärmen alpha = 0.6; addChild (new Bitmap (_bitmapData)); privat var _display: DisplayObject; privat var _bitmapData: BitmapData; privat var _rect: rektangel; privat var _pnt: Point; privat var _cMatrix: Array;
Sedan vi gjort denna klass måste vi gå tillbaka riktigt snabbt till _mtDisplay variabel och ändra den från Sprite Klass till MotionTrail Klass, tillsammans med inmatning av _mainDisplay variabel.
privat var _mainDisplay: Sprite = new Sprite (); privat var _mtDisplay: MotionTrail = ny MotionTrail (_mainDisplay);
Att skapa vår Matris för Colormatrixfilter, Grundsidan är att tona bort färgerna så att vi sakta sänker alla värden tillbaka till noll. Lägg till det här i konstruktör.
// Skapa matris för 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]) // Blå _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Detta kommer att multiplicera varje värde av varje pixel med 0,92 och som det gör varje ram blir den mindre och mindre tills den i grunden når sin gräns vid 0. Så ju närmare värdena är 1,0 desto längre tar det att nå noll vilket betyder en längre spår (och vice versa: ju närmare 0,0 desto kortare spåret).
Nu skapar vi Colormatrixfilter och den BlurFilter.
De Colormatrixfilter kommer att använda Array Vi har just gjort och vi ska skapa två BlurFilters. Jag hittade att använda två BlurFilters ger en bra puls effekt och det suddas inte för långsamt eller för fort, men om du hellre har en som också är bra.
Lägg till variablerna för filtren först.
privat var _cFilter: ColorMatrixFilter; privat var _bFilter: BlurFilter; privat var _bFilter2: BlurFilter;
Skapa filerna i konstruktören
_cFilter = ny ColorMatrixFilter (_cMatrix); _bFilter = ny BlurFilter (2, 2, 1); _bFilter2 = ny BlurFilter (8, 8, 1);
Nu är det dags att skapa en funktion för att uppdatera våra Motion Trails. Gör en funktion som heter uppdatering i MotionTrail Klass. För att göra spåret måste vi dra huvudskärmen till BitmapData varje ram som gör spårets effekt.
public function update (): void // Draw Visa på BitmapData _bitmapData.draw (_display);
Du borde nu få ett spår om du kör det, men naturligtvis blir Motion Trails borta och vi kommer att göra det bleknar med filtren vi gjorde i det sista steget.
Nu kan vi använda filtren till BitmapData. Vi använder samma BitmapData för källan, den _rect och _pnt variabler för sourceRect och destPoint respektive, och sist är det filter vi vill tillämpa.
Eftersom vi har några filter vill vi inte tillämpa dem alla ramar eftersom det skulle sakta ner sakerna för mycket. I stället ska vi byta Colormatrixfilter och BlurFilter att arbeta i olika ramar och byta BlurFilters på samma sätt.
För att byta dem ska vi ha en variabel för att hålla reda på ramen och använda moduloperatören att kontrollera.
privat var _count: Number = 0;
public function update (): void // Draw Visa på BitmapData _bitmapData.draw (_display); // Applicera effekter till BitmapData om (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); annars om (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); annars _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Öka räkning _count ++;
Nu när uppdatering funktionen är klar vi lägger till den i vår slinga fungera.
// Uppdatera Motion Blur _mtDisplay.update ();
Grymt bra! Vi är färdiga med den här snabba tipsen och du kan fortsätta och testa den.
Du borde ha fått samma resultat som provet swf och nu kan du försöka utöka det. Det finns många olika effekter du kan göra, mest om du förstår ColorMatrixFilter.
Till exempel kan du blekna färgen på spåret till rött genom att göra så här:
// Offset Red Value med 30 varje gång _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Grön _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blå _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Eller du kan också byta färger som gör alla spår blå:
// Endast blåa spår _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 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
Tack för att du läser. Jag hoppas att alla lärde dig något av det här och det kommer att bli användbart i framtiden, kanske ett coolt nytt spel med denna effekt.
