Share
En este Consejo rápido, aprenderá cómo usar BitmapData's copyPixels () método para crear un efecto de sendero borroso muy rápido para las balas en tus juegos de disparos.
Echemos un vistazo al resultado final en el que trabajaremos:
Usa las teclas de flecha o WASD para mover la nave y pulsa la barra espaciadora para disparar balas hacia el cursor del mouse.
Pasaremos rápidamente (muy rápidamente) a través de la idea muy básica que se usa en blitting antes de continuar, ya que lo usaremos en este Consejo rápido..
Copiar píxeles en la pantalla es el núcleo de blitting. En AS3, se realiza copiando una región rectangular de píxeles de un BitmapData a otro BitmapData, utilizando BitmapData.copyPixels ().
La imagen de arriba ilustra exactamente eso. Copiamos los píxeles de una región rectangular de un BitmapData y ponerlo en otro.
La idea que exploraremos en este Consejo rápido es copiar todo lo que necesita un efecto de desenfoque aplicado en un contenedor y aplicar efectos post-blitting para crear el efecto que deseamos.
Ya existe un código muy básico para un juego de disparos espaciales ya hecho en los archivos de origen, ya que este no es el tema central de esta publicación. Solo hay un barco que se mueve con las teclas WASD o de flecha. Sin embargo, el código está muy comentado y es muy básico, por lo que es probable que no tenga problemas para entenderlo. Utiliza imágenes incrustadas para las imágenes de tu juego, pero también puedes usar sprites con un giro muy leve en una función que crearemos más adelante (lo discutiremos en un momento).
Saltemos a Main.as y crea un Mapa de bits que contendrá cada bala y objeto que necesita ser borrosa. Añádelo antes que nada en la lista de niños..
private var _container: Bitmap; private var _containerData: BitmapData; función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Creando la nave del jugador y el vector que contendrá las viñetas _playerShip = new PlayerShip (); _bullets = nuevo Vector.(); // // Inicializando el contenedor _containerData = new BitmapData (550, 400, true, 0xFFFFFFFF); _container = new Bitmap (_containerData); // addChild (_container); addChild (_playerShip); // Listener para el bucle del juego addEventListener (Event.ENTER_FRAME, onEnterFrame);
Hasta ahora, todo ha sido muy simple. Solo hemos creado el contenedor y lo hemos agregado a la lista de visualización.
En este paso, lo que tenemos que hacer es dibujar las balas en el contenedor de cada fotograma. Lo haremos en el onEnterFrame () función de la Principal clase.
función privada onEnterFrame (e: Event): void _playerShip.update (); // Actualizando cada viñeta para (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); //
La única línea que importa es la línea 10. En esa línea, dibujamos los píxeles de cada viñeta (al acceder al BitmapData del hijo de la bala, que es el BitmapData que contiene los píxeles de la imagen incrustada) en su posición. Si no estás usando imágenes incrustadas en tu juego, puedes usar BitmapData.draw () en lugar. Este método es un poco más lento, pero funcionará de la misma manera.
Pasamos todo el rectángulo de la bala. BitmapData Porque queremos dibujarlo todo. Puede jugar con este rectángulo y la posición para dibujar para crear resultados muy divertidos (por ejemplo, una posición basada en una función periódica como Math.sin () para crear un efecto de sendero interesante, aunque la bala solo va en línea recta, o solo dibuja el "fuego" de una bala de cohete pasando un rectángulo más pequeño para crear el rastro solo con el disparo).
Cuando compiles y ejecutes tu juego, obtendrás algo como esto después de disparar algunas balas:
Sin embargo, eso no es lo que realmente queremos. Queremos agregar un efecto de sendero borroso, así que qué hacer?
Este es el ultimo paso. Todo lo que nos queda por hacer es aplicar el efecto de desenfoque en el BitmapData Que contiene todas las imágenes de las balas. Para ello, utilizaremos un ColorMatrixFilter.
private var _colorMatrixFilter: ColorMatrixFilter; función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Creando la nave del jugador y el vector que contendrá las viñetas _playerShip = new PlayerShip (); _bullets = nuevo Vector.(); // // Inicializando el contenedor _containerData = new BitmapData (550, 400, true, 0); _container = new Bitmap (_containerData); // // Inicializando el filtro de matriz _colorMatrixFilter = nuevo ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,99, 0]); // addChild (_container); addChild (_playerShip); // Listener para el bucle del juego addEventListener (Event.ENTER_FRAME, onEnterFrame); función privada enEnterFrame (e: Event): void _playerShip.update (); // Actualizando cada viñeta para (var i: int = 0; i < _bullets.length; i++) _bullets[i].update(); _containerData.copyPixels(Bitmap(_bullets[i].getChildAt(0)).bitmapData, Bitmap(_bullets[i].getChildAt(0)).bitmapData.rect, new Point(_bullets[i].x, _bullets[i].y)); // // Adding the blur effect on the container _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), new BlurFilter(2, 2, 1)); _containerData.applyFilter(_containerData, _containerData.rect, new Point(0, 0), _colorMatrixFilter); //
los ColorMatrixFilter trabaja mediante la manipulación de cada píxel en el BitmapData De acuerdo a los valores en el filtro matricial. Echa un vistazo a la en eso() función. Creamos un nuevo ColorMatrixFilter allí, pasando una matriz con un montón de valores en ella. Estos valores crearán la matriz de transformación del filtro de matriz, lo que nos permitirá manipular los píxeles de la imagen..
El filtro funciona básicamente así: cada componente del color resultante (rojo, verde, azul y alfa) se calcula multiplicando los componentes de origen por los números respectivos en la fila respectiva de la matriz y sumándolos, junto con el quinto valor de la fila.
Por ejemplo, si tomamos el filtro de matriz que creamos en el código como nuestro filtro de matriz de ejemplo y lo aplicamos a un píxel con los valores "rojo = 50, verde = 10, azul = 200, alfa = 128", el componente rojo resultante del píxel será"rojo = (50 * 1) + (10 * 0) + (200 * 0) + (128 * 0) + 0 = 50", porque la primera fila de nuestra matriz es"1 0 0 0 0". El componente alfa será"alfa = (50 * 0) + (10 * 0) + (200 * 0) + (128 * 0,99) + 0 = 126", porque la última fila de nuestra matriz es"0 0 0 0.99 0".
¿Ves lo que pasa ahora? Cada fotograma multiplicamos el píxel de cada píxel por 0,99, lo que lo hace un poco más transparente para crear el efecto rastro. Si desea leer más sobre el ColorMatrixFilter, Puede consultar la documentación..
El efecto borroso se cuida aplicando un simple Filtro de desenfoque en el BitmapData.
Compila el juego ahora y obtendrás el efecto deseado.!
Acabas de aprender a aplicar un ColorMatrixFilter para crear un efecto de camino borroso, usando el muy rápido BitmapData.copyPixels () ¡método! Con esto, puede agregar el efecto de desenfoque a cada objeto que desee y no preocuparse por la desaceleración de Flash Player porque está agregando demasiados niños con filtros de desenfoque en el escenario. Se pueden construir muchas cosas geniales con este principio; Sólo tienes que ser creativo.
¡Gracias por leer! Si tienes alguna duda, por favor comenta.!
Accentsconagua