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

Una vez definida la animación llega el momento de comprender como está estructurado el motor JavaScript descargado como parte del material necesario para la animación. Al descomprimir el fichero se pueden ver dos directorios y dos ficheros cuyo contenido es el siguiente:

· Carpeta Imágenes: Aquí se almacenarán los fondos y las hojas de sprites de la animación.

· Carpeta Música: Son los ficheros de sonido que se van a reproducir durante la animación.

· Inicio.html: Página Web con el lienzo donde se va a reproducir la animación.

· Action.js: fichero con el motor (código JavaScript) necesario para realizar la animación.

La Página Web (inicio.html)

Se trata de una página en HTML5 donde cabe señalar los siguientes elementos:

· Audio: Etiqueta que permite reproducir audio, de modo que a lo largo de la animación se escuchará la música que se desee. Se puede utilizar código JavaScript adicional en el motor para cambiar dinámicamente la música, pararla o volverla a iniciar, entre otras acciones.

·Canvas: Lienzo donde se va a dibujar la animación, tal y como esta implementado el motor no se debe modificar su identificador, ya que si se hace habrá que modificar el código utilizado en el fichero action.js.

·Contador y coordenadas: Elementos utilizados para mostrar la marca de tiempo y la posición del ratón cuando se está trabajando con el motor en modo debug, muy útil para controlar la animación en tiempo de desarrollo.

· Script: Carga del motor JavaScript utilizado para generar la animación, contiene todo el código que se va a encargar de dibujar la animación en el elemento canvas de la página HTML5.

·Bocadillos: Elementos utilizados para los bocadillos (conversaciones entre personajes). Si no va a haber bocadillos en la animación estos elementos no serán necesarios.

El Motor JavaScript (action.js)

Contiene todas las funciones y código JavaScript necesarios para generar la animación, aunque a primera vista pueda resultar un poco complejo, vamos a tratar de desgranarlo en sus bloques principales, para en posteriores entradas ir trabajando en generar la animación:

· Animaciones de los personajes: Para cada uno de los movimientos que realicen los sprites de la animación se define una estructura del tipo que se observa en el cuadro. Si las hojas de sprites contienen las animaciones en la misma posición existirá una única estructura por animación, de este modo se tendrá un armazón para definir la animación “parado mirando a la derecha”, “parado mirando a la izquierda”, “andando hacia la derecha”, “andando hacia la izquierda”, “saltando hacia la derecha”, etc. Y así con todos aquellos “movimientos” que realicen los sprites de la animación.

· El Sprite: Código utilizado para generar el sprite, donde se definen las funciones que se utilizan para dibujar en pantalla dicho sprite, hacerlo andar de un lado a otro (utilizando las animaciones correspondientes), hacerlo correr, saltar, etc…

· Experiment: Canvas (o lienzo) principal donde se cargan todos los sprites que forman la animación y cuenta con el bucle donde se encuentra la línea de tiempo que se utiliza para generar dicha animación.

· Dibujafondo: Función que se encarga de dibujar el fondo en cada instante de tiempo de la animación.

· DibujaSprites: Función para dibujar todos los sprites y que aparezcan por pantalla.

· Funciones adicionales: Otras funciones utilizadas para el modo debug, los bocadillos o la animación de la puerta del garaje.

En el próximo post veremos cómo definir el primer movimiento del príncipe, y modificaremos el motor para que únicamente se cargue nuestro personaje, con la escena adecuada. Partiremos de estos ficheros aquí comentados, por lo tanto es recomendable familiarizarse con ellos antes de pasar al siguiente punto, en el próximo post.

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

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)

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