Animando huesos con AS3 (bones y actionscript 3)
Posted by Andrés Argüello Pittjun 3
Éste tutorial es para dar una idea básica de lo que se puede hacer con los huesos y la cinemática inversa. Lo interesante es poder mover éstos huesos por código y asà reaccionar en runtime de acuerdo a posición del mouse, ingreso del teclado o como abarca éste tutorial a la música.
Ejemplo final:
Lo primero es elegir un objeto que querramos animar, en mi caso la mascota de Homestar Runner, que lo peuden bajar de brandsoftheworld. Luego tenemos que convertir en movieclips cada sección de nuestro objeto, por ejemplo: la cabeza, el tronco, la pierna derecha, la pierna izquierda.
Luego elegimos la herramienta “bones” (x) y empezamos a unir nuestros objetos
.
Luego seleccionamos el frame que contiene nuestros moviclips unidos por los huesos que creamos y veremos que en el panel propiedades aparece el nombre del esqueleto que acabamos de crear. Ahà podemos darle un nuevo nombre a todo nuestro esqueleto, yo voy a utilizar el que me tocó por defecto.
Es importante que seleccionar el frame y no el moviclip ya que si seleccionamos un moviclip accedemos a las propiedades del hueso en sà pero no del esqueleto completo.
También es importante cambiar y el Type de authotime a runtime, lo que hace que los huesos se van a animen en tiempo de ejecución en vez de ser animados con tween o cuadro por cuadro dentro de Flash. Luego de tener el nombre del esqueleto si pasamos a seleccionar los huesos que queremos mover y le damos nombres, también en ésta parte podemos ajustar los ángulos que vamos a permitir que se mueva y varias otras propiedades, yo no cambié nada pero los resultados pueden variar.
Por último la parte del código.
Básicamente lo que tenemos que hacer es registrar el esqueleto y luego ligar a éste esqueleto los huesos que a su vez tienen dos puntos por lo cual tenemos que decir cual de dichos puntos queremos mover y lo podemos hacer en cualquier eje: x,y o z. El registro del esqueleto se hace una vez, y luego tenemos decidir cuantos huesos se van a mover.
En este caso lo que voy a hacer es cargar un sonido, analizar su espectro y mover el pie izquierdo con lo que haya en el canal izquierdo de la música y luego lo mismo con el derecho.
var tree:IKArmature = IKManager.getArmatureByName("Armature_5"); var right_leg:IKBone = tree.getBoneByName("ikBoneName9"); var left_leg:IKBone = tree.getBoneByName("ikBoneName10"); var cabeza:IKBone = tree.getBoneByName("ikNode_6"); // tailJoint mueve e punto del hueso, si queremos mover la cabeza del hueso debemos usar headJoint //para la pierna derecha var rtJ:IKJoint = right_leg.tailJoint; var rposT: Point=rtJ.position; var rikMover:IKMover = new IKMover(rtJ, rposT); //para la pierna izquiera var ltJ:IKJoint = left_leg.tailJoint; var lposT: Point=ltJ.position; var likMover:IKMover = new IKMover(ltJ,lposT); // cargo un sonido para analizar su espectro y mover los huesos según éste. var s:Sound = new Sound(); s.load(new URLRequest("http://digilabs.com.ar/wp-content/uploads/2010/06/loop.mp3")); var sc:SoundChannel; sc = s.play(0, 1000); this.addEventListener(Event.ENTER_FRAME, aMoverLosHuesos); function aMoverLosHuesos(eventArgs:Event) { rposT.x=110+(sc.rightPeak* - 20); //110 es donde esta el punto en reposo //y 20 son la cantidad de pixeles que quiero que se mueva que es multiplicado por algo entre 0 y 1. lposT.x=50+(sc.leftPeak* + 30); rikMover.moveTo(rposT); likMover.moveTo(lposT); }
Lo único que le agregué a mi ejemplo final fue un botón de start/stop para no volver loco a los que visiten digilabs
Como ejercicio estarÃa bueno agregar un hueso desde el cuello a la punta de la cabeza ya animar la cabeza también. Para ésto hace falta agregar un movieclip transparente en la punta de la cabeza de lo contrario no serÃa imposible “tirar un nuevo hueso”. Otra cosa seria analizar bien el espectro del sonido cargado y usar los bajos para mover ciertas partes y los altos para otras.

No hay comentarios