Blitting Med AS3: Fjerne en Bitmap bakgrunnsfarge 
 en 
 Del 
 en 
 Del 
 
 Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av. 
 
 I dag, vil du lære hvordan du fjerner bakgrunnsfargen fra en sprite ark bruker AS3, og blit resultatet til et bitmap lerret. Les videre for å lære mer 
 
Endelig resultat Forhåndsvisning
 La oss ta en titt på det endelige resultatet vi skal jobbe mot: 
 
Trinn 1: Tegning Spritesheet
 Så er det på tide å trekke spritesheet. Åpne opp din favoritt "pixel-art 'program og lage et bilde av 128x128 og gi det en bakgrunnsfarge på' # e731f2 'som er en fin lilla farge 
 
 Dette er min fantastiske kunstverk! 
 < p> Lagre bilde et sted organisert og la oss fortsette 
 
Trinn 2: Importere Sprite Sheet
 Nå er jeg kalle dette en sprite  sheet Anmeldelser selv om det er bare ett bilde. En "sprite ark" består vanligvis av flere enn én sprite men vi kan forestille vi ha mer, rett   Uansett, hvis du bruker Flash CS4 eller høyere, bare importere bildet ditt via  Fil? | Import | Importer til bibliotek Bilde:   Hvis du bruker en annen AS3 IDE, jeg har tatt den SWC-filen så du bør nok hoppe over dette trinnet. Hvis du ønsker å legge ned dine egne bilder, er jeg sikker på at din IDE av valget vil ha denne funksjonen   Vi har nå fått vår sprite ark i biblioteket; Vi burde virkelig gjøre det til en klasse.   Høyreklikk på bildet i biblioteket, og velg Egenskaper. Gi bildet følgende egenskaper:   Hit OK. Hvis du får en advarsel, bare overse den; det spiller ingen rolle her   Hvis du ikke er kjent med konseptet av et dokument klasse, sjekk ut denne Quick Tips før du leser videre .   Opprett en ny "Actionscript 3.0 Class" og gi den navnet "Main". Når filen er opprettet, lagre den som 'Main.as'   Denne koden skal plasseres i vår nye klasse.   Vi er ikke ferdig ennå, men! Hvis du bruker Flash IDE, naviger til "Properties Panel" og sette 'Dokument-klassen "til" Main ". Hvis du lurer på hva som gjør det, betyr det at når din søknad /game drives av Flash Player, vil Main.as være den klassen som er knyttet til SWF selv. Kul, ikke sant?   Kjør programmet; hvis du får noen feil så bør du være godt å gå   Før vi gjør noe blitting, vil vi først må gjøre et lerret å blit videre til. Hvis du er usikker på begrepet Blitting eller ønsker å lære mer om det, kan du ta en titt på denne opplæringen.   Nå vil vi erklære en ny Bitmap variabel, som vi vil blit (kopier) . image   Etter at vi har gjort dette, vil vi legge til en funksjon som heter Initial () som vil tillate oss å sette alt opp pent:   La oss skape funksjonen nå:   Vi er fortsatt ikke ferdig men som vi likevel må legge importen:.   Kjør programmet; hvis det har en svart bakgrunn, det fungerte   Først må vi lage en ny variabel av typen SpriteSheet - som var det klasse for! bildet vi importert tidligere, husker   Vi skal da initialisere det:   Kjør programmet og du skal se noe.; la oss fikse det med en gang   Nå må vi legge en ENTER_FRAME hendelse. Dette vil tillate programmet til å oppdatere 24 ganger i sekundet (24 FPS) i vårt tilfelle   I Main () -funksjonen, legg til følgende linje:.   Nå må vi gjøre det Update () -funksjonen. Legg denne funksjonen etter den andre funksjoner:   Ikke glem importen:   Nå er vi klare til å gjøre noen blitting   Her kommer den interessante delen! !   Greit, så hva vi ønsker å gjøre er:   I oppdateringsfunksjonen, skriver du inn følgende kode:   Hvis du kjører dette, vil du få ditt bilde på lerretet! Men dette er ikke bare hva vi sikter til som vi ønsker å fjerne at bakgrunnsfargen fra bildet   Jeg skal forklare noen av koden ovenfor først.   Nå bør du ha denne på skjermen ...   Ja, jeg vet, er du sannsynligvis rett.. Jeg synes vi skal bli kvitt den lilla også ...   Til slutt, er det på tide å fjerne den lilla fargen   hva vi ønsker å gjøre er å sjekke gjennom hver piksel; hvis pixel er lilla, vi rett og slett ikke kopiere den til lerretet. For å gjøre dette, vil vi lage vår egen funksjon   Endre Update () til følgende:   Vår nye funksjon (CustomBlitting (), som vi ikke har skrevet ennå) tar det meste av parametrene som copyPixels gjør, sammen med en ekstra ett: fargen vi ønsker å fjerne   På tide å skrive. funksjonen. Denne koden kan se komplisert hvis du aldri har gjort en nestet for-løkke før. Måten denne sløyfen fungerer er i utgangspunktet:   La meg forklare getPixel og setPixel, selv om de burde være selvforklarende:   Nå hvis du kjører programmet, det fungerer   Jeg har bare en utfordring for deg å gjøre for denne opplæringen:   Godta en rekke farger som en parameter og fjern eventuelle farger fra bildet som er i rekken   Jeg håper du har hatt denne opplæringen og har lært noe nytt i dag. Hvis du ønsker å vise meg din SWF med de utfylte utfordringer, legg igjen en kommentar nedenfor 
 
 
 
 
 Trinn 3:. Eksportere Sprite Sheet 
 
 
 
 
 
 Trinn 4:. Opprette dokument Class 
 
 
 
 Pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {//konstruktør kode}}} 
 
 
 
 Trinn 5: Opprette Canvas 
 
 
 privat Var lerret: Bitmap; 
 offentlig funksjon main () {Initial ( );} 
 privat funksjon Initial (): void {lerret = new Bitmap (nye BitmapData (550, 400, falsk, 0x000000)); //Setter Canvas Black. stage.addChild (lerret); //Legger lerretet til scenen} 
 Import flash.display.MovieClip, import flash.display.Bitmap; import flash.display .BitmapData; 
 
 
 Trinn 6: Initialisering av SpriteSheet 
 
 privat Var lerret: Bitmap, private Var spriteSheet: SpriteSheet; 
 privat funksjon Initial (): void {lerret = new Bitmap (nye BitmapData (550, 400, falsk, 0x000000)); //Setter Canvas Black. spriteSheet = new SpriteSheet (); //Setter spriteSheet å holde en forekomst av bildet som vi har gjort. stage.addChild (lerret); //Legger lerretet til scenen} 
 
 
 Trinn 7: Oppdatere Program 
 
 
 Offentlig funksjon main () {Initial (); stage.addEventListener (Event.ENTER_FRAME, Oppdater);} 
 privat funksjon Update (e: Hendelses): void {} 
 import flash.display.MovieClip, importere flash.display.Bitmap; import flash.display.BitmapData, import flash.events.Event; 
 
 
 Trinn 8: Blitting 
 
 
 
 Tøm lerretet 
 
 blit bildet og fjerne bakgrunnsfargen 
 
 privat funksjon Update (e: Hendelses): void {canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nytt rektangel (0,0, stage.width, stage.height), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, nytt rektangel (0,0,128,128), nytt punkt (100, 100)); canvas.bitmapData.unlock (); } 
 
 
 
 canvas.bitmapData.fillRect (!); - Denne linjen klarner lerretet ved å fylle den med en svart farge. 
 
 canvas.bitmapData.copyPixels (); - Ikke veldig nyttig i vår situasjon, men kopierer alle piksler fra en del av et bilde. 
 
 canvas.bitmapData.unlock (); - Dette fungerer med lås () for å optimalisere prosessen 
 
 
 
 
 Trinn 9: Fjerne Colour 
 
 
 
 privat funksjon Update (e: Hendelses): void {canvas.bitmapData.lock ();. canvas.bitmapData.fillRect (nytt rektangel (0,0, stage.width, stage.height), 0x000000); CustomBlitting (spriteSheet, nytt rektangel (0,0,128,128), nytt punkt (100, 100), 0xE730F2); canvas.bitmapData.unlock (); } 
 
 
 For hver rad vi har ... 
 
 Kontroller hver piksel i den raden ... 
 
 Flytt til neste rad ned ... 
 privat funksjon CustomBlitting (src: BitmapData, srcRect: rektangel, destPoint: Point, farge: uint): void {for (var i: int = 0; i < srcRect.height, jeg ++ ) {for (var j: int = 0; j < srcRect.width; j ++) {var currentPixel: uint = src.getPixel (srcRect.x + j, srcRect.y + i); if (currentPixel = farge!) {canvas.bitmapData.setPixel (destPoint.x + j, destPoint.y + i, currentPixel); }}}} 
 
 getPixel (x, y); - Dette returnerer fargen på en piksel på X, Y plassering 
 
 setPixel (x, y, farge);. - Dette setter farge på en piksel til farge på X, Y plassering av lerretet 
 
 
 Trinn 10: Utfordringer <.! br> 
 
 
 
 Konklusjon 
 
!

