Share
Oggi imparerai come rimuovere il colore di sfondo da un foglio sprite usando AS3 e mischia il risultato a una tela bitmap. Continuate a leggere per saperne di più!
Diamo un'occhiata al risultato finale su cui lavoreremo:
Quindi, è tempo di disegnare il tuo sprite. Apri il tuo programma 'pixel-art' preferito e crea un'immagine di 128x128 e dai un colore di sfondo di '# e731f2', che è un bel colore viola!
Questa è la mia fantastica opera d'arte:
Salva la tua immagine da qualche parte organizzata e continuiamo!
Ora, lo chiamo uno sprite foglio anche se è solo un'immagine. Un "foglio di sprite" di solito è composto da più di uno sprite ma possiamo immaginare di avere di più, giusto?
Ad ogni modo, se utilizzi Flash CS4 o versioni successive, importa semplicemente l'immagine tramite File | Importa | Importa nella libreria:
Se si utilizza un altro IDE AS3, ho incluso il file SWC, quindi è consigliabile saltare questo passaggio. Se desideri incorporare le tue immagini, sono certo che il tuo IDE di scelta avrà questa funzione.
Ora abbiamo il nostro foglio sprite nella Libreria; dovremmo davvero farlo diventare un Classe.
Fare clic con il tasto destro del mouse sull'immagine nella libreria e selezionare "Proprietà". Assegna all'immagine le seguenti proprietà:
Hit OK. Se ricevi un avvertimento, ignoralo; non importa qui.
Se non hai familiarità con il concetto di una classe di documenti, consulta questo suggerimento rapido prima di leggere ulteriormente.
Crea una nuova "Classe ActionScript 3.0" e assegnagli il nome "Principale". Quando il file è stato creato, salvalo come "Main.as".
Questo codice dovrebbe essere inserito nella nostra nuova classe:
package import flash.display.MovieClip; public class Main estende MovieClip public function Main () // constructor code
Non abbiamo ancora finito, comunque! Se si utilizza l'IDE Flash, accedere al "Pannello Proprietà" e impostare "Classe documento" su "Principale". Se ti stai chiedendo cosa faccia, significa che quando la tua applicazione / gioco viene eseguita da Flash Player, Main.as sarà la classe che è collegata al SWF stesso. Splendido, no?
Esegui il programma; se non ottieni errori, dovresti essere pronto!
Prima di fare qualsiasi blitter, per prima cosa dovremo creare una tela su cui saltare. Se non sei sicuro del termine Blitting o vorresti saperne di più, ti preghiamo di dare un'occhiata a questo tutorial.
Ora dichiareremo una nuova variabile Bitmap, a cui blitereremo (copia) l'immagine.
tela var privata: Bitmap;
Dopo averlo fatto, aggiungeremo un funzione chiamato Inizializzare() che ci permetterà di sistemare tutto in ordine:
funzione pubblica Main () Initialize ();
Cerchiamo di creare la funzione ora:
funzione privata Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Imposta la tela sul nero. stage.addChild (tela); // Aggiunge la tela allo stage.
Tuttavia, non siamo ancora finiti, poiché dobbiamo ancora aggiungere il importazioni:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData;
Esegui il programma; se ha uno sfondo nero, ha funzionato!
Innanzitutto, dovremo creare una nuova variabile di tipo SpriteSheet - che era la classe per l'immagine che abbiamo importato prima, ricorda?
tela var privata: Bitmap; private var spriteSheet: SpriteSheet;
Quindi inizializzeremo:
funzione privata Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Imposta la tela sul nero. spriteSheet = new SpriteSheet (); // Imposta spriteSheet per contenere un'istanza dell'immagine che abbiamo creato. stage.addChild (tela); // Aggiunge la tela allo stage.
Esegui il programma e non dovresti vedere nulla; sistemiamolo subito!
Ora dobbiamo aggiungere un ENTER_FRAME evento. Ciò consentirà al programma di aggiornare 24 volte al secondo (24 FPS) nel nostro caso.
Nel Principale() funzione, aggiungi la seguente riga:
funzione pubblica Main () Initialize (); stage.addEventListener (Event.ENTER_FRAME, Update);
Ora dobbiamo fare il Aggiornare() funzione. Aggiungi questa funzione dopo le altre funzioni:
Aggiornamento della funzione privata (e: Event): void
Non dimenticare il importazioni:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; import flash.events.Event;
Ora siamo pronti a fare un po 'di bliter!
Ecco la parte interessante!
Bene, quindi quello che vogliamo fare è:
Nella funzione di aggiornamento, digitare il seguente codice:
funzione privata Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (new Rectangle (0,0, stage.width, stage.height), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, new Rectangle (0,0,128,128), new Point (100, 100)); canvas.bitmapData.unlock ();
Se lo fai, otterrai la tua immagine sulla tela! Tuttavia, questo non è solo ciò a cui miriamo in quanto desideriamo rimuovere quel colore di sfondo dall'immagine.
Spiegherò prima parte del codice sopra:
Accentsconagua
canvas.bitmapData.lock (); - Questa linea ottimizza il blitting ed è una buona abitudine scrivergli la maggior parte del tempo!canvas.bitmapData.fillRect (); - Questa linea cancella la tela riempiendola con un colore nero. canvas.bitmapData.copyPixels (); - Non molto utile nella nostra situazione ma copia tutti i pixel da una parte di un'immagine. canvas.bitmapData.unlock (); - Funziona con serratura() per ottimizzare il processo.Ora dovresti avere questo sullo schermo ...
Sì, lo so, probabilmente hai ragione. Penso che dovremmo sbarazzarci anche del viola ...
Infine, è ora di rimuovere il colore viola!
Quello che vogliamo fare è controllare ogni pixel; se il pixel è viola, non lo copiamo semplicemente sulla tela. Per fare questo, faremo la nostra funzione.
Modificare Aggiornare() al seguente:
funzione privata Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (new Rectangle (0,0, stage.width, stage.height), 0x000000); CustomBlitting (spriteSheet, new Rectangle (0,0,128,128), new Point (100, 100), 0xE730F2); canvas.bitmapData.unlock ();
La nostra nuova funzione (CustomBlitting (), che non abbiamo ancora scritto) prende la maggior parte dei parametri che fa copyPixels, insieme ad uno extra: il colore che vogliamo rimuovere.
È ora di scrivere la funzione. Questo codice potrebbe sembrare complicato se non ne hai mai fatto uno ciclo annidato prima. Il modo in cui questo ciclo funziona è fondamentalmente:
funzione privata CustomBlitting (src: BitmapData, srcRect: Rectangle, destPoint: Point, color: uint): void for (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 );
Lasciatemi spiegare getPixel e setPixel, anche se probabilmente dovrebbero essere auto-esplicativi:
getPixel (x, y); - Ciò restituisce il colore di un pixel nella posizione X, Y..setPixel (x, y, color); - Questo imposta il colore di un pixel in colore nella posizione X, Y della tela.Ora se esegui il programma, funziona!
Ho solo una sfida da fare per questo tutorial:
Accetta una matrice di colori come parametro e rimuovi tutti i colori dall'immagine che si trovano nella matrice.
In bocca al lupo!
Spero ti sia piaciuto questo tutorial e ho imparato qualcosa di nuovo oggi. Se desideri mostrarmi il tuo SWF con le sfide completate, lascia un commento qui sotto!
