Creando una animación en HTML5: Moviendo al príncipe (I de II)

Una vez creado el primer fotograma de la animación llega la hora de animar al príncipe, con el objetivo de llevar a cabo la animación que se mostro en el video inicial. Tal y como se puede observar en el video en la primera escena se producen dos movimientos distintos (teniendo en cuenta al hoja de sprites que se está utilizando).

El primero de ellos es el movimiento a través del cual el príncipe “arranca” de parado, para posteriormente proceder a dar un salto o correr. A este movimiento se denominará “arrancarDerecha”, junto con su equivalente “arrancarIzquierda”, tal y como se puede ver en la siguiente imagen:

Imagen 1: Movimiento "arrancarDerecha"

Como se puede observar el movimiento se compone de 6 frames, indicándose las posiciones y tamaños tal y como se ha mostrado en anteriores posts.

El siguiente movimiento para esta escena es el de saltar. En este movimiento se presenta el inconveniente de que los frames no ocupan el mismo ancho. Se puede optar por modificar la hoja de sprites, o como en el caso que aquí se muestra, se utiliza un array para definir el ancho de cada frame.

Imagen 2: Movimiento "saltarDerecha"

Una vez definidos los dos movimientos de esta escena, se debe modificar la función newsprite, para crear las funciones necesarias para realizar los movimientos.

En primer lugar se añade el atributo tipoMovimiento a la variable sprite, y luego se modifica la función drawImage para dibujar el sprite teniendo en cuenta si el movimiento se ha definido con ancho fijo o a través de un array. Para ello eliminar el código marcado en rojo y colocar el marcado en verde, tal y como se muestra en la siguiente imagen:

Imagen 3: Modificación de la función "drawImage"

En esta misma función, al final incluir el código “Sprite.moverSprite();”, que se utiliza para mover el sprite según el movimiento especificado. La función moverSprite, quedaría como sigue:

Imagen 4: Función "moverSprite"

Nótese que la función es semejante a la descargada en el motor original, salvo que en esta se tiene en cuenta el valor de la variable tipoMovimiento ya que el príncipe no solo anda, sino que realiza otros muchos movimientos. Para cambiar de movimiento en la línea del tiempo de la animación se crea la función cambiarMovimiento:

Imagen 5: Función "cambiarMovimiento"

Por último en la línea de tiempo introducimos el código necesario para ir desplazando al príncipe y moverlo a lo largo de la escena uno:

Imagen 6: Línea del tiempo

Puedes visualizar y descargar el código de esta primera parte de la animación del príncipe. A partir de aquí el siguiente paso es generar el resto de movimientos, incorporándolos a la función drawImage como se ha visto y utilizarlos en la línea del tiempo.

En el próximo post se mostrarán el resto de movimientos y se verá como cambiar de escena e introducir la probeta como sprite estático.

===========================================================

Creando una animación en HTML5: Material necesario

Creando una animación en HTML5: Definiendo la animación

Creando una animación en HTML5: La estructura del motor

Creando una animación en HTML5: Primer fotograma (I de II)

Creando una animación en HTML5: Primer fotograma (II de II)

Creando una animación en HTML5: Moviendo al príncipe (I de II)

Creando una animación en HTML5: Moviendo al príncipe (II de II)

===========================================================