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

Una vez creado el movimiento para el primer fotograma, el siguiente paso consiste en modificar la función newSprite().

Dentro de esta función, en el elemento sprite, únicamente van a ser necesarias las funciones: initSprite, loadImage, drawImage y stepSprite. Las funciones goRight, stopMovement, goLef y moveSprite las podemos comentar, ya que de momento no van a ser necesarias. A continuación se indica el cometido de estas cuatro funciones y la modificación que hay que realizar en una de ellas:

· initSprite: Inicializa el sprite con los datos necesarios, cargando la imagen asociada. El sprite se inicia con un movimiento, por lo que en la última línea de esta función debemos especificar el movimiento inicial, en el caso de esta animación, el definido anteriormente: “Paradoderecha”:

· loadImage: Carga la imagen para el sprite, no es necesario realizar ninguna modificación.

· drawImage: Dibuja la imagen sobre el lienzo, tampoco es necesario realizar ninguna modificación.

· stepSprite: Controla los diferentes pasos de la animación de un sprite, no es necesario realizar ninguna modificación.

Una vez realizado el movimiento y modificado el elemento sprite, le toca el turno al elemento Experiment, en cuya función init quitaremos los sprites que no forman parte de esta animación (billy, mariam, willy, etc …), creando el del príncipe y modificando la imagen de fondo a cargar:

Imagen 4: Elemento Experiment

Como se puede observar en la imagen anterior, a través de la función initSprite se carga el sprite del príncipe, utilizando la hoja de sprites “imágenes/prince.png”, y se coloca en las coordenadas X e Y especificadas (340, 280) con el tamaño indicado (40 píxeles de ancho y 90 píxeles de alto), el movimiento inicial asignado al sprite será el de “paradoDerecha”. Un poco más abajo en la imagen se puede observar cómo se carga de fondo la imagen de la escena “imágenes/escena2.png”.

En la función drawFrame es donde se encuentra la “línea de tiempo” de la animación, actualmente no se va a realizar ningún movimiento de los sprites, por lo que se dejaría la instrucción switch vacía:

Imagen 5: Función drawFrame

Llegados a este punto solo queda revisar las funciones dibujaFondo y dibujaSprites, la primera de ellas es la encargada de pintar la imagen de la escena, salvo que se quiera hacer más grande o más pequeña no sería necesario modificarla.

La función dibujaSprites se encarga de pintar los sprites de la animación, en el caso de esta animación únicamente se dibujaría el sprite del príncipe:

Imagen 6: Función dibujaSprites

Una vez modificadas todas estas funciones ya se puede abrir el fichero inicio.html con la versión Beta del Internet Explorer 9 o la Platform Preview, visualizándose el siguiente resultado:

Imagen7: Primera frame en HTML5

Si lo prefieres puede ver esta primera parte de la animación accediendo al enlace con Internet Explorer 9, de modo que puedas descargar el código y echarle un vistazo.

En los próximos post veremos cómo implementar nuevos movimientos y hacer que el príncipe se mueva a lo largo de la escena tal y como se mostro en el video inicial.

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

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)

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