Share
I denne Quick Tip lærer du hvordan du bruker BitmapData copyPixels () Metode for å lage en veldig rask uskarpt sti-effekt for kulene i shoot-up-spillene dine.
La oss se på det endelige resultatet vi vil jobbe for:
Bruk piltastene eller WASD til å flytte skipet, og trykk på mellomromstasten for å skyte kuler mot musemarkøren.
Vi vil raskt (veldig raskt) gå gjennom den grunnleggende ideen som brukes i blitting før vi går videre, siden vi skal bruke den i denne Quick Tip.
Kopiering av piksler på skjermen er kjernen i blitting. I AS3 gjøres det ved å kopiere et rektangulært område av piksler av a BitmapData til en annen BitmapData, ved hjelp av BitmapData.copyPixels ().
Bildet over illustrerer akkurat det. Vi kopierer pikslene i en rektangulær region fra a BitmapData og legg den inn i en annen.
Ideen vi skal undersøke i denne raske tipsen er å kopiere alt som trenger en uskarpt effekt som er brukt i en beholder og søke etter blitsing for å skape den effekten vi vil ha.
Det er allerede en veldig grunnleggende kode for et space shooter-spill allerede gjort i kildefilene, siden dette ikke er fokuset på dette innlegget. Det er bare et skip som beveger seg med WASD eller piltastene. Koden er veldig kommentert og er veldig grunnleggende, skjønt, så du vil sannsynligvis ikke ha noen problemer med å forstå det. Den bruker innebygde bilder for bildene i spillet ditt, men du kan også bruke sprites med en veldig liten vri på en funksjon som vi senere vil lage (vi diskuterer dette på et øyeblikk).
La oss hoppe inn Main.as og opprett en bitmap som vil inneholde alle kuler og objekter som må være uklare. Legg det til før noe annet i barnelisten.
privat var _container: Bitmap; privat var _containerData: BitmapData; privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Opprette spillerskip og vektoren som vil inneholde kulene _playerShip = nytt PlayerShip (); _bullets = ny vektor.(); // // Initialisering av containeren _containerData = ny BitmapData (550, 400, true, 0xFFFFFFFF); _container = ny Bitmap (_containerData); // addChild (_container); addChild (_playerShip); // Listener for spillsløyfen addEventListener (Event.ENTER_FRAME, onEnterFrame);
Så langt har alt vært veldig enkelt. Vi har bare opprettet beholderen og lagt den til i visningslisten.
I dette trinnet er det nødvendig å tegne kulene i beholderen hver ramme. Vi gjør det i onEnterFrame () funksjon av Hoved klasse.
privat funksjon onEnterFrame (e: Event): void _playerShip.update (); // Oppdatere hver kule 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, new Point(_bullets[i].x, _bullets[i].y)); //
Den eneste linjen som betyr noe, er linje 10. I den linjen tegner vi piksler av hver kulde (ved å få tilgang til BitmapData av bullets barn, som er BitmapData som inneholder piksler av det innebygde bildet) til deres posisjon. Hvis du ikke bruker innebygde bilder på spillet ditt, kan du bruke det BitmapData.draw () i stedet. Denne metoden er litt tregere, men den vil fungere på samme måte.
Vi passerer hele rektangelet til punktet BitmapData fordi vi vil tegne alt av det. Du kan spille med dette rektangelet og stillingen å tegne for å skape veldig morsomme resultater (for eksempel en posisjon basert på en periodisk funksjon som Tak i Math.sin () å skape en interessant laneffekt, selv om kulen bare går i en rett linje, eller bare tegner "brannen" av en rakettkule ved å passere et mindre rektangel for å lage stien bare med skuddet).
Når du kompilerer og kjører spillet ditt, får du noe slikt etter å ha tatt noen få kuler:
Men det er ikke det vi virkelig ønsker. Vi vil legge til en uskarpt sti-effekt, så hva skal vi gjøre?
Dette er det siste trinnet. Alt vi har igjen å gjøre er å bruke uskarphet effekten i BitmapData som holder alle bildene fra kulene. For å gjøre det, bruker vi en ColorMatrixFilter.
private var _colorMatrixFilter: ColorMatrixFilter; privat funksjon init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Opprette spillerskip og vektoren som vil inneholde kulene _playerShip = nytt PlayerShip (); _bullets = ny vektor.(); // // Initialisering av containeren _containerData = ny BitmapData (550, 400, true, 0); _container = ny Bitmap (_containerData); // // Initialisering av matrisfilteret _colorMatrixFilter = ny 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); // Listener for spillsløyfen addEventListener (Event.ENTER_FRAME, onEnterFrame); privat funksjon onEnterFrame (e: Event): void _playerShip.update (); // Oppdatere hver kule 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, new Point(_bullets[i].x, _bullets[i].y)); // // Adding the blur effect on the container _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), new BlurFilter(2, 2, 1)); _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), _colorMatrixFilter); //
De ColorMatrixFilter Fungerer ved å manipulere hver piksel i BitmapData i henhold til verdiene i matrisfilteret. Ta en titt på i det() funksjon. Vi lager en ny ColorMatrixFilter der inne, passerer en matrise med en mengde verdier i den. Disse verdiene vil skape transformasjonsmatrisen til matrisfilteret, slik at vi kan manipulere pikslene i bildet.
Filteret fungerer i utgangspunktet slik: Hver komponent av den resulterende fargen (rød, grønn, blå og alfa) beregnes ved å multiplisere kildekomponentene med de respektive tallene i den respektive raden i matrisen og oppsummere dem sammen med den femte verdien av raden.
Hvis vi for eksempel tar matrisfilteret, opprettet vi i koden som vårt eksempelmatrisfilter, og vi bruker det til en piksel med verdiene "rød = 50, grønn = 10, blå = 200, alfa = 128", vil den resulterende røde komponenten av pikselet være"rød = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50"fordi den første raden av matrisen vår er"1 0 0 0 0". Alfabetisk komponent vil være"alfa = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0,99) + 0 = 126", fordi den siste raden av matrisen vår er"0 0 0 0.99 0".
Ser du hva som skjer nå? Hver ramme vi multipliserer hver pikselts alfa med 0,99, noe som gjør den litt gjennomsiktig for å skape stieneffekten. Hvis du ønsker å lese mer om ColorMatrixFilter, Du kan referere til dokumentasjonen.
Blur effekten blir tatt vare på ved å bruke en enkel BlurFilter i BitmapData.
Samle spillet nå, og du vil få ønsket effekt!
Du har nettopp lært å søke en ColorMatrixFilter for å skape en uskarpt sti-effekt, bruker du det veldig fort BitmapData.copyPixels () metode! Med dette kan du legge til uklare effekten på hvert objekt du vil ha, og ikke bekymre deg for at Flash Player går sakte, fordi du legger for mange barn med uklare filtre på scenen. Mange kule ting kan bygges med dette prinsippet; du må bare være kreativ.
Takk for at du leser! Hvis du har noen spørsmål, vær så snill å kommentere!
Accentsconagua