Share
Hoy, aprenderá cómo eliminar el color de fondo de una hoja de sprites usando AS3, y mezclará el resultado en un lienzo de mapa de bits. Sigue leyendo para saber más.!
Echemos un vistazo al resultado final en el que trabajaremos:
Por lo tanto, es hora de dibujar su hoja de sprites. Abre tu programa favorito de 'pixel-art' y crea una imagen de 128x128 y dale un color de fondo de '# e731f2' que es un bonito color púrpura!
Esta es mi obra de arte increíble:
Guarda tu imagen en algún lugar organizado y déjanos continuar.!
Ahora, lo llamo un sprite hoja aunque solo sea una imagen. Una 'hoja de sprites' generalmente consiste en más de un sprite, pero podemos imaginar que tenemos más, ¿verdad??
De todos modos, si está utilizando Flash CS4 o superior, simplemente importe su imagen a través de Archivo | Importar Importar a la biblioteca:
Si está utilizando cualquier otro IDE de AS3, he incluido el archivo SWC, por lo que probablemente debería omitir este paso. Si desea insertar sus propias imágenes, estoy seguro de que su IDE de elección tendrá esta característica.
Ahora tenemos nuestra hoja de sprites en la Biblioteca; deberíamos convertirlo en una Clase.
Haga clic derecho en la imagen en la biblioteca y seleccione 'Propiedades'. Dale a la imagen las siguientes propiedades:
Pulsa OK. Si recibe una advertencia, simplemente ignórela; no importa aqui.
Si no está familiarizado con el concepto de una clase de documento, consulte este Consejo rápido antes de seguir leyendo..
Cree una nueva 'Clase de ActionScript 3.0' y asígnele el nombre 'Principal'. Cuando se haya creado el archivo, guárdelo como 'Main.as'.
Este código debe ser colocado en nuestra nueva Clase:
paquete import flash.display.MovieClip; clase pública principal extiende MovieClip función pública principal () // código de constructor
¡No hemos terminado todavía, sin embargo! Si está utilizando el IDE de Flash, navegue hasta el 'Panel de propiedades' y configure la 'Clase de documento' como 'Principal'. Si se está preguntando qué hace eso, significa que cuando su aplicación / juego es ejecutado por Flash Player, Main.as Será la clase que está vinculada al propio SWF. Genial, eh?
Ejecuta el programa; Si no obtienes errores, deberías estar listo!
Antes de que hagamos alguna blit, primero tendremos que hacer un lienzo para hacer blit. Si no está seguro del término Blitting o desea obtener más información al respecto, consulte este tutorial..
Ahora, declararemos una nueva variable de mapa de bits, en la que borraremos (copiaremos) la imagen..
lienzo de var privado: Bitmap;
Después de que hayamos hecho esto, añadiremos un función llamado Inicializar() lo que nos permitirá configurar todo perfectamente:
función pública principal () inicializar ();
Vamos a crear la función ahora:
función privada Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Establece el lienzo en negro. stage.addChild (lienzo); // Agrega el lienzo al escenario.
Sin embargo, aún no hemos terminado, ya que todavía tenemos que agregar el importaciones:
importar flash.display.MovieClip; importar flash.display.Bitmap; importar flash.display.BitmapData;
Ejecuta el programa; Si tiene fondo negro, funcionó.!
En primer lugar, tendremos que hacer una nueva variable de tipo. Hoja de sprites - que era la Clase para la imagen que importamos anteriormente, recuerde?
lienzo de var privado: Bitmap; private var spriteSheet: SpriteSheet;
Luego lo inicializaremos:
función privada Initialize (): void canvas = new Bitmap (new BitmapData (550, 400, false, 0x000000)); // Establece el lienzo en negro. spriteSheet = new SpriteSheet (); // Establece spriteSheet para contener una instancia de la imagen que hicimos. stage.addChild (lienzo); // Agrega el lienzo al escenario.
Ejecuta el programa y no deberías ver nada; vamos a arreglar eso de inmediato!
Ahora necesitamos añadir un ENTER_FRAME evento. Esto permitirá que el programa se actualice 24 veces por segundo (24 FPS) en nuestro caso.
En el Principal() función, agregue la siguiente línea:
función pública principal () inicializar (); stage.addEventListener (Event.ENTER_FRAME, actualización);
Ahora necesitamos hacer el Actualizar() función. Agregue esta función después de las otras funciones:
Actualización de la función privada (e: Evento): void
No olvides el importaciones:
importar flash.display.MovieClip; importar flash.display.Bitmap; importar flash.display.BitmapData; import flash.events.Event;
Ahora estamos listos para hacer algo de blit!
Aquí viene la parte interesante.!
Bien, entonces lo que queremos hacer es:
En la función de actualización, escriba el siguiente código:
Actualización de la función privada (e: Evento): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nuevo rectángulo (0,0, stage.width, stage.height), 0x000000); canvas.bitmapData.copyPixels (spriteSheet, new Rectangle (0,0,128,128), new Point (100, 100)); canvas.bitmapData.unlock ();
Si ejecuta esto, obtendrá su imagen en el lienzo! Sin embargo, esto no es solo lo que buscamos, ya que deseamos eliminar ese color de fondo de la imagen.
Primero explicaré algunos de los códigos anteriores:
Accentsconagua
canvas.bitmapData.lock (); - Esta línea optimiza el blitting y es un buen hábito escribirlo la mayor parte del tiempo.!canvas.bitmapData.fillRect (); - Esta línea despeja el lienzo rellenándolo con un color negro.. canvas.bitmapData.copyPixels (); - No es muy útil en nuestra situación pero copia todos los píxeles de parte de una imagen. canvas.bitmapData.unlock (); - Esto funciona con bloquear() para optimizar el proceso.Ahora deberías tener esto en la pantalla ...
Sí, lo sé, probablemente tengas razón. Creo que deberíamos deshacernos del púrpura también ...
Finalmente, es hora de quitar el color morado.!
Lo que queremos hacer es comprobar a través de cada píxel; Si el píxel es púrpura, simplemente no lo copiamos en el lienzo. Para ello haremos nuestra propia función..
Cambio Actualizar() a lo siguiente:
Actualización de la función privada (e: Evento): void canvas.bitmapData.lock (); canvas.bitmapData.fillRect (nuevo rectángulo (0,0, stage.width, stage.height), 0x000000); CustomBlitting (spriteSheet, nuevo Rectángulo (0,0,128,128), nuevo Punto (100, 100), 0xE730F2); canvas.bitmapData.unlock ();
Nuestra nueva función (CustomBlitting (), que aún no hemos escrito) toma la mayoría de los parámetros que copyPixels hace, junto con uno adicional: el color que deseamos eliminar.
Es hora de escribir la función. Este código puede parecer complicado si nunca ha realizado una anidado para bucle antes de. La forma en que funciona este bucle es básicamente:
función privada 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 );
Permítanme explicarles getPixel y setPixel, aunque probablemente deberían explicarse por sí mismos:
getPixel (x, y); - Esto devuelve el color de un píxel en la ubicación X, Y.setPixel (x, y, color); - Esto establece el color de un píxel a color en la ubicación X, Y del lienzo.Ahora si ejecuta el programa, funciona!
Solo tengo un desafío que debes hacer para este tutorial:
Acepte una matriz de colores como parámetro y elimine cualquier color de la imagen que se encuentre en la matriz..
Buena suerte!
Espero que hayas disfrutado este tutorial y hayas aprendido algo nuevo hoy. Si desea mostrarme su SWF con los desafíos completados, deje un comentario a continuación!
