prucommercialre.com


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 la función setImage () (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.

Cómo construir una Animación Multi-Estado en su juego HTML5

Hay un montón de imagen-swapping pasando aquí. La animación de caminar 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 es un total de 32 imágenes diferentes. Sin embargo, si nos fijamos sobre el código, verás que el sprite caracteres contiene sólo una imagen.

Cómo construir una Animación Multi-Estado en su juego HTML5

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.

La imagen rpg_sprite_walk.png fue creado por Franck Dupont. Él generosamente publicó esta imagen en el sitio OpenGameArt.org, donde se le conoce como "Arikel." Lanzó su trabajo bajo una licencia especial llamado "Reconocimiento -. Share Alike" Esto significa que la gente puede utilizar o remix de su trabajo de forma gratuita, siempre que 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 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.

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

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Charset meta = "UTF-8">
<Title> walkAnim.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
juego var;
fondo var;
carácter var;

función init () {
juego = new escena ();
fondo = new Sprite (juego "rpgMap.png", 800, 600);
background.setSpeed ​​(0,0);
background.setPosition (400, 300);
carácter = new Sprite (juego "rpg_sprite_walk.png", 192, 128);
character.loadAnimation (192, 128, 24, 32);
character.generateAnimationCycles ();
character.renameCycles (new Array ("abajo", "arriba", "izquierda", "derecha"));
character.setAnimationSpeed ​​(500);
// Inicia en pausa
character.setPosition (440, 380);
character.setSpeed ​​(0);
character.pauseAnimation ();
character.setCurrentCycle ("abajo");

game.start ();
} // Init final

actualización function () {
game.clear ();
checkKeys ();

background.update ();
character.update ();
} // Actualización final

checkKeys function () {

si (keysDown [K_LEFT]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (270);
character.setCurrentCycle ("izquierda");
}
si (keysDown [K_RIGHT]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (90);
character.setCurrentCycle ("derecho");
}
si (keysDown [K_UP]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (0);
character.setCurrentCycle ("arriba");
}
si (keysDown [K_DOWN]) {
character.setSpeed ​​(1);
character.playAnimation ()
character.setMoveAngle (180);
character.setCurrentCycle ("abajo");
}

si (keysDown [K_SPACE]) {
character.setSpeed ​​(0);
character.pauseAnimation ();
character.setCurrentCycle ("abajo");
}
}

</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Es necesario tomar algunas nuevas medidas para crear una animación, pero los resultados son totalmente vale 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 del otro, 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 el 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 a 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 método loadAnimation ().

    Cuando se invoca el método loadAnimation () 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 comando buildAnimationCycles () 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 correcto para la mayoría de las aplicaciones, pero se puede ajustar este valor para 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.

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

    character.setCurrentCycle ("abajo");

  8. Utilice el comando pauseAnimation () para detener la animación.

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

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

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

Como 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.