¿Cómo construir una animación de varios estados en su juego html5
Con todo este movimiento pasando en su juego de HTML5, que te van a querer múltiples animaciones sofisticadas. Se puede utilizar el cambiar imagen() o setImage () la función (que 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 de caminar es en realidad una serie de ocho imágenes diferentes intercambiadas rápidamente para dar la ilusión de caminar. Hay 4 animaciones diferentes (uno para cada uno de los puntos cardinales), por lo que es un total de 32 imágenes diferentes. Sin embargo, si se mira sobre el código, verá que la personaje sprites contiene sólo una imagen.
Video: Adobe Animate - Videojuego - HTML5 - Paso 1 - Herramientas
Esta imagen es una animación compuesto. 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. Se registró generosamente esta imagen en la El sitio OpenGameArt.org, “Arikel”, donde se le conoce como Él lanzó su trabajo bajo una licencia especial llamado “Reconocimiento -. Compartir bajo la misma” Esto significa que la gente puede usar o remezclar su trabajo de forma gratuita, siempre y cuando ellos atribuyen al autor original.
La imagen de fondo es por un autor llamado Hyptosis, que lanzó imágenes bajo el dominio público en el mismo sitio. contribuyentes con talento y muy pensados 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 los autores como se merecen.
Video: Animaciones para juegos HTML5 | Desarrollo de juegos javascript
los simpleGame.js librería contiene una función para hacer animaciones de imágenes múltiples con bastante facilidad. Mirar por encima del código de walkAnim.html para ver cómo funciona:
walkAnim.html
Es necesario tomar algunas nuevas medidas para crear una animación, pero los resultados son completamente la pena el esfuerzo.
Video: Tutorial Juego Lucha GameMaker [#1] Como Controlar Animaciones
Obtener una imagen de la animación.
Puede crear una imagen usted mismo, o mirar a los excelentes recursos como OpenGameArt.org encontrar un 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 está organizada 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 se conoce el tamaño de cada sub-imagen.
Adjuntar la imagen de animación a tu sprite.
Vas a conectar la imagen completa 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.
Crear un objeto de animación con el loadAnimation () método.
Video: Como Hacer Fondos Bonitos Y Adecuados Para tus Animaciones (Ft. Hernán Bruna)
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 subimagen. Si obtiene estos valores equivocada, aparecerá la animación para desplazarse. Seguir jugando hasta obtener estos valores de la derecha:
character.loadAnimation (192, 128, 24, 32) -
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 () -
Renombrar 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 cada fila representa:
character.renameCycles (new Array ("abajo", "arriba", "izquierda", "derecho")) -Ajuste la velocidad de la animación.
La velocidad de la animación indica la rapidez con la animación se ejecutará. Un valor de 500 parece adecuado para la mayoría de aplicaciones, pero se puede ajustar este valor por lo que el ciclo paseo del personaje parece que se está impulsando en realidad el personaje:
character.setAnimationSpeed (500) -
Establezca 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") -Utilizar el pauseAnimation () comando ponga en pausa la animación.
los pauseAnimation () comando hace que la animación se detiene temporalmente.
Utilizar ReproducirAnimación () para iniciar la animación.
Este método se repetirá continuamente el ciclo de animación actual.
Como se puede ver, la 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.