Blitting Med AS3: Fjerne en punktgrafikk Bakgrunn Color

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



Trinn 3:. Eksportere Sprite Sheet

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



Trinn 4:. Opprette dokument Class

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.
Pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {//konstruktør kode}}}

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å



Trinn 5: Opprette Canvas

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
privat Var lerret: Bitmap;

Etter at vi har gjort dette, vil vi legge til en funksjon som heter Initial () som vil tillate oss å sette alt opp pent:
offentlig funksjon main () {Initial ( );}

La oss skape funksjonen nå:
privat funksjon Initial (): void {lerret = new Bitmap (nye BitmapData (550, 400, falsk, 0x000000)); //Setter Canvas Black. stage.addChild (lerret); //Legger lerretet til scenen}

Vi er fortsatt ikke ferdig men som vi likevel må legge importen:.
Import flash.display.MovieClip, import flash.display.Bitmap; import flash.display .BitmapData;

Kjør programmet; hvis det har en svart bakgrunn, det fungerte



Trinn 6: Initialisering av SpriteSheet

Først må vi lage en ny variabel av typen SpriteSheet - som var det klasse for! bildet vi importert tidligere, husker
privat Var lerret: Bitmap, private Var spriteSheet: SpriteSheet;

Vi skal da initialisere det:
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}

Kjør programmet og du skal se noe.; la oss fikse det med en gang



Trinn 7: Oppdatere Program

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:.
Offentlig funksjon main () {Initial (); stage.addEventListener (Event.ENTER_FRAME, Oppdater);}

Nå må vi gjøre det Update () -funksjonen. Legg denne funksjonen etter den andre funksjoner:
privat funksjon Update (e: Hendelses): void {}

Ikke glem importen:
import flash.display.MovieClip, importere flash.display.Bitmap; import flash.display.BitmapData, import flash.events.Event;

Nå er vi klare til å gjøre noen blitting



Trinn 8: Blitting

Her kommer den interessante delen! !

Greit, så hva vi ønsker å gjøre er:

Tøm lerretet

blit bildet og fjerne bakgrunnsfargen

I oppdateringsfunksjonen, skriver du inn følgende kode:
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 (); }

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.

  • lerret. bitmapData.lock (); - Denne linjen optimaliserer blitting og det er en god vane å skrive det meste av tiden

    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

    Nå bør du ha denne på skjermen ...

    Ja, jeg vet, er du sannsynligvis rett.. Jeg synes vi skal bli kvitt den lilla også ...



    Trinn 9: Fjerne Colour

    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:
    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 (); }

    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:

    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); }}}}

    La meg forklare getPixel og setPixel, selv om de burde være selvforklarende:

    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

    Nå hvis du kjører programmet, det fungerer

    Trinn 10: Utfordringer <.! br>

    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
    Lykke til!

    Konklusjon

    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
    !