Tutorial 1, Juego de Plataformas; Día 4, Animación

En la cuarta entrega de este tutorial veremos como animar a nuestro personaje, ya sea en reposo como en movimiento, traducido de Day 4 – Animation

Día 4, Animación

¡Todo el código y los recursos para este tutorial están en github!

En el día 3, hemos añadido algunas entradas simples para controlar nuestro jugador. Esta vez vamos a añadir alguna animación simple.

Para ponerte al día, descarga el día 3 de github.

Abra el IDE de DIV. Si decides continuar en la pantalla de inicio, deberíamos ver dónde estábamos cuando nos fuimos ayer.

El IDE de DIV hace que sea fácil hacer animaciones. Vamos a añadir algunos movimientos a nuestro jugador.

Primero cierra los mapas abiertos que tenemos en el IDE. solo debería estar nuestro gráfico del jugador. Seleccione “Close All” en el menú MAPS:

En el mensaje de confirmación, presiona “Accept“:

Ahora abrimos nuestro gráfico del jugador desde el FPG que creamos arrastrando la imagen desde el mapa a nuestro escritorio:

Has esto 2 veces más, así que tenemos tres copias de nuestro gráfico para que tu pantalla se vea así:

Has doble clic en uno de estos para abrir el editor (o puedes hacer click en  “Edit map” en el menú MAP)

Ahora tenemos tres cuadros para jugar con la animación. Comencemos a editar.

Para el primer cuadro, vamos a mover la cabeza de los jugadores ligeramente hacia adelante y hacia abajo, por lo que parece que va para adelante.

Selecciona la herramienta “tijeras” en el menú y, a continuación, la herramienta de selección de caja:

Selecciona la cabeza del jugador utilizando el cuadro y, a continuación, pulsa la herramienta de recorte para seleccionar la parte del gráfico.

Pulsa el icono “DEL” para eliminar la selección:

Usando el ratón sobre el gráfico original, ahora puedes volver a colocar la cabeza del jugador en cualquier lugar. Queremos simplemente moverlo hacia abajo un píxel a la derecha como este:

Si presionas la tecla TAB, ahora puedes recorrer los 3 cuadros de animación y ver la cabeza avanzar en el marco que editamos!

Ahora podemos editar el resto del cuerpo para indicar el movimiento del marco de animación del jugador editando los brazos para crear una simple secuencia de 3 marcos

Ahora arrastramos esas imágenes a nuestro fpg. Teniendo cuidado de no sobrescribir nuestro gráfico original que tiene ID 1

Asegúrate de agregar tus imágenes en el orden correcto y cambiar el id en cada una. Utilicé 2 3 y 4.

Nuestro FPG ahora se verá así.

Ahora que tenemos nuestra animación podemos aplicar esto a nuestro jugador. Vamos a volver a nuestra ventana de código:

Necesitamos realizar una seguidilla de la animación, entre los fotogramas 2 3 y 4, que es lo que añadiremos.

Así que entendiendo cómo animar, permite hacer que nuestro jugador “camine” continuamente para comenzar.

Agregue el siguiente código sobre de nuestras declaraciones IF.

Para cada cuadro, la variable graph se incrementa con “graph = graph+1“, se verifica si ha ido más allá de nuestro rango, la instrucción IF “graph > 4” comprueba si la variable graph es mayor a 4 (nuestra animación está en los ids 2, 3 y 4) y si es así, establece la variable de gráfico de nuevo al inicio de nuestro gráfico de bucle de animación “2”. Esto recorre nuestros cuadros de animación en un bucle continuo.

Podemos comprobar los gráficos junto al código mirando el archivo FPG.

El PRG y FPG deben tener este aspecto.

Veamos cómo se ve esto ejecutando el programa con F10

Debido a que la animación está cambiando cada fotograma, y no tenemos muchos fotogramas, ¡nuestro jugador parece que está corriendo muy rápido! Así que vamos a solucionar esto con una variable PRIVATE que podemos comprobar para cambiar sólo el marco de animación cuando queramos.

Por encima de BEGIN en el PROCESS de nuestro jugador, agrega una variable privada como esta:

Utilicemos esta variable como un contador para actualizar la variable graph cada 3 cuadros como sigue:

Sobre el código graph = graph + 1;, agregue lo siguiente:

Y justo sobre la condición IF (KEY (_left)), añade lo siguiente:

Ahora la lógica de animación gráfica sólo se ejecuta cuando el contador animcount es mayor a 3 – que luego se restablece y el gráfico se incrementa y así sucesivamente.

Nuestro código PROCESS del jugador debería verse así:

Ejecuta el código y usa las teclas izquierda/derecha para mover nuestro personaje.

Palabras clave aprendidas en esta lección:

 

One thought on “Tutorial 1, Juego de Plataformas; Día 4, Animación

Deja un comentario

A %d blogueros les gusta esto: