Share
Astăzi, veți învăța cum să eliminați culoarea de fundal dintr-o foaie de sprite folosind AS3 și blit rezultatul într-o panza bitmap. Citiți mai departe pentru a afla mai multe!
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Deci, este timpul să vă desenați foaia de lucru. Deschideți programul preferat de "pixel-art" și creați o imagine de 128x128 și dați-i o culoare de fundal "# e731f2" care este o culoare purpurie purpurie!
Aceasta este uimitorul meu opera de arta:
Salvați imaginea undeva organizată și permiteți-ne să continuăm!
Acum, eu numesc acest sprite foaie chiar dacă este doar o singură imagine. O "foaie de sprite" constă, de obicei, din mai mult de un sprite, dar ne putem imagina că avem mai multe, bine?
Oricum, dacă utilizați Flash CS4 sau o versiune superioară, pur și simplu importați imaginea prin intermediul Fișier | Import | Importați în Bibliotecă:
Dacă utilizați orice alt AS3 IDE, am inclus fișierul SWC, astfel încât să treceți peste acest pas. Dacă doriți să vă încorporați propriile imagini, sunt sigur că IDE-ul dvs. de alegere va avea această caracteristică.
Acum am primit foaia de sprite în Bibliotecă; ar trebui să o facem într-adevăr Clasă.
Faceți clic dreapta pe imaginea din bibliotecă și selectați "Proprietăți". Dați imaginii următoarele proprietăți:
Apăsați OK. Dacă primiți un avertisment, ignorați-l; nu contează aici.
Dacă nu sunteți familiarizat cu conceptul de clasă de documente, consultați acest sfat rapid înainte de a citi mai departe.
Creați o nouă "clasă ActionScript 3.0" și dați-i numele "Main". Când fișierul a fost creat, salvați-l ca "Main.as".
Acest cod trebuie plasat în noua noastră clasă:
pachet import flash.display.MovieClip; public class Main extinde MovieClip funcția publică Main () // constructor code
Încă nu am terminat! Dacă utilizați Flash IDE, navigați la panoul "Proprietăți" și setați "Clasa de documente" în "Principal". Dacă vă întrebați ce înseamnă asta, înseamnă că atunci când aplicația / jocul dvs. este rulat de Flash Player, Main.as va fi clasa care este legată de SWF în sine. Tare nu?
Rulați programul; dacă nu obțineți nici o eroare atunci ar trebui să fiți bine să mergeți!
Înainte de a face orice blitting, va trebui mai întâi să facem o pânză pe care să o luăm. Dacă nu sunteți sigur de termenul Blut sau doriți să aflați mai multe despre el, vă rugăm să aruncați o privire la acest tutorial.
Acum, vom declara o nouă variabilă Bitmap, la care vom bloca (copia) imaginea.
boot privat var: Bitmap;
După ce am făcut acest lucru, vom adăuga o funcţie denumit Initializare () care ne va permite să facem totul în ordine:
funcția publică Main () Initialize ();
Permiteți-ne să creăm funcția acum:
funcția privată Initialize (): void canvas = Bitmap nou (nouă BitmapData (550, 400, false, 0x000000)); // Setează pânza la negru. stage.addChild (pânză); // Adaugă pânza în scenă.
Încă nu suntem terminați, deoarece trebuie să adăugăm încă importuri:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData;
Rulați programul; dacă are un fundal negru, a funcționat!
În primul rând, va trebui să facem o nouă variabilă de tip SpriteSheet - care a fost clasa pentru imaginea pe care am importat-o mai devreme, amintiți-vă?
boot privat var: Bitmap; privat var spriteSheet: SpriteSheet;
Atunci vom inițializa:
funcția privată Initialize (): void canvas = Bitmap nou (nouă BitmapData (550, 400, false, 0x000000)); // Setează pânza la negru. spriteSheet = noua SpriteSheet (); // Setează spriteSheet pentru a ține o instanță a imaginii pe care am făcut-o. stage.addChild (pânză); // Adaugă pânza în scenă.
Rulați programul și nu ar trebui să vedeți nimic; hai să rezolvăm asta imediat!
Acum trebuie să adăugăm un ENTER_FRAME eveniment. Acest lucru va permite programului să se actualizeze de 24 ori pe secundă (24 FPS) în cazul nostru.
În Principal() adăugați următoarea linie:
funcția publică Main () Initialize (); stage.addEventListener (Event.ENTER_FRAME, Actualizare);
Acum trebuie să facem Actualizați() funcţie. Adăugați această funcție după celelalte funcții:
funcția privată Actualizare (e: Eveniment): void
Nu uitați importuri:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; importul flash.events.Event;
Acum suntem gata să facem niște lovituri!
Aici vine partea interesantă!
Bine, deci ceea ce vrem să facem este:
În funcția de actualizare, tastați următorul cod:
funcția privată Actualizare (e: Eveniment): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nou dreptunghi (0,0, lățime de scenă, stadiu.altimă), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, nou dreptunghi (0,0,128,128), punct nou (100, 100)); canvas.bitmapData.unlock ();
Dacă executați acest lucru, veți obține imaginea pe panza! Cu toate acestea, nu este vorba doar de ceea ce dorim, deoarece vrem să eliminăm culoarea de fundal din imagine.
Voi explica mai întâi o parte din codul de mai sus:
Accentsconagua
canvas.bitmapData.lock (); - Această linie optimizează bliturile și este un obicei bun să le tipi de cele mai multe ori!canvas.bitmapData.fillRect (); - Această linie îndepărtează panza, completând-o cu o culoare neagră. canvas.bitmapData.copyPixels (); - Nu este foarte util în situația noastră, ci copiază toți pixelii dintr-o parte a unei imagini. canvas.bitmapData.unlock (); - Aceasta funcționează cu blocare() pentru a optimiza procesul.Acum ar trebui să aveți asta pe ecran ...
Da, știu, probabil că ai dreptate. Cred că ar trebui să scăpăm și de violet ...
În cele din urmă, este timpul să eliminați culoarea purpurie!
Ceea ce vrem să facem este să verificăm fiecare pixel; dacă pixelul este purpuriu, pur și simplu nu îl copiem pe panza. Pentru a face acest lucru, ne vom face propria noastră funcție.
Schimbare Actualizați() la următoarele:
funcția privată Actualizare (e: Eveniment): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nou dreptunghi (0,0, lățime de scenă, stadiu.altimă), 0x000000); CustomBlitting (spriteSheet, nou dreptunghi (0,0128,128), punct nou (100, 100), 0xE730F2); canvas.bitmapData.unlock ();
Noua noastră funcție (CustomBlitting (), pe care nu am scris-o încă) ia majoritatea parametrilor pe care CopyPixels le face, împreună cu unul suplimentar: culoarea pe care dorim să o eliminăm.
Timpul pentru scrierea funcției. Acest cod poate părea complicat dacă nu ați făcut-o niciodată imbricate pentru buclă inainte de. Modul în care funcționează această buclă este în esență:
funcția privată CustomBlitting (src: BitmapData, srcRect: Rectangle, destPoint: Point, color: uint): void pentru (var i: int = 0; i < srcRect.height; i++ ) for( var j:int = 0; j < srcRect.width; j++ ) var currentPixel:uint = src.getPixel( srcRect.x + j, srcRect.y + i ); if( currentPixel != color ) canvas.bitmapData.setPixel( destPoint.x + j, destPoint.y + i, currentPixel );
Permiteți-mi să explic pe getPixel și setPixel, deși probabil ar trebui să fie auto-explicative:
getPixel (x, y); - Aceasta returnează culoarea unui pixel la locația X, Y.setPixel (x, y, culoare); - Aceasta stabilește culoarea unui pixel în culoare la poziția X, Y a pânzei.Acum, dacă rulați programul, funcționează!
Am doar o provocare pentru tine de a face pentru acest tutorial:
Acceptați o gamă de culori ca parametru și eliminați toate culorile din imaginea din matrice.
Mult noroc!
Sper că v-ați bucurat de acest tutorial și ați învățat ceva nou astăzi. Dacă doriți să-mi arătați SWF-ul dvs. cu provocările finalizate, lăsați un comentariu mai jos!
