Share
În acest sfat rapid veți învăța cum să utilizați BitmapData copyPixels () metodă pentru a crea un efect foarte rapid și neclar, pentru gloanțele din jocurile de tip "shoot-up".
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Utilizați tastele săgeată sau WASD pentru a muta nava și apăsați pe bara de spațiu pentru a declanșa gloanțe spre cursorul mouse-ului.
Vom trece repede (într-adevăr repede) ideea de bază folosită pentru a blitz înainte de a merge mai departe, deoarece vom folosi-o în acest sfat rapid.
Copierea pixelilor de pe ecran este nucleul blitului. În AS3, se face copiind o regiune rectangulară de pixeli de a BitmapData altcuiva BitmapData, utilizând BitmapData.copyPixels ().
Imaginea de mai sus ilustrează exact acest lucru. Copiem pixelii unei regiuni dreptunghiulare de la a BitmapData și puneți-l într-un altul.
Ideea pe care o vom explora în acest sfat rapid este de a copia tot ceea ce are nevoie de un efect de estompare aplicat într-un container și de a aplica efecte post-blitting pentru a crea efectul dorit.
Există deja un cod foarte de bază pentru un joc shooter spațial deja făcut în fișierele sursă, deoarece acest lucru nu este punctul central al acestui post. Există doar o navă care se mișcă cu tastele WASD sau săgețile. Codul este foarte comentat și este foarte simplu, de aceea, probabil că nu vei avea probleme să îl înțelegi. Folosește imagini încorporate pentru imaginile din joc, dar poți folosi și sprite cu o răsucire foarte ușoară pe o funcție pe care o vom crea ulterior (o să discutăm într-un moment).
Hai să intrăm Main.as și de a crea un Bitmap care va conține fiecare glonț și obiect care trebuie să fie neclară. Adăugați-o înainte de orice altceva în lista copiilor.
privat var _container: Bitmap; privat var _containerData: BitmapData; funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Crearea navei de jucător și a vectorului care va conține gloanțele _playerShip = nou PlayerShip (); _bulleți = Vector nou.(); // // Inițializarea containerului _containerData = BitmapData nou (550, 400, true, 0xFFFFFFFF); _container = bitmap nou (_containerData); // addChild (_container); addChild (_playerShip); // Listener pentru bucla de joc addEventListener (Event.ENTER_FRAME, onEnterFrame);
Până acum, totul a fost foarte simplu. Am creat numai containerul și l-am adăugat în lista de afișare.
În acest pas ceea ce trebuie să facem este să tragem gloanțele din container în fiecare cadru. Vom face asta în onEnterFrame () funcția Principal clasă.
funcția privată onEnterFrame (e: Event): void _playerShip.update (); // Actualizarea fiecărui glonț pentru (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)); //
Singura linie care contează este linia 10. În această linie, tragem pixelii fiecărui glonț (accesând BitmapData a copilului glonțului, care este BitmapData conținând pixelii imaginii încorporate) în poziția lor. Dacă nu utilizați imagini încorporate în joc, puteți utiliza BitmapData.draw () in schimb. Această metodă este puțin mai lentă, dar va funcționa la fel.
Trecem întregul dreptunghi al glonțului BitmapData pentru că vrem să tragem totul. Puteți juca cu acest dreptunghi și cu poziția de a desena pentru a crea rezultate foarte distractive (de exemplu, o poziție bazată pe o funcție periodică, cum ar fi Math.sin () pentru a crea un efect de traseu interesant, chiar dacă glonțul merge numai în linie dreaptă sau doar trage "focul" unui glonte de rachetă trecând un dreptunghi mai mic pentru a crea traseul numai cu împușcătura).
Când compilați și executați jocul, veți obține ceva de genul acesta după ce ați tras câteva gloanțe:
Cu toate acestea, nu asta ne dorim cu adevărat. Vrem să adăugăm un efect de tras neclare, deci ce să faceți?
Acesta este ultimul pas. Tot ce trebuie să facem este să aplicăm efectul de estompare în BitmapData care deține toate imaginile de pe gloanțe. Pentru a face acest lucru, vom folosi a ColorMatrixFilter.
privat Var _colorMatrixFilter: ColorMatrixFilter; funcția privată init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Crearea navei de jucător și a vectorului care va conține gloanțele _playerShip = nou PlayerShip (); _bulleți = Vector nou.(); // // Inițializarea containerului _containerData = BitmapData nou (550, 400, true, 0); _container = bitmap nou (_containerData); // // Inițializarea filtrului de matrice _colorMatrixFilter = noul ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,99, 0]); // addChild (_container); addChild (_playerShip); // Listener pentru bucla de joc addEventListener (Event.ENTER_FRAME, onEnterFrame); funcția privată onEnterFrame (e: Event): void _playerShip.update (); // Actualizarea fiecărui glonț pentru (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); //
ColorMatrixFilter funcționează prin manipularea fiecărui pixel în BitmapData în funcție de valorile din filtrul de matrice. Uitați-vă la init () funcţie. Noi creăm un nou ColorMatrixFilter acolo, trecând o matrice cu o mulțime de valori în ea. Aceste valori vor crea matricea de transformare a filtrului de matrice, permițându-ne să manipulăm pixelii din imagine.
Filtrul funcționează în felul următor: fiecare componentă a culorii rezultate (roșu, verde, albastru și alfa) se calculează prin înmulțirea componentelor sursă cu numerele corespunzătoare în rândul respectiv al matricei și însumarea acestora, împreună cu a cincea valoare a rândului.
De exemplu, dacă luăm filtrul de matrice pe care l-am creat în cod ca filtru de matrice exemplu și îl aplicăm unui pixel cu valorile "roșu = 50, verde = 10, albastru = 200, alfa = 128", componenta roșie rezultată a pixelului va fi"roșu = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50", pentru că primul rând al matricei noastre este"1 0 0 0 0"Componenta alfa va fi"alfa = (50x0) + (10x0) + (200x0) + (128 * 0.99) + 0 = 126", deoarece ultimul rând al matricei noastre este"0 0 0 0,99 0".
Vedeți ce se întâmplă acum? Fiecare cadru înmulțim alfa-ul fiecărui pixel cu 0.99, făcându-l puțin mai transparent, pentru a crea efectul trailului. Dacă doriți să citiți mai multe despre ColorMatrixFilter, puteți consulta documentația.
Efectul de estompare este îngrijit de aplicarea unui simplu BlurFilter în BitmapData.
Compilați jocul acum și veți obține efectul dorit!
Tocmai ați învățat cum să aplicați a ColorMatrixFilter în scopul de a crea un efect tras neclare, folosind foarte rapid BitmapData.copyPixels () metodă! Cu aceasta, puteți adăuga efectul de estompare fiecărui obiect pe care îl doriți și nu vă faceți griji cu privire la încetinirea încetinirii aplicației Flash Player deoarece adăugați prea mulți copii cu filtre neclare pe scenă. O mulțime de lucruri reci pot fi construite prin acest principiu; trebuie să fii creativ.
Mulțumesc că ați citit! Dacă aveți întrebări, vă rugăm să comentați!
Accentsconagua