Subtema: Juegos Flash (3ªParte) Programación: Tweens, Sonido, Colisiones

[mi-go]

Parte 1 => Programación: Introducción
Parte 2 => Programación: Estructura, POO, Timers
Parte 3 => Programación: Tweens, Sonido, Colisiones
Parte 4 => Mercado: Métodos para ganar dinero


4. Uso de Tweens para animaciones sencillas

4.1 Tofus en movimiento con Tweens

El movimiento automático de los tofus en el juego es sencillo: se desplazan de izquierda a derecha, subiendo un poco, como si flotaran, y cuando son destruidos descienden.

En Tofu Hunter para controlar este movimiento incluyeron un Listener al MovieClip del tofu en su evento ENTER_FRAME.
La función que ejecuta el Listener cada vez que es llamada se encarga de incrementar la coordenada X y disminuir la coordenada Y del tofu.
Esto hubiera sido una buena práctica si se hubiera llamado a la función con un Timer y no con el evento ENTER_FRAME como ya expliqué en apartado 2. Timers para controlar el juego.
Además tampoco tiene sentido estar incrementando los valores X e Y del MovieClip en un movimiento tan sencillo como es un desplazamiento lateral y vertical que no varía su trayectoria porque el juego no tiene elementos que así lo hagan cuando existe la clase Tweens.

Para movimientos sencillos en AS3 tenemos la clase Tween, que se encarga automáticamente de variar una propiedad de un objeto de forma progresiva según le digamos. Así, por ejemplo, podemos variar progresivamente las coordenadas de un objeto.


En Tofu Hunter 2, para el desplazamiento lateral añadiremos el siguiente Tween una vez es creado el tofu:
this.oTweenLateral = new Tween(this, "x", Regular.easeIn, this.x, this.mcJuego.originalWidth + 100, nRandom, true);

Para eliminar el tofu cuando haya salido del juego por la derecha añadiremos un Listener al Tween que se ejecute cuando termine la animación y que se encargue de eliminar el tofu del juego:
this.oTweenLateral.addEventListener(TweenEvent.MOTION_FINISH, TweenLateralHandler);

Para hacer que también vaya subiendo poco para que parezca que flotan, como en Tofu Hunter, incluiremos otro Tween:
this.oTweenVertical = new Tween(this, "y", Regular.easeIn, this.y, this.y - 50, nRandom, true);

Con el movimiento de caer y girar un poco cuando es destruido haremos algo muy parecido:
this.oTweenVertical = new Tween(this, "y", Strong.easeIn, this.y, this.mcJuego.originalHeight + 100, 1, true);

//Para eleminarlo cuando termine
this.oTweenVertical.addEventListener(TweenEvent.MOTION_FINISH, TweenVerticalHandler);

//Lo hacemos girar un poco cuando es destruido, como Tofu Hunter 1
this.oTweenLateral = new Tween(this, "rotation", Regular.easeIn, this.rotation, this.rotation + 100, 1, true);





4.2 Clases Tweens que no son de Adobe

En TofuHunter2 hemos usado la clase Tween de Adobe por ser fácil de usar y por no tener que incluir el uso de otra clase externa, pero la clase Tween de Adobe no funciona correctamente y es muy aconsejable usar otras clases externas Tween que no son de Adobe.

La clase Tween de Adobe tiene dos problemas muy importantes:

•    Las animaciones se detienen sin ninguna razón.
  Si la usamos para modificar varias propiedades de un mismo objeto  a la vez (por ejemplo para moverlo, girarlo y ampliarlo) acabaremos teniendo problemas porque habrá veces que las animaciones se detengan sin ninguna razón.
•    El rendimiento no es bueno.
  Si ejecutamos muchos tweens sobre muchos objetos el rendimiento es muchísimo menor que con otras clases Tween que no son de Adobe.

Las clases Tween más usadas que no son de Adobe son:

•    Tweener.
  Gratuita.   http://code.google.com/p/tweener/
  Personalmente es la que menos me gusta a la hora de programar porque no puedes crear objetos de la clase y tratarlos por separado, si no que añades y quitas animaciones a la clase principal.
  Puede que tenga esta estructura por ser una adaptación de la clase Tween de ActionScript 2.
  
•    TweenLite y TweenMax.
  Gratuitas sólo para fines no comerciales.   http://blog.greensock.com/
  Según un test hecho por su creador son las de mejor rendimiento. TweenLite puede resultar muy útil para la creación de baners por su tamaño más reducido.
  
•    gTween.
  Gratuita. http://www.gskinner.com/libraries/gtween/
  Actualmente en desarrollo, pero funciona sin errores.

Ventajas de usar cualquiera de estas clases:

•    Funcionan.
  No se detienen sin razón como lo hace la clase Tween de Adobe.
  
•    Rendimiento mayor.
  El rendimiento es mayor cuando ejecutamos muchos Tweens sobre muchos objetos.
  Puedes ver una coparativa de redimiento hecha por el creador de TweenMax: http://blog.greensock.com/tweening-speed-test/
  
•    Código más legible.
  Con la clase Tween de adobe tenemos que crear un objeto de esta clase por cada propiedad que queramos cambiar en otro objeto.
  Con cualquiera de las otras clases Tweens una instancia y en una sola línea de código podemos lanzar cambios en tantas propiedades como queramos.
  
•    Más tipos de suaviazados.
  Estas otras clases de Tweens incluyen más variedad de tipos de suavizados en la animación o variación de una propiedad.

5. El sonido de un Tofu

En Tofu Hunter 2 incluiremos en la función tofuClickHandler un par de líneas para que cada vez que destruimos un tofu se reproduzca un sonido que previamente hemos agregado a la biblioteca del proyecto:

var sndExplosion:Explosion = new Explosion();
var channel:SoundChannel = sndExplosion.play();






6. Colisiones de una estrella

Tofu Hunter 2 tiene un nuevo elemento en el juego: una estrella que si toca alguno de los Tofus los elimina del juego.

Cada instancia de la clase Tofu tendrá un Timer que comprobará constantemente si está colisionando con la estrella.
En la función IniciaTofu:
this.oTimerColision = new Timer(10);
this.oTimerColision.addEventListener("timer", TimerColisionHandler);
this.oTimerColision.start();

Y para comprobar si colisiona crearemos la siguiente función que es llamada por el Timer:
   private function TimerColisionHandler(event:Event){
      if (this.hitTestObject(this.mcJuego.oEstrella))
      {
         this.Eliminar();
      }
   }


En ActionScript existen dos tipos de detección de colisiones:

• hitTestObject – Evalúa la colisión de dos objetos tratándolos como cuadrados que rodean al objeto, sin tener en cuenta la figura real del objeto.
• hitTestPoint – Evalúa la colisión entre un punto en concreto con la figura real de un objeto.