¿Cómo construir una animación multi-estado en su juego html5

Con todo este movimiento pasando en su juego de HTML5, que te van a querer múltiples animaciones sofisticadas. Puede utilizar el changeImage () o setImage () función (son dos nombres diferentes para la misma cosa) para cambiar la imagen asociada a un sprite cualquier momento. A veces, sin embargo, desea animaciones mucho más sofisticados. Echa un vistazo a walkAnim.html.

Hay un montón de imagen-intercambio pasando aquí. La animación a pie es en realidad una serie de ocho imágenes diferentes intercambian rápidamente para dar la ilusión de caminar. Hay 4 animaciones diferentes (uno para cada uno de los puntos cardinales), así que eso es un total de 32 imágenes diferentes. Sin embargo, si nos fijamos sobre el código, verás que el personaje sprites contiene sólo una imagen.

Esta imagen es una animación compuesta. Cada fila representa una dirección, y cada fila contiene un ciclo, o una serie de imágenes, destinado a ser repetida.

los rpg_sprite_walk.jpg imagen fue creada por Franck Dupont. Él generosamente publicó esta imagen en el sitio OpenGameArt.org, donde es conocido como "Arikel." Lanzó su trabajo bajo una licencia especial llamada ". Reconocimiento - Compartir bajo la misma " Esto significa que las personas pueden usar o remezclar su obra de forma gratuita, siempre y cuando atribuyen al autor original.

La imagen de fondo es de un autor llamado Hyptosis, que lanzó las imágenes bajo el dominio público en el mismo sitio. Colaboradores talentosos y bien pensadas como Franck y Hyptosis son la clave para la comunidad creativa próspera. Siéntase libre de mirar por encima del sitio de arte del juego abierto durante más gran obra de arte a utilizar en sus juegos, pero asegúrese de agradecer y atribuir a los autores como se merecen.

los simpleGame.js biblioteca contiene una función para hacer animaciones multi-imagen con bastante facilidad. Revise el código de walkAnim.html para ver cómo funciona:

Usted necesita tomar unos nuevos pasos para construir una animación, pero los resultados son totalmente la pena el esfuerzo.

1. Obtener una imagen de la animación.

   Puede crear una imagen usted mismo, o mirar a los excelentes recursos como OpenGameArt.org para encontrar trabajo que otros han hecho. Por supuesto, usted tiene la responsabilidad de respetar el trabajo de otros, pero hay un gran trabajo disponible en licencias muy permisivas hoy. Asegúrese de que la imagen se organiza en filas y columnas y que cada sub-imagen es exactamente el mismo tamaño.

   Puede que tenga que meterse con su editor de imágenes para asegurarse de que la imagen está en el formato correcto y que usted sabe el tamaño de cada sub-imagen.

2. Coloque la imagen de animación de tu sprite.

   Vas a conectar toda la imagen a tu sprite, sino simplemente mostrar una pequeña parte de ella en cualquier momento. Esto es más fácil que trabajar con un montón de imágenes, y también es más eficiente.

3. Crear un objeto de animación con el loadAnimation () método.

   Cuando se invoca el loadAnimation () método de un objeto, que está creando una herramienta de animación que ayuda a gestionar la animación. Los dos primeros parámetros son el tamaño de la imagen completa (anchura y altura) y los segundos dos parámetros son la anchura y la altura de cada sub-imagen. Si usted recibe estos valores mal, la animación aparecerá para desplazarse. Sigue jugando hasta que obtenga estos valores a la derecha:

   character.loadAnimation (192, 128, 24, 32) -

4. Construir los ciclos de animación.

   Cada fila se convertirá en un ciclo de animación. La versión por defecto (sin parámetros) funciona bien en la mayoría de las situaciones. Busque la documentación de los usos más avanzados de esta herramienta:

   character.generateAnimationCycles () -

5. Cambiar el nombre de los ciclos.

   Las animaciones creadas con el buildAnimationCycles () comandos tienen nombres por defecto, pero es casi siempre mejor para fijar sus propios nombres, más significativas. Añadir una matriz con un nombre que indica lo que representa cada fila:

   character.renameCycles (new Array ("abajo", "arriba", "izquierda", "derecha")) -

6. Ajuste la velocidad de la animación.

   La velocidad de la animación indica qué tan rápido se ejecutará la animación. Un valor de 500 parece el adecuado para la mayoría de aplicaciones, pero se puede ajustar este valor por lo que el ciclo paseo del personaje parece que está realmente impulsar el carácter:

   character.setAnimationSpeed ​​(500) -

7. Establece que el ciclo tiene la intención de mostrar.

   los setCurrentCycle () método le permite elegir el ciclo con uno de los nombres que se indica en el renameAnimationCycles () paso:

   character.setCurrentCycle ("abajo") -

8. Utilizar el pauseAnimation () comando ponga en pausa la animación.

   los pauseAnimation () comando hace que la animación se detiene temporalmente.

9. Usar ReproducirAnimación () para iniciar la animación.

   Este método se repetirá de forma continua el ciclo de animación actual.

Como se puede ver, animación añade una enorme cantidad de diversión a los juegos y abre todo el ámbito de los juegos de rol a su repertorio.