sábado, 30 de mayo de 2015

Actuate: Segunda Parte


En la entrada anterior comenzamos a ver que son los tweens y el uso de Actuate para crear algunos ejemplos. Vimos la sintaxis y algunas aplicaciones sencillas de esta librería con un solo sprite en pantalla. 

Esta vez, nos acercamos a un ejemplo un poco más real, con muchos “actores” mostrándose al mismo tiempo. Veremos algunos efectos visuales en conjunto con movimiento y  cómo afecta ello al rendimiento de nuestra aplicación.



Antes de entrar en el tema quiero aclarar que lo que van a ver forma parte de una aplicación a la cual le extraje el menú. Es por ello que quizás se vea un poco desordenada, pero en mi opinión sirve como ejemplo.


Bien, tenemos varios tweens dando vuelta aquí y diferentes técnicas de cómo usarlos.

Efecto Parallax en acción

El fondo de pantalla no es un tween en este caso. Son 3 imágenes (nubes) que se van desplazando para crear un pseudo efecto Parallax.


También tenemos que las semillas son manipuladas por este evento.




Es una buena técnica la de posicionar cualquier rutina que tenga que ver con renderización (ENTER_FRAME)  por encima de las demás.


Una vez que el cielo está en movimiento y las semillas vuelan tenemos al sol:


Comenzamos definiendo un filtro que hará de brillo (glow en inglés) dado por el color 0xEDEB55 (un amarillo medio rabioso :P) Luego tenemos que el tween va a aplicar en un lapso de 5 segundos y en un radio de 40 píxeles alrededor de nuestro sprite (el sol en este caso) nuestro efecto glow.
Ni bien termine de hacer esto, va a comenzar con otro Tween para ir opacando el brillo hasta dejarlo en 1. Similar al método reflect(), pero el segundo tween difiere un poco (la intención no era hacer un “espejo” del primero).

Efecto de Glow en el Sol



Nuestro ejemplo posee además un evento manejado por tiempo (timer) que básicamente va a disparar varios tweens a medida que pasan los segundos:


Tenemos al insecto que va a ir dando vueltas de izquierda a derecha con leves movimientos en su trayectoria.

Sprites con dimesiones aleatorias (copos de nieve)

Luego tenemos el cartel: Este tween es un ejemplo de algo realmente “pesado” para el render y está basado en un difuminado de la imagen que con el paso del tiempo va tomando forma (efecto Blur inverso).


Aplicando el Tween al cartel..la caída de los FPS es notable

La clase BlurFilter permite aplicar un efecto visual de desenfoque al mostrar objetos. Un efecto de desenfoque suaviza los detalles de una imagen.
Se pueden producir manchas que van desde un ligero efecto a un desenfoque gaussiano, una apariencia de nebulosa es como ver una imagen a través del cristal semi-opaco.


Cuando la calidad de este filtro se establece en bajo, el resultado es un ligero efecto, pero cuando la calidad se establece en alto, se aproxima a un filtro de desenfoque gaussiano.


El formato es: BlurFilter (BlurX, BlurY, Calidad)


BlurX y BlurY son dos Float que pueden adquirir valores desde 0 a 255 y pertenecen a los enfoques horizontal y vertical respectivamente. El valor por defecto es 4. Los valores que son potencia de 2 (como 2, 4, 8, 16 y 32) están optimizados para renderizar más rápido.

Luego tenemos el parámetro Calidad (Int) y representa el número de veces que debe realizarse el desenfoque.
Existen tres valores prefefinidos:


  • BitmapFilterQuality.LOW
  • BitmapFilterQuality.MEDIUM
  • BitmapFilterQuality.HIGH
Y es lo mismo a establecer la propiedad con números (1, 2 o 3...15) y puede llegar hasta 15.
Según la documentación, un valor de 5 como no debería de traer problemas de rendimiento, pero en la práctica no recomendaría pasarlo de 3 en objetos con un tamaño que supere el 15-20% de la superficie del Stage. En el caso del ejemplo se muestra exagerado a propósito.

Parámetros del efecto
Se puede aplicar el filtro a cualquier objeto de visualización (es decir, objetos que se heredan de la clase DisplayObject) Algunos métodos como por ejemplo Scale(xy), Rotation, etc no están soportados y el efecto no se aplicará.


El filtro no puede utilizarse en conjunto con el método scala (width y height), o rotaciones y demás atributos. Tampoco funcionará si las dimensiones de la imágen superan las especificaciones del formato (en Flash).


Luego tenemos que el cielo se nubla y comienza la ventisca.

Nieve cayendo
Tenemos la nieve dando vueltas entonces, que no son más que unos círculos con diferentes propiedades dando vueltas en forma aleatoria (en la aplicación original, este efecto lo utilizo para mover abejas de diferentes tipos).


Lo importante de esto es la propiedad timer que posee Actuate.


Tenemos que por un lado se genera un número aleatorio para alimentar el evento timer, el cual al terminar crea los copos(80 en total). Una vez creado, lo ponemos en movimiento con la función Mover_Copo.

Funciones para crear la "ventisca"


Esto es todo por hoy. Jueguen con los valores, los colores, velocidades...hagan que la tarjeta de video se gane el pan :P. 

Los fuentes aquí como siempre.

Un saludo.-