Windows Técnico : canvas, HTML5

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

Anonymous — Tue, 04 Jan 2011 11:03:05 GMT

Una vez definidos los primeros movimientos del príncipe, a continuación se muestran el resto de movimientos necesarios para la animación. En primer lugar el movimiento para saltar y colgarse de una pared:

Imagen 1: Movimiento "colgarseDerecha"

El siguiente movimiento que realiza el príncipe consiste en subir al piso de cual se encuentra colgado, a este movimiento se le va a llamar “subirDerecha”:

Imagen 2: Movimiento "subirDerecha"

A continuación, y siguiendo la escena, el príncipe sale corriendo en dirección a la probeta, a este movimiento se le va a llamar “correrDerecha”:

Imagen 3: Movimiento "correrDerecha"

Justo antes de llegar a la probeta el príncipe frena, pero no de manera abrupta, sino que realiza un movimiento para ello, a este movimiento se le va a llamar “frenarDerecha”:

Imagen 4: Movimiento "frenarDerecha"

Por último el príncipe se bebe la probeta, realizando un nuevo movimiento al que se denomina “beberProbetaDerecha”:

Imagen 5: Movimiento "beberProbetaDerecha"

Recordad que cada uno de estos movimientos (y sus equivalentes hacia la izquierda) deben quedar reflejados en la función moverSprite, introduciendo el código necesario tal y como se vio en el anterior post.

Una vez definidos todos los movimientos del príncipe a utilizar en la animación, queda introducir el sprite estático con la probeta. Para ello, en lugar de utilizar la función newSprite, se crea la función newStaticSprite, una versión reducida de la anterior donde no se incorpora ninguna funcionalidad relacionada con el movimiento, quedando simplificada al código para su inicialización, carga de imagen y dibujado en pantalla, tal y como se puede ver en la siguiente imagen:

Imagen 6: Sprite estático de la probeta

Para crear el sprite se incluye el código necesario en la función init del Experiment, tal y como se puede ver en la siguiente imagen, observar cómo se dibuja fuera de la pantalla, ya que al iniciarse la animación la probeta no debe visualizarse:

Imagen 7: Creación del sprite estático de la probeta

No se debe olvidar incluir el código necesario para que se dibuje el sprite en cada iteración del contador a través de la función dibujaSprites, como se muestra a continuación:

Imagen 8: Código para dibujar la probeta en la función dibujaSprites

Una vez creado este sprite y jugando con las posiciones, el tiempo y los movimientos en la línea del tiempo se completa la animación. A continuación se muestra un fragmento donde se realiza el cambio de escena, mostrando el nuevo fondo y la probeta, mientras que al príncipe se le coloca al principio de la escena, el cual continúa con el movimiento que tenia desplazándose hacia una nueva posición:

Imagen 9: Cambio de escena en la línea del tiempo

La animación completa se encuentra disponible en la siguiente URL:

http://www.informatica64.com/spriteAnimationcontest/animacion3/inicio.html

Esperamos que este pequeño tutorial os haya servido para introduciros en el mundo de la animación mediante sprites, aprovechando de la mano de IE9 las posibilidades del HTML5.

A todos lo que participáis en el concurso Sprite Animation Contest, animo y ¡suerte!

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

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)

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

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

Anonymous — Mon, 03 Jan 2011 13:06:27 GMT

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)

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

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

Anonymous — Thu, 30 Dec 2010 08:40:13 GMT

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)

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

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

Anonymous — Wed, 29 Dec 2010 08:21:19 GMT

En esta entrada comienza la modificación del motor JavaScript para generar la animación definida anteriormente. Para ello vamos a modificar el fichero action.js para conseguir mostrar en nuestro IE9 al príncipe sobre la primera de las escenas, tal y como se puede ver en el primer fotograma de la animación:

Imagen 1: Primer fotograma de la animación

En primer lugar para trabajar con mayor comodidad, hay que activar el modo debug, para ello, en la primera línea del fichero action.js, se establece la variable debuMode a true. De este modo en la parte superior del navegador se mostrará el instante de tiempo en que se encuentra nuestra animación, así como la coordenada X e Y del ratón. Pulsando con el botón izquierdo del mismo sobre la animación se detiene el tiempo.

Imagen 2: Línea de tiempo y coordenadas X e Y

El siguiente paso consiste en crear la primera animación del personaje, en este caso se correspondería con el movimiento “parado mirando a la derecha”. Para ello se genera el movimiento utilizando la estructura comentada en el post anterior, tal y como se observa en la siguiente imagen:

Imagen 3: Animación "parado mirando a la derecha"

Si se observa la hoja de sprites del príncipe la animación “parado” se corresponde con el primer frame de la parte superior izquierda, por lo que la variable quedaría tal y como se muestra en la imagen anterior, pasando a detallar a continuación cada uno de los elementos de la estructura:

· name: Nombre de la animación.

· sX, sY: Coordenadas X e Y desde las cuales comienza la animación (esquina superior izquierda del rectángulo de la imagen).

· width, height: Ancho y alto del frame (anchura y altura del rectángulo de la imagen).

· totalframes Número de frames que componen la animación; empezando en el rectángulo de la imagen, el número de rectángulos iguales, desplazándolos hacia la derecha, que componen la animación.

· loop: Si la animación se compone de más de un frame, indica si se debe repetir la secuencia de frames o no.

· step: Indica cada cuantas unidades de tiempo de reloj deben transcurrir de un elemento a otro de la animación.

· flipH: Indica si se debe realizar un volteo horizontal de la imagen, actualmente el príncipe mira siempre hacia la izquierda, colocando true en esta propiedad pasaría a mirar hacia la derecha.

· size: Multiplica el tamaño del sprite por el número especificado, con ello podemos conseguir el efecto de profundidad en las animaciones 2D.

El resto de movimientos se pueden eliminar, ya que a medida que vayamos avanzando en la animación se irán generando los que sean necesarios. En el siguiente post se modificará el resto del script para generar el primer fotograma de la animación.

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

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)

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

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

Anonymous — Mon, 27 Dec 2010 11:29:37 GMT

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)

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

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

Anonymous — Wed, 22 Dec 2010 15:00:19 GMT

Una vez que tenemos todo el material necesario para afrontar el desarrollo de nuestra animación en HTML5, llega el momento de definir cómo va a ser dicha animación (recordad que si queréis concursar en el Sprite animation contest debe girar en torno a Windows Live Mail). Se trata de realizar una animación basada en sprites, es decir, una animación donde existe un fondo y unos elementos (sprites) que se animan sobre él.

Este concepto de animación es el utilizado en los videojuegos de finales de los ochenta y principios de los noventa, títulos como Golden Axe, Double Dragon o Prince of Persia se basan en este sistema para crear el videojuego. En nuestro caso vamos a recrear una secuencia del juego Prince Of Persia II, tal y como podéis ver en el siguiente video:

Como se puede ver la animación constara de dos escenas y dos sprites distintos (el príncipe y la probeta). Por lo tanto debemos en primer lugar generar dos imágenes PNG que se utilizarán como fondos de nuestra animación. Con un par de capturas del video y un poco de edición de imágenes, obtenemos los dos fondos que vamos a utilizar:

Imagen 1: Escena 1

Imagen 2: Escena 2

Una vez que tenemos los fondos, nos centramos en los sprites que van a aparecer en ellos. Es necesario distinguir dos tipos de sprites:

· Sprites estáticos: Elementos que no cambian su posición durante la animación.

· Sprites dinámicos: Elementos que sufrirán algún tipo de movimiento durante la animación.

En nuestra animación, el príncipe es un sprite animado, mientras que la probeta sería un sprite estático (no vamos a tener en cuenta la caída de la baldosa). La animación de un sprite consiste en una secuencia de imágenes que rápidamente dibujadas da la sensación de movimiento. A continuación se muestra la secuencia de imágenes para la animación “bebiendo” del príncipe:

Imagen 3: Animación “bebiendo”

El conjunto de todas las animaciones que utiliza un personaje se almacenan en un único fichero de imagen, conocido como sprite sheet. Por lo tanto debemos generar un fichero de este tipo por cada uno de los personajes que vayamos a utilizar en nuestra animación.

En la red podéis encontrar algunas páginas dedicadas a recopilar sprites de diversos videojuegos, Game Sprite Archives o Sprite Database son dos ejemplos, por supuesto, utilizando vuestro buscador podréis encontrar gran cantidad de sprite sheet con vuestros personajes preferidos. Lógicamente, si os veis con ganas podéis crear vuestros propios personajes con todos los movimientos, utilizando programas de edición de imágenes o programas dedicados exclusivamente a este propósito, como ASEPRITE.

Para que el motor JavaScript de la animación sea lo más sencillo posible, vuestras sprite sheet deberían ser iguales, es decir, que los movimientos de cada personaje sean los mismos, que estén colocados en el mismo sitio y que tengan el mismo número de imágenes (frames) para los diferentes movimientos. De este modo podremos utilizar el mismo código para todos los personajes sin necesidad de crear uno específico para cada uno de ellos.

Para nuestra animación utilizaremos una única Sprite Sheet, con el Prince of Persia:

Imagen 4: Sprite Sheet Prince of Persia

Si examináis el motor JavaScript del anterior post, encontraréis, en la carpeta imágenes, los sprite sheet de cada uno de los personajes utilizados en la animación, todos ellos con los movimientos en las mismas posiciones, así, por ejemplo, el movimiento referente a andar se encuentra arriba a la izquierda en todos ellos y se compone de cuatro imágenes.

En la próxima entrada empezaremos a explicar el funcionamiento del motor, modificándolo, poco a poco, para generar nuestra animación. Pensad vuestra animación, preparar los fondos y vuestras hojas de sprites y nos vemos en la próxima entrada.

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

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)

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

Creando una animación en HTML5: Material necesario

Anonymous — Mon, 20 Dec 2010 15:31:00 GMT

El pasado viernes, 17 de diciembre, debido a las numerosas peticiones recibidas, se decidió ampliar el plazo para la finalización del concurso Sprite Animation Contest. Tal y como se indica en la Web, el concurso consiste en realizar una animación con HTML5 enseñando las novedades del nuevo Windows Live Mail. Para ello se proporciona un motor javascript para que se utilice como base y la explicación de cómo utilizarlo en un Webcast.

Ahora, desde Windows Técnico vamos a presentar una serie de entradas donde se muestra, paso a paso, como utilizar el motor para la creación de una animación, espero que con estas entradas todos aquellos que lo veis “muy complicado”, descubráis que es más sencillo de lo que parece y os animéis a ganar una XBOX 360.

Así que, manos a la obra, en este primer post vamos a descargar todo el material necesario y preparar nuestro equipo para empezar a trabajar

Dado que la animación funciona utilizando el elemento CANVAS de HTML5 necesitamos descargarnos el navegador compatible con esta nueva versión de HTML. La instalación de Internet Explorer 9 Beta elimina de vuestro Windows Vista o Windows 7 el Internet Explorer 8 o anterior que tengáis instalado, esta puede ser una buena oportunidad para probar todas las novedades de este navegador, sin embargo, si no podéis o queréis perder vuestro Internet Explorer 8, descargar la Platform Preview, la cual podéis utilizar para visualizar la animación sin ningún tipo de problemas.

Para diseñar y programar nuestra aplicación vamos a necesitar de un editor de texto, nos vale cualquiera, incluyendo nuestro querido bloc de notas, por mi parte, durante estas entradas utilizare Microsoft® Visual Web Developer® 2010 Express, aplicación gratuita que nos proporciona todo lo necesario para el desarrollo de aplicaciones Web.

Para la creación/modificación de fondos y personajes necesitaremos de un programa de dibujo, podemos hacer uso del Paint incluido en nuestro Windows o utilizar algún programa más complejo. En mi caso utilizare Paint.net, un editor gratuito de imágenes y fotos para la plataforma Windows muy intuitivo y con características más que suficientes para nuestro propósito.

Por último nos descargamos el motor javascript, el cual vamos a utilizar para la realización de la animación, el motor consiste en un fichero comprimido ZIP, dentro contiene la carpeta DOUBLEDRAGON, en la cual se encuentran dos carpetas: imágenes y música, y dos ficheros: action.js y inicio.html.

En resumen, el material que vamos a necesitar para la creación de la animación es:

· Motor javaScript

· Internet Explorer 9 o Platform Preview

· Entorno de desarrollo (Opcional): Visual Studio 2010 Express

· Programa de edición de imágenes (Opcional): Paint .NET

Una vez descargado e instalado todo el material necesario ya podemos comenzar a realizar nuestra propia animación. En las próximas entradas explicaremos cómo funciona el motor a medida que lo vamos modificando para crear una nueva animación, preparar vuestro equipo y os espero 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)

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