Share
I denna Snabba Tips lär du dig hur du använder BitmapData copyPixels () metod för att skapa en mycket snabb suddig spårseffekt för kulorna i dina shoot-up-spel.
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Använd piltangenterna eller WASD för att flytta skeppet och tryck på mellanslagstangenten för att skjuta kula mot muspekaren.
Vi kommer snabbt (riktigt snabbt) att gå igenom den mycket grundläggande ideen som används vid blits innan vi går vidare, eftersom vi kommer att använda den i den här snabba tipsen.
Kopiering av pixlar på skärmen är kärnan i blits. I AS3 görs det genom att kopiera en rektangulär region av pixlar av a BitmapData till en annan BitmapData, använder sig av BitmapData.copyPixels ().
Bilden ovan illustrerar exakt det. Vi kopierar pixlarna i en rektangulär region från en BitmapData och lägg den till en annan.
Tanken som vi kommer att undersöka i den här snabba tipsen är att kopiera allt som behöver en suddig effekt som appliceras i en behållare och tillämpa efterbländningseffekter för att skapa den effekt vi vill ha.
Det finns redan en mycket grundläggande kod för ett rymdskyttsspel som redan har gjorts i källfilerna, eftersom detta inte är fokus för detta inlägg. Det finns bara ett fartyg som rör sig med WASD eller piltangenterna. Koden är mycket kommenterad och är väldigt grundläggande, men så har du förmodligen inga problem att förstå det. Det använder inbäddade bilder för bilderna i ditt spel, men du kan också använda sprites med en mycket liten twist på en funktion som vi senare kommer att skapa (vi diskuterar detta på ett ögonblick).
Låt oss hoppa in Main.as och skapa en Bitmap som kommer att innehålla varje punkt och objekt som behöver vara suddig. Lägg till det innan något annat i barnlistan.
privat var _container: Bitmap; privat var _containerData: BitmapData; privat funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Skapa spelarskepp och vektorn som ska innehålla kulorna _playerShip = new PlayerShip (); _bullets = ny vektor.(); // // Initialisering av behållaren _containerData = ny BitmapData (550, 400, true, 0xFFFFFFFF); _container = ny Bitmap (_containerData); // addChild (_container); addChild (_playerShip); // Listener för spelet loop addEventListener (Event.ENTER_FRAME, onEnterFrame);
Hittills har allt varit väldigt enkelt. Vi har bara skapat behållaren och lagt den till i visningslistan.
I det här steget måste vi göra kuggarna i behållaren varje ram. Vi gör det i onEnterFrame () funktion av Huvudsaklig klass.
privat funktion onEnterFrame (e: Event): void _playerShip.update (); // Uppdatera varje punkt för (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 enda raden som spelar roll är linje 10. I den linjen ritar vi pixlarna för varje punkt (genom att komma åt BitmapData av kula barnet, vilket är BitmapData innehållande pixlarna i den inbäddade bilden) till sin position. Om du inte använder inbäddade bilder på ditt spel kan du använda BitmapData.draw () istället. Denna metod är lite långsammare, men den kommer att fungera på samma sätt.
Vi passerar hela rektangeln av kulan BitmapData för att vi vill rita allt. Du kan spela med denna rektangel och läget att dra för att skapa mycket roliga resultat (till exempel en position baserad på en periodisk funktion som Math.sin () för att skapa en intressant spårseffekt, även om kulan bara går i en rak linje eller bara ritar "elden" av en raketkula genom att passera en mindre rektangel för att endast skapa spåret med skottet).
När du sammanställer och kör ditt spel får du något sådant efter att ha tagit några kula:
Men det är inte vad vi verkligen vill ha. Vi vill lägga till en suddig spårseffekt, så vad gör vi?
Detta är det sista steget. Allt vi har kvar är att applicera oskärpaffekten i BitmapData som rymmer alla bilder från kulorna. För att göra det ska vi använda en Colormatrixfilter.
privat var _colorMatrixFilter: ColorMatrixFilter; privat funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Skapa spelarskepp och vektorn som ska innehålla kulorna _playerShip = new PlayerShip (); _bullets = ny vektor.(); // // Initialisering av behållaren _containerData = ny BitmapData (550, 400, true, 0); _container = ny Bitmap (_containerData); // // Initialisering av matrisfiltret _colorMatrixFilter = ny ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0,99, 0]); // addChild (_container); addChild (_playerShip); // Listener för spelet loop addEventListener (Event.ENTER_FRAME, onEnterFrame); privat funktion onEnterFrame (e: Event): void _playerShip.update (); // Uppdatera varje punkt för (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 fungerar genom att manipulera varje pixel i BitmapData enligt värdena i matrisfiltret. Ta en titt på i det() fungera. Vi skapar en ny Colormatrixfilter där inne, passerar en matris med en massa värden i den. Dessa värden kommer att skapa transformationsmatrisen i matrisfiltret, så att vi kan manipulera bildpunkterna i bilden.
Filtret fungerar i huvudsak så här: varje komponent i den resulterande färgen (röd, grön, blå och alfa) beräknas genom att multiplicera källkomponenterna med respektive nummer i respektive rad i matrisen och summera dem tillsammans med det femte värdet av raden.
Om vi till exempel tar matrisfiltret skapade vi i koden som vårt exempelmatrisfilter och vi tillämpar det på en pixel med värdena "röd = 50, grön = 10, blå = 200, alfa = 128"kommer den resulterande röda komponenten av pixeln att vara"röd = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50", eftersom den första raden i vår matris är"1 0 0 0 0". Alfakomponenten kommer att vara"alfa = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0,99) + 0 = 126", eftersom den sista raden i vår matris är"0 0 0 0.99 0".
Ser du vad som händer nu? Varje ram vi multiplicerar varje pixels alfas med 0,99, gör den lite transparentare för att skapa spårseffekten. Om du vill läsa mer om Colormatrixfilter, Du kan hänvisa till dokumentationen.
Oskärpaffekten tas hand om genom att tillämpa en enkel BlurFilter i BitmapData.
Kompilera spelet nu och du kommer att få vår önskade effekt!
Du lärde dig bara hur man ansöker en Colormatrixfilter För att skapa en suddig spårseffekt, använder du det mycket snabbt BitmapData.copyPixels () metod! Med detta kan du lägga till oskärpaffekten för varje objekt du vill ha och inte oroa dig för att Flash Player saktar ner eftersom du lägger till för många barn med oskärpa filter på scenen. Massor av coola saker kan byggas med denna princip; du måste bara vara kreativ.
Tack för att du läste! Om du har några frågor, vänligen kommentera!
Accentsconagua