Una introducción a los sprites en Game Maker Studio

Vamos a hablar de uno de los recursos más importantes que existen en Game Maker Studio: los sprites. ¿Qué es un sprite en Game Maker? Los sprites es la manera en que representamos los objetos dentro del juego. Los sprites son imágenes, si son varias imágenes representarán movimiento con un bucle, si sólo tenemos una será una imagen fija, que puedes crear con cualquier programa de edición, o conseguirlas por internet. Por ejemplo, si tenemos la siguiente secuencia de imágenes:

Imágenes separadas que crean una animación

tenemos la siguiente animación que se vería así en el juego.

Animación de Sasquatch

Interesante, ¿a que sí? Todos los juegos necesitan animaciones de este tipo, para cualquier cosa que te puedas imaginar: power-ups, personajes, enemigos, armas, etc. También necesitarán sprites que seguramente no contengan ninguna animación, por ejemplo: muros, suelo, escaleras, árboles, casa… Así que la gran mayoría de los elementos que vemos en los juegos son sprites, por eso es importante cuando los creamos de dedicarles toda nuestra atención, tanto o más que cuando programamos con Game Maker Studio.

Añadir sprites con Game Maker Studio

Dentro del programa tenemos muchos sprites que podemos utilizar para probar nuestros juegos y hacer nuestros prototipos, pero YoYoGames nos avisa que no se pueden utilizar si distribuyes tu juego definitivo. Pero ya hablaremos de como conseguir estos sprites en múltiples sitios, y de herramientas de todo tipo para poder crearlos.

Ahora vamos a ver como se crean los sprites. Para ello, podemos utilizar el menú del programa, donde pone Resources – Create Sprite o utilizar el botón que hay en la barra de herramientas. Cuando lo hagamos, aparecerá una ventana como ésta:

Ventana de propiedades de un sprite

Vemos que en la ventana podemos editar un montón de propiedades del sprite. Arriba a la izquierda podemos ponerle un nombre al sprite, yo aconsejo utilizar un nombre que podamos identificar rápidamente en cualquier momento que lo queramos utilizar. Yo suelo utilizar una nomenclatura parecida a esta:

spr_nombre_identificativo

Empiezo todos los sprites con spr_ y luego les pongo un nombre fácil de recordar, normalmente en inglés (pero esto va a gustos). Los motivos son:

• Tal y como hemos dicho, es fácil de identificar. Por el prefijo spr_ se que es un sprite.
• Game Maker Studio obliga a que todos los recursos tengan nombres diferentes. Si por ejemplo al sprite le llamasemos protagonista, ¿como llamaríais al objeto? NO lo podemos llamar igual. Así que lo suyo sería ponerle al sprite spr_protagonista y al objeto obj_protagonista.
• Facilidad de lectura. Cuando empecemos a codificar en lenguaje GML, una de las cosas más importantes es que el código esté estructurado y sea fácil de entender. Ponerle este tipo de nombres en el código ayuda mucho para entender qué hace.

Sobre cómo ponerle nombre a los recursos ya hablaremos en otro post, aunque para gusto los colores 😉

Aunque le pongamos un nombre al sprite, internamente Game Maker lo identifica como un número, lo comento porque cuando depuremos, controlemos los posibles errores que pueda tener, es posible que los veamos y puede confundir.

Me he desviado un poco del tema, sigamos con las propiedades. Si queremos cargar un sprite que tengamos en el ordenador, podemos hacerlo si le damos al botón Load Sprite. Aparecerá una ventana para elegir el sprite que queremos importar:

Ventana para añadir imágenes a un sprite

Este tipo de ventana la habréis visto en muchos programas para seleccionar archivos. A la derecha podemos ver una vista previa de la imagen e información básica como su tamaño, aunque permite un par de opciones que nos pueda interesar. Si la imagen contiene zonas transparentes, nos puede interesar quitarlas y hacerlas opacas con el check Make Opaque, eliminar el color de fondo con el check Remove Background, por lo que se quedaría transparente, o suavizar los bordes de los sprites con el check Smooth Edges, que puedes conseguir mejorar la imagen. Una vez has elegido la imagen y posiblemente algunas de las opciones, puedes cargarla con el botón Open.

Game Maker permite importar bastantes formatos de imagen. Algunas extensiones de archivos pueden ser PNG, JPG, BMP y GIF, aunque con las últimas versiones también permite importar archivos SWF, formato FLASH, y JSON, del programa Spine.

Hay una serie de cosas que tienes que tener en cuenta a la hora de cargar imágenes:

• Al cargar un gif animado, formato GIF, verás que ha separado todas las imágenes de la animación como subimágenes del sprite.
• Si el nombre dle fichero acaba en _stripXX, dónde XX es un número, se considera que esa imagen contiene un número XX de subimágenes una junto a la otra. Por ejemplo, la siguiente imagen
  

  Ejemplo de un fichero como strip

  se llamará cosa_strip6.png, dónde al importarlo conseguiremos la siguiente animación:

Animación

• Si la imagen contiene una serie de subimágenes pero no queremos importarlas todas, ya sea que solo queremos algunas o contiene varias animaciones, no lo cargaremos con el botón Load Sprite. Por ejemplo, esta imagen:
  

  Otro ejemplo de strip

  seguramente nos interese cargar cada fila de imágenes en un sprite diferente, sería algo como spr_player_up, spr_player_right, spr_player_down y spr_player_left. Esta opción la explicaremos más adelante en otro post.

• Aunque admite varios formatos de imagen, yo recomiendo utilizar PNG, ya que es el formato más limpio. JPG utiliza un sistema de compresión de ficheros que hace que pierda bastante calidad, y BMP es un formato bueno pero suele ocupar más espacio.
• Desde el botón Load Sprite, cuando aparece la ventana es posible cargar más de un fichero a la vez, los que componen la animación. Se puede hacer de varias maneras, por ejemplo:
  • Haciendo click con el ratón a una imagen, y si mantenemos pulsada la tecla <Ctrl>, podemos hacer click en otras imágenes que irá añadiendo.
  • Lo mismo que lo anterior, pero si pulsas la tecla <Mayus>, elegirá un rango entre la primera imagen seleccionada y la última. Eso es muy útil para elegir un número grande de imágenes, seleccionando la primera y la última de la lista.
  • Si haces click en el explorador y arrastras el ratón, puedes elegir varias imágenes a cargar.

Una vez hemos cargado el sprite, volvemos a la misma ventana de propiedades del sprite del principio. Veremos que aparece la primera subimagen a la derecha de la pantalla, si queremos movernos entre todas las imágenes del sprite podemos navegar pulsando en los botones con flechas, donde pone Show. Vemos que aparece un número que corresponde con el orden de cada subimagen. Tenemos que destacar que la primera empieza por 0, esto es importante a tener en cuenta cuando desarrollemos. Un sprite de 10 imágenes irá desde la subimagen 0 a la 9.

Una vez tengamos el sprite que nos interesa, podemos guardarlo con el botón Guardar del menú principal. Si pulsamos la tecla Ok, cerraremos la ventana con los datos que hemos dejado por defecto.

Bueno, ya sabemos que son los sprites y como se añaden a nuestro proyecto de Game Maker. En el próximo capítulo hablaremos del resto de propiedades, que son todas muy importantes y también veremos todas las opciones que nos ofrece el programa para poder editar los sprites.