Saltar la navegación

4.3. Animaciones de personajes

Retor dice¡Prepárate para conocer los trucos del programador de videojuegos!

Para crear un videojuego es necesario realizar una serie de interacciones entre los personajes, entre personajes y objetos, los fondos, reproducir fenómenos físico, movimientos, etc.

A continuación se detallan algunos de ellos que suelen aparecer en los videojuegos de todo tipo.

¡Si te gusta programar videojuegos vas a disfrutar de lo lindo!

1. ¿Cómo crear una animación?

Animación en la que aparece un niño caminando por un campo de izquierda a derechaEn el ámbito de los videojuegos, los sprites son un conjunto de imágenes que representa un personaje u objeto de manera gráfica y que se utiliza para poder crear cualquier efecto de movimiento o para cambiar su estado o posición en la escena.

En esta actividad vamos ha realizar una animación de un personaje. En Processing las animaciones se realizan por medio del void draw() que contiene el código a ejecutar cada vez que se tiene que actualizar el dibujo  y al cambiar las imágenes  se producirá el efecto de animación. Generalmente, en la función draw() tendremos que borrar el lienzo y luego volver a dibujar los elementos, pero en otra posición o con otro tamaño. Al variar las características del diseño cada vez que se dibuja de nuevo la imagen, parecerá como si los elementos de la imagen se están animando.

La variable del sistema frameRate(fps) contiene la velocidad de fotogramas por segundo aproximada del software a medida que se ejecuta. 

Para realizar la animación hay que cargar muchas imágenes y hacerlo una a una sería muy tedioso e ineficaz. Para ello se utilizan los llamados arrays de imágenes

Repasaremos primero el concepto de Array  y después veremos cómo aplicarlo en nuestras animaciones.

Arrays

Arrays de imágenes


Puedes descargar la descripción del video en formato texto haciendo clic aquí.
Puedes descargar los subtítulos del video en formato vtt haciendo clic aquí.

Realizar una animación

2. Vamos a animar un personaje

Dibujo de un chico con camiseta azul y gorraLa siguiente imagen muestra el código utilizado en la animación del chico caminando que se muestra anteriormente. Con lo aprendido hasta ahora seguro que serás capaz de comprender su funcionamiento.

Ahora te toca a ti, realiza una animación de una chica corriendo utilizando 20 imágenes del sprite que puedes descargar a continuación.

Código animación caminando
Click para aumentar


Dibujo de una chica con el pelo rojo y largo y los ojos azulesAhora te toca a ti. Realiza una animación de una chica corriendo sobre un fondo. Utiliza las 20 imágenes del sprite y el fondo que puedes descargar a continuación.

Utilizando la misma técnica puedes realizar los movimientos que suelen realizar los personajes de los videojuegos como esperar, saltar, caer, etc.

Imagen con movimiento en la que aparece el chico de antes caminando, saltando y cayendo en el agua

Este es el enlace con los archivos necesarios para realizar la actividad.

Clavis dice Te ayudo a organizarte

En ejercicios de este tipo hay que intentar ser práctico porque pueden ser muy complejos si sabes muchas cosas. Por ello, es recomendable que antes responder pienses en aspectos como los siguientes:

¿Sabes lo que se pide?
¿Te acuerdas de lo que debes hacer en estos casos?
¿Se te da bien organizar?
¿Te gusta hacer las cosas de forma detallada?
¿Puedes acordarte de algún otro ejercicio parecido que hayas hecho?
¿Hay algo que ya hayas usado para un ejercicio parecido?
¿Se te da bien programar?
Pensar sobre lo que sabes hacer y comentarlo a las compañeras y compañeros facilita poner en marcha las habilidades necesarias para responder a este tipo de tareas. Recuerda que es una buena estrategia cuando te piden que crees o inventes algo.

3. Gravedad en videojuegos

La gravedad es un fenómeno físico imprescindible para la mayoría de los videojuegos con pocas excepciones, como cuando se desarrollan en el espacio o en el agua por ejemplo. 

Además, frecuentemente la gravedad forma parte de la dificultad del juego y es necesario reproducirla en los objetos para que se muevan con realismo.

Para reproducir la gravedad es bastante fácil, solamente hay que incrementar  la variable " y " que controla la componente vertical de posicionamiento de los objetos cada vez que se tiene que actualizar el dibujo en el void draw.

Copia el código de cada uno de los siguientes ejemplos en el IDE de Processing y cambia el valor de las variables de velocidad y gravedad.

Gravedad constante

El objeto cae a velocidad constante. Copia este código en el IDE de Processing y prueba, cambiando la variable "velocidad", para ver cómo se puede modificar dicha velocidad de caída.

y = y + velocidad 

Vídeo en el que un círculo blanco sobre un fondo azul cae desde arriba al suelo demostrando la gravedad constanteCódigo gravedad constante

Movimiento uniformemente acelerado

En este caso la simulación es mucho más realista al añadir una variable de "gravedad" que convierte el movimiento en uniformemente acelerado.

Vídeo en el que un círculo blanco sobre un fondo amarillo cae desde arriba al suelo demostrando el movimiento uniformemente aceleradoGravedad MUA

Suelo

Normalmente la caída  termina en el suelo donde el objeto deja de caer. En ese punto la "y" ya no sigue cambiando si no que permanece constante.

En este caso puede ser muy útil utilizar  println (y);  para ver el valor de la componente y en la consola.

Este efecto es muy utilizado en los juegos de plataformas.

Vídeo en el que un círculo azul sobre un fondo amarillo cae desde arriba a una estantería y después cae desde arriba al suelo, demostrando el efecto sobre el sueloCódigo de suelo

Rebote

En ocasiones podemos completar la caída con un efecto de rebote sobre la superficie. Este rebote debe ser cada vez más atenuado para que sea realista.

Vídeo en el que un círculo blanco sobre un fondo amarillo cae desde arriba  y rebota en el suelo, demostrando el efecto reboteCódigo de rebote

4. Distancias, choques y disparos

En muchas ocasiones necesitamos saber la distancia entre dos objetos para determinar su interacción. Por ejemplo cuando la distancia es menor a una determinada se puede utilizar para:

  • Recoger objetos.
  • Producir choques e impactos.
  • Sumar puntos.

Función dist()

  

Recuerda el código del "recogedor de manzanas". Utilizamos la función dist() para saber cuando la ha recogido.

Distancias

Técnica easing para movimientos fluidos

 

Disparos y lanzamientos

Invasores del espacio

Vamos a trabajar con un juego de este tipo para ver cómo se realizan los disparos y los movimientos.

Puedes ver el código en el siguiente PDF:

Invasores del espacio.pdf

Código invasores del espacio

Cópia el código de esta versión de "Invasores del espacio" en el IDE de Procesing y analiza el código prestando atención a los siguientes cambios:

  • Modifica el frameRate para ver cómo afecta al juego.
  • Analiza cómo se realizan los movimientos del cañón laser.
  • Analiza cómo se realizan los disparos y los impactos.
  • Añade un contador de naves destruidas.
  • ¿Te atreves a hacer que la nave se dirija hacia el cañón con la técnica de easing?

Clavis dice ¡Pon mucha atención!

Cuando tienes que programar algo es muy importante no cometer errores en el resultado final.

Un truco para centrar la atención es que vayas siguiendo cada paso y comprobando que lo que vas haciendo está bien y el programa hace lo que tú esperabas.

Puedes ir comprobándolo en el programa que uses.

La estrategia de supervisar cada paso ayuda a controlar los posibles errores que pueda haber y resolver las dificultades. Esta estrategia se puede usar en cualquier tarea en la que tengamos que hacer varios pasos (cualquier ejercicio de programación, un problema matemático, un análisis de oraciones y muchas más).

¡Pruébala y verás que no se te olvida nada!

Kardia dice Otro de los clásicos

Máquina recreativa del juego Space Invader

Hay multitud de juegos donde hay que demostrar la habilidad rechazando a los invasores del espacio. El más famoso seguramente es "Space Invader" que proporcionó muchas horas de diversión desde la década de los 80 en las videconsolas y en las máquinas recreativas y aún es imprescindible para los amantes de los juegos retro. Fue uno de los precursores de los videojuegos modernos y ayudó a expandir la industria del sector.