Vi vil raskt (veldig raskt) går gjennom helt grunnleggende ideen brukes i blitting før vi går videre, siden vi skal bruke det i denne Quick Tips

Kopiere piksler på skjermen er kjernen i blitting. I AS3, det er gjort ved å kopiere et rektangulært område av piksler med en BitmapData til en annen BitmapData, bruker BitmapData.copyPixels ().

Bildet over illustrerer akkurat det. Vi kopierer pikslene i et rektangulært område fra en BitmapData og sette det inn i en annen.

Ideen vi skal utforske i denne Quick Tips er å kopiere alt som trenger en blur-effekt brukes i en beholder og anvende post -blitting effekter for å skape effekten vi ønsker

Det er allerede en veldig enkel kode for en plass shooter spill allerede gjort i kildefilene, siden dette er ikke fokus for dette innlegget. Det er bare et skip som beveger seg med WASD eller piltastene. Koden er svært kommen og er veldig grunnleggende, skjønt, så har du sannsynligvis ikke vil ha noen problemer med å forstå det. Den bruker innebygd bilder for bildene i spillet ditt, men du kan også bruke sprites med en svært liten vri på en funksjon vi vil senere lage (vi skal diskutere dette i et øyeblikk).

La oss hoppe i Hoved .as og lage en Bitmap som skal inneholde hver kule og objektet som må bli uskarpt. Legg det før noe annet i listen barn
privat Var _container: Bitmap, private Var _containerData. BitmapData; privat funksjon init (e: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); //Opprette spiller skip og vektoren som skal inneholde kulene _playerShip = new PlayerShip (); _bullets = new Vector. < PlayerBullet > (); ////Initialcontainer _containerData = nye BitmapData (550, 400, sant, 0xFFFFFFFF); _container = new Bitmap (_containerData); //AddChild (_container); addChild (_playerShip); //List for spillet sløyfe addEventListener (Event.ENTER_FRAME, onEnterFrame);}

Så langt, alt har vært veldig enkelt. Vi har bare skapt beholderen og lagt det til listen skjerm

I dette trinnet hva vi trenger å gjøre er å trekke kuler i beholderen hver ramme. . Vi skal gjøre det i onEnterFrame () -funksjonen i hovedklassen
privat funksjon onEnterFrame (e: Hendelses): void {_playerShip.update (); //Oppdaterer hver bullet for (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, ny Point (_bullets [i] .x, _bullets [i] .Y)); } //}

Den eneste linje som teller er linje 10. I den linjen, trekker vi pikslene i hver kule (ved å gå BitmapData av kulen barnet, som er de BitmapData inneholder pikslene i den innebygde bilde) inn sin posisjon. Hvis du ikke bruker innebygde bilder på spillet ditt, kan du bruke BitmapData.draw () i stedet. Denne metoden er litt tregere, men det vil fungere på samme måte.

Vi passerer hele rektangel av kulen BitmapData fordi vi ønsker å trekke alt sammen. Du kan spille med denne rektangel og posisjon til å tegne for å lage svært morsomme resultater (for eksempel til en posisjon basert på en periodisk funksjon som tak i Math.sin () skaper en interessant løype effekt, selv om kula bare går i en rett linje, eller bare tegne "ild" av en rakett kule ved å føre et mindre rektangel for å skape stien bare med skudd).

Når du kompilere og kjøre spillet ditt, vil du få noe som dette etter skyting noen kuler:

Men det er ikke det vi egentlig ønsker. Vi ønsker å legge til et uskarpt sti effekt, så hva jeg skal gjøre

Dette er det siste trinnet. Alt vi har igjen å gjøre er å bruke blur effekt i BitmapData som inneholder alle bildene fra kulene. For å gjøre det, vil vi bruke en ColorMatrixFilter
privat Var _colorMatrixFilter: ColorMatrixFilter; privat funksjon init. (E: Hendelses = null): void {removeEventListener (Event.ADDED_TO_STAGE, init); //Opprette spiller skip og vektoren som skal inneholde kulene _playerShip = new PlayerShip (); _bullets = new Vector. < PlayerBullet > (); ////Initialcontainer _containerData = nye BitmapData (550, 400, sant, 0); _container = new Bitmap (_containerData); ////Initial matrisen filter _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); //List for spillet sløyfe addEventListener (Event.ENTER_FRAME, onEnterFrame);} private funksjon onEnterFrame (e: Hendelses): void {_playerShip.update (); //Oppdaterer hver bullet for (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, ny Point (_bullets [i] .x, _bullets [i] .Y)); } ////Legge til blur effekt på beholderen _containerData.applyFilter (_containerData, _containerData.rect, ny Point (0, 0), ny BlurFilter (2, 2, 1)); _containerData.applyFilter (_containerData, _containerData.rect, ny Point (0, 0), _colorMatrixFilter); //}

ColorMatrixFilter fungerer ved å manipulere hver piksel i BitmapData henhold til verdiene i matrisen filter. Ta en titt på init () -funksjonen. Vi skaper en ny ColorMatrixFilter der, passerer en matrise med en haug med verdier i den. Disse verdiene vil skape transformasjonsmatrisa av matrisen filter, slik at vi kan manipulere piksler i bildet

Filteret fungerer i utgangspunktet som dette. Hver komponent av den resulterende farge (rød, grønn, blå og alfa) beregnes ved å multiplisere kildekomponentene ved de respektive tallene i den respektive rekke av matrisen, og summere dem opp, sammen med den femte verdien av p.

For eksempel, hvis vi tar matrisefilter vi laget i koden som vårt eksempel matrisefilter og vi anvende det til et bildeelement med verdiene "røde = 50, grønt = 10, blå = 200, a = 128", den resulterende røde komponent av pikselen vil være "red = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50 ", fordi den første raden i vår matrise er" 1 0 0 0 0 ". Den alfa-komponenten vil være "a = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0,99) + 0 = 126", fordi den siste raden av vår matrise er "0 0 0 0,99 0 ".

Ser du hva som skjer nå? Hver ramme vi multipliserer hver piksel alfa ved 0,99, noe som gjør det litt mer gjennomsiktig, for å skape stien effekt. Hvis du ønsker å lese mer om ColorMatrixFilter, kan du se dokumentasjonen.

blur-effekten er tatt vare på ved å bruke en enkel BlurFilter i BitmapData.

Compile spillet nå og du vil få vår ønsket effekt

Du bare lært å bruke en ColorMatrixFilter for å skape et uskarpt sti effekt, ved hjelp av svært raske BitmapData .copyPixels () metoden! Med denne kan du legge til blur-effekt til hvert objekt du vil og ikke bekymre deg for Flash Player bremse ned fordi du legger for mange barn med uskarphet filtre på scenen. Massevis av kule ting kan bygges med dette prinsippet; du må bare være kreativ.

Takk for lesing! Hvis du har spørsmål, kan du kommentere! Anmeldelser