Share
I denne Quick Tip skal vi bruke ColorMatrixFilter og BlurFilter for å lage en Motion Trail-effekt.
Vi fant denne fantastiske forfatteren takket være FlashGameLicense.com, stedet å kjøpe og selge Flash-spill.
La oss se på det endelige resultatet vi vil jobbe for:
Opprett et nytt prosjekt i FlashDevelop (eller hvilken redaktør du bruker), sett dimensjonene til swf til 600x400 og bakgrunnen til svart (# 000000).
For å sette opp scenen skal vi ha to sprites, en er for hoveddisplayet som vi vil legge til alle skjermobjektene, og den andre er for bevegelsessporet-effekten som bruker hoveddisplayet som referanse.
private var _mainDisplay: Sprite = new Sprite (); privat var _mtDisplay: Sprite = new Sprite ();
Og legg til sprites til Scene.
// // Set up Displays // Vi må legge til våre to skjermer til Stage addChild (_mtDisplay); addChild (_mainDisplay);
Nå skal vi legge inn vårt stjernebilde for bruk, eller hvis du vil bruke ditt eget bilde.
[Embed (source = '... / ... /images/star.png')] var stjerne: Klasse;
Den endelige tingen vi vil gjøre for oppsettet, er å lage en sløyfe funksjon. Dette vil bli oppdatert hver ramme, for ting som posisjonering og oppdatering av Motion Trail. Så gjør en annen funksjon og en hendelse lytter å kalle det hver ramme.
Din Main.as klassen skal se noe slikt ut.
pakke rtmTrail import flash.display.Sprite; importere flash.events.Event; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void if (stage) init (); ellers addEventListener (Event.ADDED_TO_STAGE, init); privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Legg inn bilder [Embed (source = '... / ... /images/star.png')] var stjerne: Klasse; // // Set up Displays // Vi må legge til våre to skjermer til scenen addChild (_mtDisplay); addChild (_mainDisplay); // Legg til en ny Event Listener for vår loop-funksjon når vi går inn // rammen for å flytte sprites og oppdater våre MotionTrail Effect addEventListener (Event.ENTER_FRAME, loop); Private funksjonsløyfe (e: Event): void private var _mainDisplay: Sprite = new Sprite (); privat var _mtDisplay: Sprite = new Sprite ();
For å teste Motion Trail skal vi lage ti sprites fra stjernen bildet og plassere dem på tilfeldige steder. I tillegg skal vi lage en Punkt som forteller oss hastigheten og retningen de vil bevege seg. Den første tingen å gjøre er å lage to arrays å lagre denne informasjonen; en er for Sprite og den andre er for Punkt.
private var _sprites: Array = new Array (); private var _spritesDir: Array = new Array (); private var _txt: TextField = ny TextField ();
Legg dette til i i det Funksjonen er å tilfeldig opprette og plassere ti stjerner.
// Tegn noen stjerner var spr: Sprite; var bmp: Bitmap; for (var jeg: 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);
Nå for å lage Tekstfelt Legg til dette.
Accentsconagua
// Legg til et tekstfelt for _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); Nå må vi flytte inn i vår sløyfe funksjon for Sprite bevegelseskontroll. Ganske enkelt, bruk a til loop for å gå gjennom hver Sprite vi har, og hvis det treffer kanten, reverserer x eller y av Punkt så det går i den andre retningen. Vi må også flytte sprite i løkken av verdiene i Punkt og for å gjøre det mer interessant, roter det langsomt.
privat funksjonsløype (e: Event): void // Oppdater Sprite Shapes for (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; hvis (_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; // Rotate Sprite Shape _sprites [i] .rotation + = 2;
For å flytte Tekstfelt over toppen til venstre må vi bare trekke fra x Egenskap hver ramme, og hvis den går av skjermen, sett den tilbake til høyre side av skjermen.
privat funksjonsløype (e: Event): void // Oppdater Sprite Shapes for (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; hvis (_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; // Rotate Sprite Shape _sprites [i] .rotation + = 2; // Flytt tekst _txt.x - = 4 hvis (_txt.x < -200) _txt.x = 600;
Etter å ha testet det, burde du ha sett noe slikt (med stjernene og teksten som beveger seg rundt på skjermen selvfølgelig).
Nå er det på tide å lage vår MotionTrail Klasse. Hva denne klassen skal gjøre er å ta en Displayobject som er trukket til sin egen skjerm (a Sprite) og bruker et par filtre, bleknet og uskarpt.
Så gjør det nye MotionTrail.as Klasse og la det forlenge Sprite Klasse.
For litt forhåndsoppsett for trinnene som kommer, skal vi lage noen få variabler, først _vise for å lagre en referanse til hovedskjermen, a BitmapData å tegne til, a Rektangel størrelsen på scenen og a Punkt i øverste venstre hjørne for filtrene. Sist opp er en Array for ColorMatrixFilter.
pakke rtmTrail import flash.display.Bitmap; importer flash.display.BitmapData; importer flash.display.DisplayObject; importer flash.display.Sprite; importer flash.geom.Point; importer flash.geom.Rectangle; offentlig klasse MotionTrail utvider Sprite offentlig funksjon MotionTrail (display: DisplayObject) // Henvisning til skjermen som brukes til bevegelsesporet _display = display; // Lag et BitmapData objekt å tegne til // Hvis du vil bruke dette til ditt eget prosjekt og dimensjonene ikke er 600x400 //, må du endre det her og rektangelet nedenfor _bitmapData = ny BitmapData (600, 400 , sant, 0x000000); // Noen ting som filtene trenger inntastet for at det skal fungere _rect = nytt rektangel (0, 0, 600, 400); _pnt = nytt punkt (0, 0); _cMatrix = ny Array (); // Legg litt gjennomsiktighet slik at det ikke tar oppmerksomhet vekk fra hoveddisplayet alfa = 0,6; addChild (ny Bitmap (_bitmapData)); privat var _display: DisplayObject; privat var _bitmapData: BitmapData; private var _rect: rektangel; privat var _pnt: punkt; privat var _cMatrix: Array;
Siden vi har laget denne klassen må vi gå tilbake veldig raskt til _mtDisplay variabel og endre den fra Sprite Klasse til MotionTrail Klasse, sammen med innlasting av _mainDisplay variabel.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: MotionTrail = ny MotionTrail (_mainDisplay);
Å skape vår Matrise for ColorMatrixFilter, Den grunnleggende ideen er å fade fargene vekk, slik at vi sakte reduserer alle verdiene tilbake til null. Legg dette til i konstruktør.
// Lag matrise 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]) // Blå _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Dette vil multiplisere hver verdi av hver piksel med 0,92, og som det gjør hver ramme blir den mindre og mindre til den i utgangspunktet når grensen til 0. Jo nærmere verdiene er til 1,0, desto lengre det tar å nå null, hvilket betyr at en lengre sti (og omvendt: jo nærmere 0,0 jo kortere stien).
Nå lager vi ColorMatrixFilter og BlurFilter.
De ColorMatrixFilter skal bruke Array vi har nettopp laget og vi skal lage to BlurFilters. Jeg fant at ved å bruke to BlurFilters gir en fin pulseffekt og det blir ikke uskarpt for sakte eller for fort, men hvis du heller har en som også passer bra.
Legg til variablene for filtre først.
privat var _cFilter: ColorMatrixFilter; privat var _bFilter: BlurFilter; private var _bFilter2: BlurFilter;
Lag filtre i konstruktøren
_cFilter = ny ColorMatrixFilter (_cMatrix); _bFilter = ny BlurFilter (2, 2, 1); _bFilter2 = ny BlurFilter (8, 8, 1);
Nå er det på tide å opprette en funksjon for å oppdatere våre Motion Trails. Lag en funksjon som heter Oppdater i MotionTrail Klasse. For å gjøre stien må vi tegne hovedskjermen til BitmapData hver ramme som gjør stien effekten.
offentlig funksjon oppdatering (): void // Tegn Vis på BitmapData _bitmapData.draw (_display);
Du bør nå ha en sti hvis du kjører den, men selvfølgelig forsvinner Motion Trails bort, og vi vil gjøre det forsvinne med filtre vi laget i det siste trinnet.
Nå kan vi bruke filtrene til BitmapData. Vi bruker det samme BitmapData for kilden, den _rect og _pnt variabler for sourceRect og destPoint henholdsvis, og sist er filteret vi vil bruke.
Siden vi har noen få filtre, ønsker vi ikke å bruke alle av dem hver ramme fordi det å gjøre det vil redusere ting for mye. I stedet skal vi bytte ColorMatrixFilter og BlurFilter å jobbe i forskjellige rammer og bytte BlurFilters på samme måte.
For å bytte dem rundt, skal vi ha en variabel for å holde oversikt over rammen og bruke moduloperatøren til å sjekke.
privat var _count: tall = 0;
offentlig funksjon oppdatering (): void // Tegn Vis på BitmapData _bitmapData.draw (_display); // Bruk effekter til BitmapData hvis (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); ellers hvis (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); ellers _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Øk graden _count ++;
Nå da Oppdater funksjonen er ferdig legger vi den til vår sløyfe funksjon.
// Oppdater Motion Blur _mtDisplay.update ();
Rått! Vi er ferdige med denne raske tipsen, og du kan fortsette og teste den ut.
Du burde ha fått samme resultat som sample swf, og nå kan du prøve å utvide den. Det er mange forskjellige effekter du kan gjøre, mesteparten av det hvis du forstår ColorMatrixFilter.
For eksempel kan du fade fargen på stien til rød ved å gjøre dette:
// Offset Red Value med 30 hver gang _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30)) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0]) // Grønn _cMatrix = _cMatrix.concat ([0, 0, 0,92, 0, 0]) // Blå _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Eller du kan også bytte fargene som gjør alle stiene blå:
// Bare blå stier _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0)) // Rød _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0)) // Grønn _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blå _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Takk for at du leste. Jeg håper dere alle har lært noe av dette, og det vil vise seg å være nyttig i fremtiden, muligens et kult nytt spill som bruker denne effekten.
