1 Efecto animado de cristales rotos.

1.1 Descripcion del efecto 1.2 Grficos para los trozos de cristal. 1.3 Clases ActionScript 3 necesarias.

1 Efecto animado de cristales rotos. 1.1 Descripcion del efecto.

En este tutorial, vamos a tratar de componer un efecto que emule la animacin de cristales (o vidrio) rompiendose como si hubiese recibido un impacto (de una piedra, una bala....). Se trata de un efecto, a mi entender, muy til a la hora de realizar determinadas animaciones, animaciones de tipo impacto, y un efecto extrapolable a la rotura de otros materiales. Es decir, en este caso veremos como lograr el efecto de vidrio rompiendose, pero de forma anloga lo podemos adaptar a la rotura de otros objetos como un ladrillo, metal, alimentos... cualquier cosa que se haga 'aicos', o se descomponga en pedazos de una determinada forma comn. El tutorial se desarrolla para la plataforma de Adobe Flash, utilizando el lenguaje ActionScript 3.0. Este efecto es aplicable a multitud de animaciones interactivas, como por ejemplo juegos Flash Online. Particularmente algunos gneros de juegos, como los juegos de disparar, incorporan efectos de este estilo, con mayor o menor complejidad. Bajo estas lneas encontrar un ejemplo del efecto que perseguimos. En este caso el efecto Flash est montado sobre un escenario en el que se pueden observar 3 farolas, y una especie de mira telscopica, produciendose un efecto de impacto como si dispararamos sobre las farolas. Pruebe a realizar click sobre los cristales de las farolas y observar el efecto al que nos referimos (puede restaurar los cristales haciendo click sobre el botn restaurar):

Nota: Es necesario Flash Player 9 o superior para la correcta visualizacin de los ejemplos del tutorial. Desde esta misma pgina en la parte izquierda de navegacin hay un enlace a la pgina de descargas de Flash Player de Adobe. Como observar en el ejemplo expuesto arriba,... se trata de un efecto que emula una tulipa de una farola rompiendose por el impacto de, posiblemente, un proyectil; una bala, una piedra, lo que queramos, no es importante ahora. Adems un detalle importante a tener en cuenta, y si se fija con

detenimiento, es que la animacin de cristales rompiendose, el foco o epicentro del efecto, se encuentra situado en el centro de la mira telescpica (la posicin actual del puntero del ratn). De modo que se trata de un efecto que adems debemos poder iniciar en unas coordenadas `x` e `y` en el espacio de la escena de la pelcula Flash. Por supuesto esto debe ser as, pues piense que ser mucho mas realista la produccin de trozos de cristal desde el punto en el que se impacto. Quisiera tambin que probara a realizar varias veces el impacto sobre las tulipas de las farolas para notar que los fragmentos producidos, aunque parecidos, no son iguales. Ni en cuanto al nmero de trozos, ni a la direccin y velocidad que siguen tras el impacto. Por supuesto y como usted ver siguen un patrn mas o menos realista. Sera ilgico pensar que los cristales de una farola al reventar, puedan ir hacia arriba , flotando, como si la gravedad no les afectara. As que dentro de un patrn, que a mi me ha parecido idoneo, los fragmentos generados siguen un movimiento aleatorio. Pero usted ser libre de cambiarlo, y ver como es relativamente sencillo, para adaptarlo a sus necesidades. Por tanto y sintetizando todo esto, veamos como implementar las clases ActionScript 3 necesarias para: 1.- Generar un nmero aleatorio de trozos de cristal roto a partir de unas coordenadas x, y. 2.- Insertar un sonido de impacto (cristales rotos). 3.- Generar una animacin / movimiento `realista` para los trozos generados Fuera del tutorial quedan otros aspectos como el hacer desaparecer la tulipa sin romper de las farolas, o la forma de poner la mira telescpica, ya que no es ese el objetivo de este tutorial. Todo esto, simplemente lo he puesto como un ejemplo para que al lector no le resulte extrao el desarrollo. Sin embargo, puede descargar aqu mismo el fichero de ejemplo comprimido con todos los archivos necesarios para seguir este tutorial, sin picar una lnea de cdigo:
Efectos Flash. Cristales rotos con AS3 (cristales.zip - 178 KB)

En la siguiente pgina, seguimos con los detalles tcnicos de este efecto. Las clases AS3 necesarias para que funcione. Pero antes un breve vistazo a algunos grficos necesarios para producir el efecto de cristales rotos. Si habes descargado el fichero de ejemplo, podes ver en la biblioteca de objetos un simbolo grfico llamado cristales_rotos_sprites, este simbolo continene tres fotogramas con varios grficos trazados con forma de cristal roto, tal y como podes ver en la siguiente imagen.

Estos trozos son los que vamos a utilizar para generar los trozos de cristal roto de nuestro efecto. Podriamos haber dibujado 7, 8 20 trozos, o diferentes formas de diferentes colores. Por ejemplo si el efecto que desearamos construir fuera el de el impacto sobre un trozo de madera, deberiamos modificar estos grficos para adaptarlos lo mejor que podamos a la madera. Con estos grficos componemos otro simbolo importante de la pelcula; el movieClip, cristales_rotos_sprites_mc (asociado a la clase AS3, CristalesSprites). Este movieclip, incorpora varios fotogramas con instancias de los 3 trozos de cristal, con diferentes tamaos. Esto no hubiera sido necesario, pero as evitamos escalar los trozos por cdigo ActionScript. En la biblioteca de la pelcula cristales.fla podres ver adems varios elementos como los faroles, la tulipa, botones o el simbolo de sonido de cristal rompiendose.

1.2 Grficos para los trozos de cristal.

Demos con un repaso a las clases necesarias para conseguir nuestro efecto. La primera clase digna de mencin es la clase CristalesSprites (en el fihero CristalesSprites.as), esta clase, es la encargada de generar un solo trozo de cristal a partir de uno de los Sprites que vimos anteriormente. Esta clase ActionScript es la clase que define (est asociada) al simbolo de clip de pelcula cristales_rotos_sprites_mc, en la biblioteca de cristales.fla. package mi.cristales { import flash.display.DisplayObjectContainer; import flash.display.MovieClip; import flash.events.Event; public class CristalesSprites extends MovieClip { private var life:Number = 35; private var grav:Number = 0.6; private var rad:Number; private var ang:Number = 0; private var speed:Number = 2; private var iScale:Number = 0.2; private var iniScale:Number; private var vx:Number; private var vy:Number; public function CristalesSprites(contenedor:DisplayObjectContainer, x:int, y:int,iniScale:Number) { this.iniScale = iniScale; iScale *= iniScale; rad=ang*Math.PI/180; //Inicializar velocidades X e Y vx = Math.cos(rad)*speed* Utils.aleatorio(-1,1); vy = -3; this.x = x; this.y = y; this.alpha = Utils.aleatorio(20,100)/100; //Sprite aleatorio. this.gotoAndStop(Utils.aleatorio(1,this.totalFrames)); contenedor.addChild(this); modifPropiedades(); addEventListener(Event.ENTER_FRAME, ciclo); }

private function modifPropiedades() { var ap = 100* life / 40; //trace(ap); //Alpha depende de la proximidad a la muerte. this.alpha -= 0.005; this.scaleX = (ap/100)*iScale; this.scaleY = (ap/100)*iScale; } private function ciclo(e:Event) { this.x += vx*iniScale; this.y += vy; this.rotation=Math.atan2(vy,vx)*180/Math.PI; modifPropiedades(); //Movimiento erratico. vy+=grav; // Reduce la vida de particula life -= 1; if (Number(life)<0 && parent!=null && parent.contains(this)) { //Finalizada la vida de la particula, eliminar elemento. parent.removeChild(this); removeEventListener(Event.ENTER_FRAME,ciclo); } } } }

La clase no tiene demasiado misterio, aunque es el corazn de la animacin. Como datos interesantes estn los parametros iniciales. Variables de clase como life, grav, rad, etc... definen propiedades de la animacin del trozo de cristal. Cuando se crea una instancia de esta clase, se debe informar de la posicin donde inicializar el trozo (valores de x e y), as como el contenedor donde ubicar el trozo definido por el argumento del constructor contenedor. Es entonces cuando el trozo que se crear, se inicializa con algunas propiedades de velocidad, vx, vy, y una importante de ellas, es el ciclo de vida determinado por la variable life y con un valor inicial de 35. Estos sern los pasos o fotogramas de animacin de nuestro trozo de cristal. Puesto que como comentamos anteriormente algunas propiedades se generan de forma aleatoria, me he permitido crearme una clase nueva llamada Utils donde introduzco algunas funciones que son comunes a las clases que genero. Por ejemplo la funcin aleatorio, definida en la clase Utils. La clase Utils, presenta este aspecto. package mi.cristales { public class Utils { public static const sc_ancho=400; public static const sc_alto = 300; public static function aleatorio(min:int,max:int) { //Devuleve un aleatorio entre min y max; var rt:int;

} } }

rt = Math.floor(Math.random() * (max - min + 1)) + min return rt;

Es una mana mia, pero viene bien a veces disponer de alguna clase comn donde podamos definir mtodos estticos de clase para utilizar en otras clases. Las siguientes lneas: this.gotoAndStop(Utils.aleatorio(1,this.totalFrames)); contenedor.addChild(this); modifPropiedades(); addEventListener(Event.ENTER_FRAME, ciclo); son las encargadas de seleccionar un trozo aleatorio de entre los nueve fotogramas del movieclip cristales_rotos_sprites_mc (en la librera de la pelcula). como representacin grfica de la instancia creada. Adems se aade el `listener` para ENTER_FRAME de la funcin ciclo. Esta funcin, junto con la funcin modifPropiedades, se va a encargar de ir modificando algunas propiedades de la instancia del trozo de cristal creada mientras dure su animacin (35 ciclos). Entre estas propiedades modificadas del trozo de cristal, se encuentra el canal alpha, la rotacin del clip, la posicin X e Y, atendiendo al modelo que anteriormente comentaba, para producir un movimiento ajustado al impacto contra un cristal. Puede jugar a cambiar algunos parametros del cdigo para producir un movimiento diferente de la partcula, del trozo, al que yo mismo he creado. O simplemente alargar o acortar el ciclo de vida. Con esta clase ya disponemos de la forma de crear un trozo de cristal aleatorio que adems produzca una animacin sobre un objeto contenedor (informado como argumento del constructor), a partir de unas coordenadas x e y sobre dicho conteneder dadas (tambin como argumentos del constructor). Evidentemente, cuando el cristal se rompe, no suele hacerlo en un nico trozo. Suele hacerlo en mas de uno, lo que se conoce como `hacerse aicos` :) Pasemos pues a estudiar la clase que generar mas de un trozo de cristal emulando as un impacto de rotura. En la pgina siguiente lo veremos.... La clase encargada de generar el efecto completo de cristales rotos, es la clase Cristales (en el archivo Cristales.as). Esta clase es bastante sencilla (tal y como la he concebido yo), y se va a encargar de generar un nmero aleatorio de trozos de cristal (entre un mnimo y un mximo), al igual que haciamos anteriormente a partir de unas coordenadas x e y sobre un contenedero grfico dado. De hecho los valores de posicin inicial de una instancia de trozo generado por la clase CristalesSprites, van a ser una transformacin de los obtenidos por las instancia de un objeto de la clase Cristales. La clase Cristales, se va a encargar adems de iniciar el sonido que emula la rotura de un vidrio. Veamos la definicin de esta clase. package mi.cristales { import flash.display.DisplayObjectContainer; import flash.display.MovieClip; //Sonido embebido

import flash.media.Sound; import flash.media.SoundChannel; import flash.media.SoundTransform; public class Cristales extends MovieClip { //Trozos en que se descomponen la explosin private var nTrozos:int; //Sonido private var sndCristal:Sonido_cristales = new Sonido_cristales(); private var sndCristalChannel:SoundChannel; public function Cristales(contenedor:DisplayObjectContainer, x:int, y:int,iniScale) { nTrozos = Utils.aleatorio(8,20); this.x = x; this.y = y; contenedor.addChild(this); //Sonidos sndCristalChannel = sndCristal.play(); sndCristalChannel.soundTransform = new SoundTransform(iniScale); for (var i = 0; i < nTrozos; i++ ) { var cs = new CristalesSprites(this, Utils.aleatorio(-10, 10), Utils.aleatorio(-10, 10),iniScale); }

} }

Al crear una instancia de la clase Cristales, lo que vamos a hacer es situar la animacin, de entre 8 y 20 trozos de cristal aleatorios, en un radio de 10 pixels alrededor del punto definido por las coordenadas x e y del contenedor pasado como argumento a la hora de crear la animacin de cristales. El hecho de recibir como parametro un contenedor, nos permite reutilizar esta clase ante cualquier tipo de objetos susceptibles de poder animar mediante la rotura de cristales. En el ejemplo de este tutorial, se trata de unas farolas, pero por ejemplo en un juego podriamos disponer de diferentes elementos donde utilizar este mismo efecto. Una farola, una ventana, una botella.... y desde cualquiera de ellos podremos crear una instancia de la clase cristales. Sonido: Cada vez que creamos un objeto de la clase Cristales, iniciamos un sonido, que en la biblioteca de la pelcula cristales.fla lo encontramos bajo el simbolo llamado 41348__datasoundsample__glass_shatter.wav. Este simbolo se define mediante la clase Sonido_Cristales (en el archivo Sonido_Cristales.as) y que es una clase bsica sin mtodos ni propiedades. package mi.cristales { import flash.media.Sound; public class Sonido_cristales extends Sound { public function Sonid_cristales()

{} } }

Es necesaria para poder escuchar el snido 41348__datasoundsample__glass_shatter.wav de la biblioteca , desde una llamada por ActionScript 3. Estas lneas de cdigo se encargan de reproducir el sonido: //Sonidos sndCristalChannel = sndCristal.play(); sndCristalChannel.soundTransform = new SoundTransform(iniScale); Un pequeo detalle de esta implementacin, es que el sonido se reproducir en un volumen proporcional a la escala de la animacin de cristales. Un parametro que podemos controlar para utilizarlo en diferentes objetos escalados, para producir la sensacin de cercana o lejana, de modo que el sonido proporcional a la escala, sonar mas dbil en objetos con menor escala, y por tanto mas lejanos. Fijense como esto mismo lo hemos reproducido en nuestro ejemplo, con tres farolas a distintas escalas, dando la sensacin de mas cercanas o mas lejanas al espectador. Y con esto finalizamos este tutorial. En el fichero con el cdigo fuente, que os vuelvo a dejar (Efectos Flash. Cristales rotos con AS3 (cristales.zip - 178 KB) ), encontrares algunas clases mas de ejemplo para poder utilizar este efecto, como las farolas o la funcin principal, que controla los eventos de movimiento del ratn, y las colisiones con las farolas para provocar la rotura. Todo ello queda fuera de este tutorial, que tan solo pretende mostrar el efecto de rotura de cristal y sus clases necesarias. De todos modos de un vistazo al cdigo fuente y observa como est implementada la lgica del programa.

SlingShoot Master (Maestros del tirachinas)

Este efecto est extraido de un juego de reciente creacin mia publicado para mochimedia.com. El juego es SlingShoot Master, y en este mismo juego podr ver la aplicacin del efecto que se ha realizado en las mismas farolas para este juego de tipo shooter. Espero que este tutorial haya sido de su agrado. Espero sus comentarios en el foro! Un saludo. Julio Laguna. 8 de Febrero de 2010.