Share
Aujourd'hui, vous allez apprendre à supprimer la couleur d'arrière-plan d'une feuille de sprite à l'aide d'AS3 et à fusionner le résultat en une toile bitmap. Continuez à lire pour en savoir plus!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Alors, il est temps de dessiner votre feuille de sprites. Ouvrez votre programme 'pixel-art' préféré et créez une image de 128x128 et donnez-lui une couleur de fond de '# e731f2' qui est une jolie couleur pourpre!
Ceci est mon oeuvre d'art incroyable:
Enregistrez votre image quelque part organisée et laissez-nous continuer!
Maintenant, je l'appelle un sprite drap même si ce n'est qu'une image. Une 'feuille de sprite' consiste généralement en plusieurs sprites mais on peut imaginer en avoir plus, à droite?
Quoi qu’il en soit, si vous utilisez Flash CS4 ou une version ultérieure, importez simplement votre image via Fichier | Import | Importer dans la bibliothèque:
Si vous utilisez un autre IDE AS3, j'ai inclus le fichier SWC, vous devriez donc probablement ignorer cette étape. Si vous souhaitez intégrer vos propres images, je suis sûr que votre IDE de choix aura cette fonctionnalité.
Nous avons maintenant notre feuille de sprite à la bibliothèque; nous devrions vraiment en faire un Classe.
Cliquez avec le bouton droit sur l'image dans la bibliothèque et sélectionnez "Propriétés". Attribuez à l'image les propriétés suivantes:
Hit OK. Si vous recevez un avertissement, ignorez-le; ce n'est pas grave ici.
Si vous n'êtes pas familier avec le concept de classe de document, consultez ce conseil avant de continuer à lire..
Créez une nouvelle "classe ActionScript 3.0" et nommez-la "principale". Une fois le fichier créé, enregistrez-le sous le nom "Main.as"..
Ce code devrait être placé dans notre nouvelle classe:
package import flash.display.MovieClip; Classe publique Main étend MovieClip fonction publique Main () // code constructeur
Nous n'avons pas encore fini, cependant! Si vous utilisez l'IDE Flash, accédez au "Panneau de propriétés" et définissez la "Classe de document" sur "Principal". Si vous vous demandez ce que cela fait, cela signifie que lorsque votre application / jeu est exécuté par Flash Player, Main.as sera la classe qui est liée au fichier SWF lui-même. Cool hein?
Lancer le programme; si vous n'obtenez aucune erreur, alors vous devriez être prêt à partir!
Avant de faire un blitting, nous devrons d'abord créer une toile sur laquelle nous allons blit. Si vous n'êtes pas sûr du terme Blitting ou si vous souhaitez en savoir plus à ce sujet, consultez ce didacticiel..
Maintenant, nous allons déclarer une nouvelle variable Bitmap à laquelle nous allons copier (copier) l’image..
toile var privée: Bitmap;
Après cela, nous ajouterons un une fonction appelé Initialiser() ce qui nous permettra de tout mettre en place proprement:
fonction publique Main () Initialize ();
Laissez-nous créer la fonction maintenant:
fonction privée Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Définit le canevas sur noir. stage.addChild (toile); // Ajoute la toile à la scène.
Nous n’avons toujours pas terminé, car nous devons encore ajouter le importations:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData;
Lancer le programme; si elle a un fond noir, cela a fonctionné!
Tout d'abord, nous devrons créer une nouvelle variable de type SpriteSheet - qui était la classe pour l'image que nous avions importée plus tôt, rappelez-vous?
toile var privée: Bitmap; private var spriteSheet: SpriteSheet;
Nous allons ensuite l'initialiser:
fonction privée Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Définit le canevas sur noir. spriteSheet = new SpriteSheet (); // Définit spriteSheet pour contenir une instance de l'image que nous avons créée. stage.addChild (toile); // Ajoute la toile à la scène.
Exécutez le programme et vous ne devriez rien voir. corrigeons ça tout de suite!
Maintenant, nous devons ajouter un ENTER_FRAME un événement. Cela permettra au programme de mettre à jour 24 fois par seconde (24 FPS) dans notre cas..
dans le Principale() fonction, ajoutez la ligne suivante:
fonction publique Main () Initialize (); stage.addEventListener (Event.ENTER_FRAME, mise à jour);
Maintenant, nous devons faire la Mettre à jour() une fonction. Ajoutez cette fonction après les autres fonctions:
fonction privée Update (e: Event): void
N'oublie pas le importations:
import flash.display.MovieClip; import flash.display.Bitmap; import flash.display.BitmapData; import flash.events.Event;
Maintenant, nous sommes prêts à faire un peu de blitting!
Voici la partie intéressante!
Bon, ce que nous voulons faire, c'est:
Dans la fonction de mise à jour, tapez le code suivant:
fonction privée Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nouveau Rectangle (0,0, stage.width, stage.height), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, nouveau Rectangle (0,0, 128, 128), nouveau Point (100, 100)); canvas.bitmapData.unlock ();
Si vous exécutez ceci, vous obtiendrez votre image sur la toile! Cependant, ce n’est pas simplement ce que nous visons car nous souhaitons supprimer cette couleur de fond de l’image..
Je vais d'abord expliquer une partie du code ci-dessus:
Accentsconagua
canvas.bitmapData.lock (); - Cette ligne optimise la fusion et c'est une bonne habitude de la taper la plupart du temps!canvas.bitmapData.fillRect (); - Cette ligne efface la toile en la remplissant d'une couleur noire. canvas.bitmapData.copyPixels (); - Pas très utile dans notre cas, mais copie tous les pixels d'une partie de l'image. canvas.bitmapData.unlock (); - Cela fonctionne avec fermer à clé() optimiser le processus.Maintenant, vous devriez avoir ceci à l'écran…
Oui, je sais, vous avez probablement raison. Je pense que nous devrions nous débarrasser du violet aussi…
Enfin, il est temps d'enlever la couleur pourpre!
Ce que nous voulons faire, c'est vérifier chaque pixel. si le pixel est violet, nous ne le copions tout simplement pas sur la toile. Pour ce faire, nous allons créer notre propre fonction.
Changement Mettre à jour() à ce qui suit:
fonction privée Update (e: Event): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nouveau Rectangle (0,0, stage.width, stage.height), 0x000000); CustomBlitting (spriteSheet, nouveau Rectangle (0,0, 128, 128), nouveau Point (100, 100), 0xE730F2); canvas.bitmapData.unlock ();
Notre nouvelle fonction (CustomBlitting (), que nous n'avons pas encore écrit) prend la plupart des paramètres de copyPixels, ainsi qu'un paramètre supplémentaire: la couleur que nous souhaitons supprimer.
Il est temps d'écrire la fonction. Ce code peut paraître compliqué si vous n’avez jamais fait de imbriqué pour la boucle avant. Le fonctionnement de cette boucle est essentiellement le suivant:
fonction privée CustomBlitting (src: BitmapData, srcRect: Rectangle, destPoint: Point, couleur: uint): void pour (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 );
Permettez-moi de vous expliquer les méthodes getPixel et setPixel, même si elles devraient probablement être explicites:
getPixel (x, y); - Ceci retourne la couleur d'un pixel à l'emplacement X, Y.setPixel (x, y, couleur); - Ceci définit la couleur d'un pixel sur Couleur à l'emplacement X, Y de la toile.Maintenant, si vous exécutez le programme, cela fonctionne!
Je n'ai qu'un défi à faire pour ce tutoriel:
Accepter un tableau de couleurs en tant que paramètre et supprimer toutes les couleurs de l'image qui se trouvent dans le tableau..
Bonne chance!
J'espère que vous avez apprécié ce tutoriel et appris quelque chose de nouveau aujourd'hui. Si vous souhaitez me montrer votre SWF avec les défis terminés, laissez un commentaire ci-dessous!
