Quick Tips: piske opp Real Time Motion Trails
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips vi kommer til å være med ColorMatrixFilter og BlurFilter å skape en Motion Trail effekt.
Vi fant denne awesome forfatteren takket være FlashGameLicense.com, stedet å kjøpe og selge Flash spill
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.
Trinn 1: Opprett prosjekt og sette den opp
Opprett et nytt prosjekt i FlashDevelop (eller hvilken editor du bruker), sett dimensjonene av SWF til 600x400 og bakgrunnen til svart (# 000000).
Neste, for å sette opp scenen vi kommer til å ha to Sprites, er ett for hovedskjermen som vi vil legge alle visningsobjekter, og den andre er for Motion Trail effekten som bruker hoveddisplayet som en referanse
privat Var _mainDisplay: Sprite = new Sprite (); privat Var _mtDisplay. Sprite = new Sprite ();
Og legge Sprites til Stage
////. Sett opp Viser //Vi må legge til våre to skjermer til StageaddChild (_mtDisplay); addChild (_mainDisplay);.
Nå skal vi bygge vår stjerne image for bruk, eller hvis du vil bruke ditt eget bilde
[Bygg (kilde = '../../images/star.png')]var stjerne: Klasse;
Den siste tingen vi ønsker å gjøre for oppsettet er å lage en loop funksjon. Dette kommer til å bli oppdatert hver ramme, for ting som posisjonering og oppdatere Motion Trail. Så gjør en annen funksjon og en hendelse lytteren å kalle det hver ramme
Din Main.as klasse skal se omtrent slik ut
pakken rtmTrail {import flash.display.Sprite..; import flash.events.Event; public class Hoved strekker Sprite {offentlig funksjon main (): void {if (scene) init (); annet addEventListener (Event.ADDED_TO_STAGE, init); } Private funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); ////Last inn bilder [Bygg (kilde = '../../images/star.png')] Var stjerne: Klasse; ////Sett opp displayer //Vi må legge til våre to skjermer til scenen addChild (_mtDisplay); addChild (_mainDisplay); //Legg til en ny hendelse lytteren for loop funksjon når vi går inn //rammen for å flytte sprites og oppdatere vår MotionTrail Effect addEventListener (Event.ENTER_FRAME, loop); } Private funksjon loop (e: Hendelses): void {} private Var _mainDisplay: Sprite = new Sprite (); private Var _mtDisplay: Sprite = new Sprite (); }}
Trinn 2: Sprites & Textfield
For å teste Motion Trail vi skal lage ti Sprites fra stjernebildet og plassere dem på tilfeldige steder. I tillegg skal vi lage et punkt som forteller oss fart og retning de vil flytte. Det første du må gjøre er å lage to Arrays å lagre denne informasjonen; en er for Sprite og den andre er for Point
private Var _sprites: Array = new Array (); privat Var _spritesDir. Array = new Array (); privat Var _txt: Textfield = new Textfield (); < p> Legg til init funksjon å tilfeldig opprette og plassere ti stjerner
//Tegn noen starsvar spr: Sprite; Var bmp. Bitmap, for (var i: int = 0; i < 10; i ++) { spr = new Sprite (); bmp = ny stjerne (); spr.addChild (bmp); bmp.smoothing = true; spr.x = Math.random () * 240 + 80; spr.y = Math.random () * 240 + 80; //Vi kommer til å legge den nye sprite opp i _sprites Array og en //Point som forteller oss hvor vi skulle flytte sprite i _spritesDir Array. _sprites.push (spr); _spritesDir.push (ny Point (Math.random () * 6, Math.random () * 6)); //Siste ting å gjøre er å legge den til vår hoved Skjerm _mainDisplay.addChild (spr);.}
Nå for å skape den Textfield legge denne
//Legg et tekstfelt Too _txt.defaultTextFormat = new tekstformat (" arial ", 18, 0xFF00FF); _txt.text = "Real Time Motion Trail" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt);
Trinn 3: Kontroll Sprite Movement
Nå må vi flytte inn i vår løkke funksjon for Sprite bevegelseskontroll. Ganske enkelt, bruke en for loop å gå gjennom hver Sprite vi har, og hvis den treffer kanten inverse x eller y av Point så det går i den andre retningen. Vi vil også måtte flytte sprite i loop av verdiene i Point og, for å gjøre det mer interessant, langsomt opp
privat funksjon loop (e: Hendelses):. Void {//Oppdater Sprite Shapes for (var i: int = 0; i < _sprites.length, jeg ++) {//Sjekk om formen er på eller ut av //ytre grensene slik at vi kan endre retning hvis (_sprites [i] .x < = 0 || _sprites [i] .x > = 600) _spritesDir [i] .x = -_spritesDir [i] .x; if (_sprites [i] .Y < = 0 || _sprites [i] .Y > = 400) _spritesDir [i] .Y = -_spritesDir [i] .Y; //Flytt Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .Y + = _spritesDir [i] .Y; //Roter Sprite Shape _sprites [i] .rotation + = 2; }}
Hvis du vil flytte Textfield øverst til venstre er vi bare nødt til å trekke fra x egenskapen hver ramme, og hvis det går utenfor skjermen sette den tilbake til høyre side av skjermen.
privat funksjon sløyfe (e: Hendelses): void {//Oppdater Sprite Shapes for (var i: int = 0; i < _sprites.length; i ++) {//Sjekk om formen er på eller ut av //ytre grensene slik at vi kan endre retning hvis (_sprites [i] .x < = 0 || _sprites [i] .x > = 600) _spritesDir [i] .x = -_spritesDir [i] .x; if (_sprites [i] .Y < = 0 || _sprites [i] .Y > = 400) _spritesDir [i] .Y = -_spritesDir [i] .Y; //Flytt Sprite Shape _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .Y + = _spritesDir [i] .Y; //Roter Sprite Shape _sprites [i] .rotation + = 2; } //Flytte tekst _txt.x - = 4 if (_txt.x < -200) _txt.x = 600;}
Etter å ha testet det, bør du ha sett noe som dette (med stjernene og tekst flytte rundt skjermen selvfølgelig)
Trinn 4:. Opprett MotionTrail Class
Nå er det på tide å gjøre vår MotionTrail Class. Hva denne klassen kommer til å gjøre er å ta en Displayobject som trekkes til sin egen skjerm (en Sprite) og bruke et par filtre, falmet og uskarpt.
Så gjør ditt nye MotionTrail.as Class og la det strekke seg Sprite klasse.
For en liten pre-setup for fremgangsmåten for å komme vi kommer til å lage noen variabler, først _display å lagre en referanse i hoveddisplayet, en BitmapData å trekke til, et rektangel størrelsen på scenen og et punkt i øverste venstre hjørne for filtrene. Vare opp er en Array for ColorMatrixFilter
pakken 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 strekker Sprite {offentlig funksjon MotionTrail (display: Displayobject) {//Referanse til skjermen brukes til bevegelse sti _display = display; //Lag en BitmapData Object å trekke til //Hvis du vil bruke dette for ditt eget prosjekt og dimensjonene er ikke 600x400 //så ville du må endre det her og rektangelet under _bitmapData = new BitmapData (600, 400 , sant, 0x000000); //Noen Stuff at filtrene må sent inn for at det skal fungere _rect = new rektangel (0, 0, 600, 400); _pnt = new Point (0, 0); _cMatrix = new Array (); //Tilsett litt åpenhet slik at den ikke tar oppmerksomheten bort fra hovedskjermen alfa = 0,6; addChild (ny Bitmap (_bitmapData)); } Private Var _display: Displayobject; private Var _bitmapData: BitmapData; private Var _rect: rektangel; private Var _pnt: Point; private Var _cMatrix: Array; }}
Siden vi gjort denne klassen vi må gå tilbake virkelig rask til _mtDisplay variable og endre det fra Sprite klasse til MotionTrail klasse, sammen med å legge inn _mainDisplay variable
privat Var _mainDisplay. Sprite = new Sprite (); privat Var _mtDisplay: MotionTrail = new MotionTrail (_mainDisplay);
Trinn 5: ColorMatrixFilter Array
Hvis du vil lage vår Matrix for ColorMatrixFilter, er den grunnleggende idé å visne fargene bort så vi sakte redusere alle verdiene tilbake til null. Legg dette til konstruktøren.
//Lag Matrix for 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
Dette vil multipliserer hver verdi av hver piksel ved 0,92 og som det gjør dette hver ramme vil det bli mindre og mindre til det i utgangspunktet når sin grense på 0. Så de nærmere verdiene er til 1,0 jo lenger tid det tar å nå null, noe som betyr en lengre sti (og vice versa: den nærmere 0,0 jo kortere løype).
Trinn 6:. ColorMatrixFilter og BlurFilter
Nå skaper vi ColorMatrixFilter og BlurFilter
< p> ColorMatrixFilter kommer til å bruke Array vi bare gjort, og vi kommer til å lage to BlurFilters. Jeg fant ut at å bruke to BlurFilters gir en fin puls effekt og det ikke dimme for sakte eller for fort, men hvis du heller ha en som er bra også.
Legg variablene for filtrene først. Anmeldelser private Var _cFilter: ColorMatrixFilter; private Var _bFilter: BlurFilter; private Var _bFilter2: BlurFilter;
Lag filtrene i konstruktøren
_cFilter = new ColorMatrixFilter (_cMatrix); _ bFilter = new BlurFilter (2, 2, 1); _bFilter2 = new BlurFilter (8, 8, 1);
Trinn 7: Oppdatere MotionTrails
Nå er det på tide å lage en funksjon for å oppdatere våre Motion Trails. Lag en funksjon som heter oppdateringen i MotionTrail Class. For å gjøre stien vi må trekke hovedskjermen til BitmapData hver ramme som gjør stien effekt
offentlig funksjon oppdatering (). Void {//Tegn Skjerm på BitmapData _bitmapData.draw (_display);}
Du skal nå ha en sti hvis du kjører den, men selvfølgelig Motion Trails visne bort, og vi vil gjøre det forsvinne med filtrene vi har gjort i det siste trinnet
Trinn 8:. Bruk Filters
Nå kan vi bruke filtrene til BitmapData. Vi bruker samme BitmapData for kilden, _rect og _pnt variabler for sourceRect og destPoint henholdsvis, og siste er det filteret vi ønsker å bruke.
Siden vi har noen filtre vi ikke ønsker å bruke alle av dem hver ramme fordi du gjør det ville bremse ting ned for mye. I stedet skal vi slå ColorMatrixFilter og BlurFilter å arbeide i ulike rammer og bytte BlurFilters på samme måte også.
Hvis du vil bytte dem rundt vi kommer til å ha en variabel for å holde styr på rammen og bruk modulen operatøren å kontrollere
private Var _count. Antall = 0; offentlig funksjon oppdateringen (): void {//Tegn Skjerm på BitmapData _bitmapData.draw (_display); //Bruke effekter på BitmapData if (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); else if (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); annet _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); //Øk Count _count ++;}
Nå som oppdateringsfunksjonen er ferdig vi legge den til vår sløyfe funksjon
//Update Motion Blur_mtDisplay.update ();.
Konklusjon Testing og Utvide
Awesome! Vi er ferdige med denne Quick Tips og du kan gå videre og teste det ut.
Du burde ha fått det samme resultatet som prøven swf og nå kan du prøve å utvide den. Det er mange forskjellige effekter du kan gjøre, det meste av det hvis du forstår ColorMatrixFilter
For eksempel kan du fade fargen på stien til rødt ved å gjøre dette.
//Offset Red Verdi med 30 hver time_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, 0,92, 0, 0]) //Blue_cMatrix = _cMatrix.concat ([0, 0, 0, 0,92, 0]) //Alpha
Eller du kan også slå fargene gjør alle løypene blå:
//Bare Blå trails_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
Takk for lesing. Jeg håper dere alle har lært noe av dette og det vil være nyttig i fremtiden, muligens en kul nytt spill ved hjelp av denne effekten. Anmeldelser