Manejo de Animación en juegos de 8 Direcciones

1

Tagged

Attached Files

The following files have been attached to this tutorial:

.capx

animation-management-example.capx

Download now 348.63 KB

Stats

4,636 visits, 4,970 views

Tools

En muchos juegos modernos de vista desde arriba, tales como The Legend of Zelda: A Link to the Past,los jugadores tienen una gran libertad de movimiento en la cual ellos se pueden mover en cualquiera de las cuatro direcciones cardinales (Norte, Sur, Este, y Oeste) también como en las direcciones entre estas. (Este es un paso adelante desde juegos como The Legend of Zelda original, donde los únicos movimientos posibles eran Norte/Sur/Este/Oeste.) Aún en juegos donde el jugador puede caminar en más direcciones que las cuatro básicas, típicamente hay únicamente cuatro animaciones de caminata correspondientes a las cuatro direcciones cardinales; cualquiera que sea el ángulo en el que camina el jugador, el programa calcula la dirección primaria (N/S/E/O) del movimiento, y activa la animación de caminata correspondiente.

En este artículo, demostraremos una manera eficiente para calcular la dirección y fijar la animación para los personajes del jugador y los enemigos en un juego de vista desde arriba.

El Jugador

Una practica estándar en programación de juegos es mantener múltiples objetos para cada personaje: por ejemplo, un objeto sprite para controlar la posición/rotación/movimiento/detección de colisiones, y otro objeto sprite para almacenar las animaciones. (Por ejemplo, puedes querer que tu personaje sea capaz de moverse a un ángulo de 45 grados en el layout, pero no necesariamente querer que las imágenes de la animación sean rotadas esa cantidad.)

Empezaremos por crear dos sprites. Un sprite será llamado "Jugador" y tendrá los comportamientos 8-Direction, Scroll-To y Bound-to-Layout; este objeto maneja nuestro movimiento. Otro sprite será llamado "AnimacionJugador" y tendrá el comportamiento Pin, así lo podremos configurar para moverse automáticamente en sincronía con el objeto Jugador. Lograremos esto con los eventos mostrados debajo.

Nótese en particular que cuando se fija AnimacionJugador a Jugador, la opción "Position Only" deber estar seleccionada, para evitar una no deseada rotación de las imágenes de animación.

A continuación, presentaremos dos métodos para configurar las animaciones de Jugador correctamente. el primer método es sencillo pero requiere muchos eventos; el segundo usa un poco de matemática y es mucho más eficiente.

Método 1

En este método, primero determinaremos el nombre de la dirección primaria en la cual el jugador se está moviendo, usando algunas comparaciones; entonces, almacenaremos el nombre de la dirección correspondiente en una variable de instancia, y usaremos esta información para escoger la animación. Si A representa el ángulo del sprite Jugador, entonces las comparaciones son:

Usando la condición "Is Between Angles", asignamos:

* si -45 <= A <= 45, entonces asignamos NombreDireccion = "Este"

* si 45 <= A <= 135, entonces asignamos NombreDireccion = "Sur"

* si 135 <= A <= 225, entonces asignamos NombreDireccion = "Oeste"

* si 225 <= A <= 315, entonces asignamos NombreDireccion = "Norte"

(( Nota técnica importante: aquí, estamos usando el ángulo de la imagen del sprite jugador para calcular la dirección de movimiento; el comportamiento 8-Direction está configurado para sincronizar el ángulo de imagen, y el rango de los ángulos de imagen va desde 0 a 360. En algunas situaciones, tales como usar el ángulo de movimiento del comportamiento Bullet, las mediciones de ángulo usan el rango -180 a 180; en este escenario necesitas comparar valores usando la condición System: Compare Two Values para acceder al valor de Bullet.AngleOfMotion, y puedes necesitar hacer algunas conversiones en las comparaciones anteriores, por ejemplo, 315 grados es igual -45 grados, etc. ))

Entonces, usando la información almacenada en NombreDireccion, y teniendo en cuenta cuando el jugador esta en realidad moviéndose, la animación correcta debe seleccionarse para reproducirse. (Para este ejemplo, los nombres de animación son CaminarEste, CaminarSur, CaminarOeste y CaminarNorte.) Cuando el jugador no esta moviéndose, la animación debe detenerse. Los eventos debajo muestran como hacerlo.

Método 2

Con un poco de matemática, podemos lograr el mismo resultado con menos eventos (todas las cuatro comparaciones pueden lograrse con una sola acción). En este método, en lugar de almacenar nombres de direcciones en una variable de instancia NombreDireccion, crearemos un código numérico para cada una: 0 para Este, 1 para Sur, 2 para Oeste y 3 para Norte; estos números serán almacenados en una variable llamada CodigoDireccion . Crearemos una fórmula que convertirá cada rango de ángulos listados anteriormente en uno des esos cuatro números. Si A representa el ángulo de la imagen del sprite, entonces la fórmula es:

floor( (((A + 45) % 360) / 90) )

Para ver como se logra el resultado deseado, veremos unos cuantos ejemplos.

* Si el ángulo del sprite es A = 30, entonces A+45=75, 75%360=75, 75/90=0.833333..., y floor(0.833333...)=0, al cual corresponde animación hacia el Este.

* Si el ángulo del sprite es A = 267, entonces A+45=312, 312%360=312, 312/90=3.46666..., y floor(3.46666...)=3, al cual corresponde animación hacia el Norte.

* Si el ángulo del sprite es A = 352, entonces A+45=397, 397%360=37 (únicamente para números mayores a 360 tendrá algún efecto %360), 37/90=0.41111..., y floor(0.41111...)=0, al cual corresponde animación hacia el Este.

Para este método, las animaciones necesitan ser llamadas Caminar0, Caminar1, Caminar2 y Caminar3 (para Este, Sur, Oeste y Norte respectivamente); entonces, los siguientes eventos tendrán el mismo efecto que los eventos del método #1 arriba.

Otros Personajes

El proceso para configurar la animación correcta para otros personajes es casi idéntico a los eventos para configurar las animaciones del jugador; existen unas pocas diferencias. Las diferencias más obvias son que la propiedad Default Controls de el comportamiento 8-Direction debe fijarse en No, y cuando hay múltiples objetos enemigo, ellos deben procesarse/actualizarse usando un bucle For Each.

Un cambio menos obvio que debe hacerse ocurre cuando hay más de una instancia de un tipo de personaje en particular (lo cual es típicamente cierto para la mayoría de enemigos, exceptuando los tipo jefe). Cada sprite enemigo necesitará su correspondiente sprite AnimacionEnemigo, y necesitan estar "emparejados", así que al seleccionar un Enemigo también selecciona su propio AnimacionEnemigo. La manera de lograr esto en Construct 2 es usando contenedores. Para hacer esto, tras crear tus sprites Enemigo y AnimacionEnemigo, selecciona el objeto Enemigo en la lista de objetos, y en el panel de propiedades, debajo del encabezado Container, pulsa en "Create", y selecciona el objeto AnimacionEnemigo en la ventana que aparece. El resultado será que cuando el layout inicia, copias extra de AnimacionEnemigo serán generadas hasta que haya una para cada Enemigo, y ellas serán "emparejadas" como se explico anteriormente. (Consulta Containers en el manual de usuario (en inglés) para más detalles.)

Los eventos siguientes muestran como cambiar la animación del enemigo, de la misma forma que la animación del jugador.

Como nota al margen, puedes estar preguntándote como controlar enemigos con un comportamiento 8-Direction. El archivo capx incluye un número de eventos para mover los enemigos alrededor; en aras de completar (y a riesgo de salir del tema), los eventos son incluidos a continuación. Esto usa una técnica de inteligencia artificial llamada "máquina de estados", la cual es expuesta a profundidad en mi artículo sobre I.A. y Máquinas de Estado, el cual puede ser también de interés.

Conclusión

El archivo capx de ejemplo incluido en este artículo muestra estos eventos en acción y es recomendable descargarlo y ejecutarlo. ¡Esperamos que las técnicas expuestas en este artículo te ayuden al usar animaciones con el comportamiento 8-Direction en tus propios proyectos de Construct 2!

.CAPX

animation-management-example.capx

Download now 348.63 KB
  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!