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
!