Diseño y animación de nuestro ratón con Piskel

Antes de empezar a programar, vamos a crear el personaje principal del juego: nuestro ratón. Lo diseñaremos con estilo pixel art, una técnica muy utilizada en los videojuegos retro que permite crear gráficos sencillos y visualmente atractivos. Para ello, utilizaremos la herramienta gratuita Piskel, ideal para crear y animar sprites.

El diseño del ratón será sencillo, pero debe encajar con la estética y la temática del juego que queremos desarrollar. Podemos darle un aspecto simpático o más realista, según el estilo del proyecto, pero siempre con trazos simples y fáciles de animar.

Una vez tengamos el diseño base del ratón terminado (en el primer frame), duplicaremos ese frame varias veces para trabajar con copias y crear una animación básica de movimiento, por ejemplo, moviendo ligeramente las patas o la cabeza para simular que camina. Recomendamos hacer una animación de 4 fotogramas para que el movimiento sea fluido pero fácil de gestionar.

Cuando tengamos todas las imágenes creadas, procederemos a:

1. Exportar la animación como un archivo .zip desde Piskel.

2. Descomprimir la carpeta zip para obtener los archivos de imagen individuales (normalmente en formato .png).

3. Arrastrar esas 4 imágenes a MochiCard, dentro del apartado de «vestidos» o «disfraces» del personaje.

Una vez dentro de MochiCard, es muy importante que nos aseguremos de que todos los dibujos estén orientados hacia la derecha, ya que esto determinará la dirección correcta del movimiento del personaje al programarlo.

Finalmente, para que el personaje cobre vida, usaremos los bloques de programación de MochiCard para crear una animación automática. En el bloque principal (por ejemplo, dentro de un bucle «por siempre»), colocaremos el bloque «siguiente disfraz» junto a un bloque de esperar 0.1 segundos, lo que permitirá que las imágenes se reproduzcan una tras otra generando una animación fluida de movimiento