Share
En este Consejo rápido vamos a utilizar el ColorMatrixFilter y Filtro de desenfoque para crear un efecto Motion Trail.
Encontramos a este increíble autor gracias a FlashGameLicense.com, el lugar para comprar y vender juegos Flash..
Echemos un vistazo al resultado final en el que trabajaremos:
Cree un nuevo proyecto en FlashDevelop (o el editor que use), establezca las dimensiones del swf en 600x400 y el fondo en negro (# 000000).
A continuación, para configurar la escena vamos a tener dos. Sprites, una es para la pantalla principal a la que agregaremos todos los objetos de la pantalla y la otra es para el efecto Motion Trail que usa la pantalla principal como referencia.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Y añada el Sprites al Escenario.
// // Configurar pantallas // Tenemos que agregar nuestras dos pantallas al escenario addChild (_mtDisplay); addChild (_mainDisplay);
Ahora vamos a incrustar nuestra imagen de la estrella para su uso, o si quieres usar tu propia imagen.
[Incrustar (fuente = '… /… /images/star.png')] var star: Class;
Lo último que queremos hacer para la configuración es crear un lazo función. Esto se actualizará en cada fotograma, para cosas como posicionar y actualizar el Sendero de movimiento. Así que haz otra función y un detector de eventos para llamarlo cada fotograma..
Tu Main.as la clase debe verse algo como esto.
package rtmTrail import flash.display.Sprite; import flash.events.Event; Clase pública Main extiende Sprite función pública Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // // Cargar imágenes [Incrustar (fuente = '… /… /images/star.png')] var star: Class; // // Configurar pantallas // Tenemos que agregar nuestras dos pantallas al escenario addChild (_mtDisplay); addChild (_mainDisplay); // Agregue un nuevo servicio de escucha de eventos para nuestra función de bucle cada vez que ingresemos // el marco para mover los sprites y actualizar nuestro Efecto MotionTrail addEventListener (Event.ENTER_FRAME, loop); bucle de función privada (e: Evento): void private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: Sprite = new Sprite ();
Para probar el Motion Trail vamos a crear diez. Sprites Desde la imagen de la estrella y posicionarlos en lugares aleatorios. Adicionalmente vamos a crear un Punto Eso nos dice la velocidad y la dirección en que se moverán. Lo primero que debes hacer es crear dos. Arrays para almacenar esta información; uno es para el Duende y el otro es para el Punto.
var _sprites privados: Array = new Array (); private var _spritesDir: Array = new Array (); private var _txt: TextField = new TextField ();
Agrega esto a la en eso Funciona para crear aleatoriamente y colocar diez estrellas.
// Dibuja algunas estrellas var spr: Sprite; var bmp: Bitmap; para (var i: int = 0; i < 10; i++) spr = new Sprite(); bmp = new star(); spr.addChild(bmp); bmp.smoothing = true; spr.x = Math.random() * 240 + 80; spr.y = Math.random() * 240 + 80; // We are going to add the new sprite into the _sprites Array and a // Point that tells us where to move the sprite in the _spritesDir Array. _sprites.push(spr); _spritesDir.push(new Point(Math.random() * 6, Math.random() * 6)); // Last thing to do is add it to our main Display _mainDisplay.addChild(spr);
Ahora para crear el Campo de texto Agrega esto.
Accentsconagua
// Añadir un campo de texto también _txt.defaultTextFormat = new TextFormat ("arial", 18, 0xFF00FF); _txt.text = "Rastro de movimiento en tiempo real" _txt.x = 20; _txt.y = 10; _txt.width = 200; _mainDisplay.addChild (_txt); Ahora tenemos que movernos en nuestro lazo función para Duende control de movimiento Bastante simple, usa un para bucle para ir a través de cada Duende tenemos y si toca el borde invierte la x o la y de la Punto por lo que va en la otra dirección. También tendremos que mover el sprite en el bucle por los valores en el Punto Y, para hacerlo más interesante, girarlo lentamente..
bucle de función privada (e: Evento): void // Actualizar las formas de Sprite para (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; si (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Mueve la forma Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotar Sprite Shape _sprites [i] .rotation + = 2;
Para mover el Campo de texto a lo largo de la parte superior a la izquierda solo tenemos que restar de la X cada fotograma, y si se apaga, ajústelo al lado derecho de la pantalla.
bucle de función privada (e: Evento): void // Actualizar las formas de Sprite para (var i: int = 0; i < _sprites.length; i++) // Check to see if the shape is at or out of the // outer bounds so we can change direction if (_sprites[i].x <= 0 || _sprites[i].x >= 600) _spritesDir [i] .x = -_spritesDir [i] .x; si (_sprites [i] .y <= 0 || _sprites[i].y >= 400) _spritesDir [i] .y = -_spritesDir [i] .y; // Mueve la forma Sprite _sprites [i] .x + = _spritesDir [i] .x; _sprites [i] .y + = _spritesDir [i] .y; // Rotar Sprite Shape _sprites [i] .rotation + = 2; // Mover texto _txt.x - = 4 si (_txt.x < -200) _txt.x = 600;
Habiéndolo probado, deberías haber visto algo como esto (con las estrellas y el texto moviéndose por la pantalla, por supuesto).
Ahora es el momento de hacer nuestro MotionTrail Clase. Lo que esta clase va a hacer es tomar una DisplayObject que se dibuja a su propia pantalla (un Duende) y utilizando un par de filtros, difuminados y borrosos..
Así que haz tu nuevo MotionTrail.as Clase y deja que se extienda la Duende Clase.
Para una pequeña configuración previa de los próximos pasos, vamos a crear algunas variables, primero _monitor para almacenar una referencia de la pantalla principal, un BitmapData dibujar a Rectángulo el tamaño del escenario y una Punto en la esquina superior izquierda para los filtros. El último es un Formación Para el ColorMatrixFilter.
package rtmTrail import flash.display.Bitmap; importar flash.display.BitmapData; importar flash.display.DisplayObject; importar flash.display.Sprite; importar flash.geom.Point; import flash.geom.Rectangle; clase pública MotionTrail extiende Sprite función pública MotionTrail (pantalla: DisplayObject) // Referencia a la pantalla utilizada para la pista de movimiento _display = pantalla; // Cree un objeto BitmapData para dibujar en // Si desea usar esto para su propio proyecto y las dimensiones no son 600x400 // entonces tendría que cambiarlo aquí y el rectángulo a continuación _bitmapData = new BitmapData (600, 400 , verdadero, 0x000000); // Algunas cosas que los filtros deben ingresar para que funcione _rect = new Rectangle (0, 0, 600, 400); _pnt = nuevo punto (0, 0); _cMatrix = new Array (); // Agregue un poco de transparencia para que no le quite atención a la pantalla principal alpha = 0.6; addChild (nuevo mapa de bits (_bitmapData)); private var _display: DisplayObject; private var _bitmapData: BitmapData; var _rect privado: Rectángulo; private var _pnt: Point; var privado _cMatrix: Array;
Desde que hicimos esta clase tenemos que volver muy rápido a la _mtDisplay variable y cambiarlo desde el Duende Clase al MotionTrail Clase, junto con la entrada de la _mainDisplay variable.
private var _mainDisplay: Sprite = new Sprite (); private var _mtDisplay: MotionTrail = new MotionTrail (_mainDisplay);
Para crear nuestro Matriz Para el ColorMatrixFilter, la idea básica es desvanecer los colores, por lo que reducimos lentamente todos los valores a cero. Agrega esto a la constructor.
// Crear matriz para ColorMatrixFilter _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0, 0)) // Green _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Azul _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Esto multiplicará cada valor de cada píxel por 0,92 y al hacerlo, cada cuadro se irá reduciendo hasta llegar a su límite en 0. Así que mientras más cerca estén los valores a 1,0, más tardará en llegar a cero, lo que significa un camino más largo (y viceversa: cuanto más cerca de 0.0, más corto es el camino).
Ahora creamos el ColorMatrixFilter y el Filtro de desenfoque.
los ColorMatrixFilter va a usar el Formación Acabamos de hacer y vamos a crear dos Filtros de desenfoque. Encontré que usando dos Filtros de desenfoque da un buen efecto de pulso y no se difumina demasiado lento o demasiado rápido, pero si prefieres tener uno, también está bien.
Agrega las variables para los filtros primero.
private var _cFilter: ColorMatrixFilter; private var _bFilter: BlurFilter; private var _bFilter2: BlurFilter;
Crea los filtros en el constructor.
_cFilter = nuevo ColorMatrixFilter (_cMatrix); _bFilter = nuevo BlurFilter (2, 2, 1); _bFilter2 = nuevo BlurFilter (8, 8, 1);
Ahora es el momento de crear una función para actualizar nuestros Senderos de movimiento. Hacer una función llamada actualizar en el MotionTrail Clase. Para hacer el recorrido tenemos que dibujar la Pantalla Principal al BitmapData Cada cuadro que hace el efecto rastro..
public function update (): void // Draw Display en BitmapData _bitmapData.draw (_display);
Ahora deberías tener un rastro si lo ejecutas, pero, por supuesto, los Senderos de movimiento se desvanecen y lo haremos desaparecer con los filtros que hicimos en el último paso.
Ahora podemos aplicar los filtros a la BitmapData. Usamos el mismo BitmapData para la fuente, la _recto y _pnt variables para el sourceRect y destPoint respectivamente, y último es el filtro que queremos aplicar.
Ya que tenemos algunos filtros, no queremos aplicarlos a todos en cada fotograma, ya que hacer eso ralentizaría demasiado las cosas. En cambio, vamos a cambiar el ColorMatrixFilter y Filtro de desenfoque para trabajar en diferentes marcos y cambiar el Filtros de desenfoque de la misma manera también.
Para cambiarlos, vamos a tener una variable para realizar un seguimiento del marco y utilizar el operador del módulo para comprobar.
var _count privado: Número = 0;
public function update (): void // Draw Display en BitmapData _bitmapData.draw (_display); // Aplicar efectos a BitmapData if (_count% 2 == 0) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _cFilter); si no (_count% 4 == 1) _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter); else _bitmapData.applyFilter (_bitmapData, _rect, _pnt, _bFilter2); // Incrementa la cuenta _count ++;
Ahora que el actualizar La función está terminada la añadimos a nuestra lazo función.
// Actualizar Motion Blur _mtDisplay.update ();
¡Increíble! Hemos terminado con este Consejo rápido y puedes seguir adelante y probarlo.
Debería haber obtenido el mismo resultado que el swf de muestra y ahora puede intentar extenderlo. Puede hacer muchos efectos diferentes, la mayoría si entiende el ColorMatrixFilter.
Por ejemplo, puedes desvanecer el color del rastro a rojo al hacer esto:
// Compensar el valor del rojo en 30 cada vez _cMatrix = _cMatrix.concat ([0.92, 0, 0, 0, 30]) // Red _cMatrix = _cMatrix.concat ([0, 0.92, 0, 0, 0] 0)) // Verde _cMatrix = _cMatrix.concat ([0, 0, 0.92, 0, 0]) // Azul _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alfa
O también puedes cambiar los colores haciendo que todos los senderos sean azules:
// Solo los senderos azules _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0]) // Red _cMatrix = _cMatrix.concat ([0, 0, 0, 0, 0, 0]) // Green _cMatrix = _cMatrix .concat ([0.92, 0.92, 0.92, 0, 0]) // Blue _cMatrix = _cMatrix.concat ([0, 0, 0, 0.92, 0]) // Alpha
Gracias por leer. Espero que todos hayan aprendido algo de esto y que sea útil en el futuro, posiblemente un juego nuevo y genial con este efecto..
