El editor de sprites de Game Maker Studio 2

El editor de sprites es donde se establecen las propiedades generales para cualquier recurso de tipo sprite que realices o importes. Empezamos creando uno nuevo: lo podemos hacer haciendo click derecho en la carpeta correspondiente del árbol de recursos, eligiendo Create del menú que aparece. Si lo que queremos es abrir el editor de un sprite existente, podemos hacerlo haciendo doble click en el árbol o con el botón derecho encima de él, eligiendo Properties – Propiedades. Nos aparecerá una ventana como ésta:

Vamos a ver cada una de las partes que vemos en la imagen.

Sprite name – nombre del sprite

Aquí le damos un nombre. El nombre del sprite es lo que va a ser utilizado a través de todo proyecto del juego para identificar el sprite como un recurso y sólo puede ser alfanumérico, y sólo podrás utilizar el guión bajo _ como símbolo. Si bien puedes utilizar números en el nombre de los sprites, el nombre no puede comenzar con un número, ya que se convierte en un nombre de recurso no válido cuando se utiliza GML o DnD.

Image – imagen

En esta sección se puede ajustar el tamaño de la imagen pulsando el botón Ajustar sprite . Esto abrirá la siguiente ventana:

En la parte superior de la ventana podemos ver una vista previa antes, dónde pone Current y después, dónde pone Preview, de las transformaciones elegidas. Debajo podemos elegir cambiar estas opciones:

• Scale Image – escalar imagen: cambia el tamaño del Canvas ( o lienzo) de la imagen, las imçagenes se estiran y también se escalan para ajustarse al nuevo tamaño. El check Maintain Aspect Ratio permite mantener el ratio de la imagen, así que modificando uno de los valores de Width o Height cambiará el otro valor proporcionalmente. También puedes escalar en píxeles o porcentaje. Dependiendo del tipo de imagen que estamos tratando, es posible que nos interese habilitar la interpolación lineal o no. Esta opción suavizará los píxeles en el área, así que lo habitual es omitirla, sobretodo cuando estamos haciendo pixel art.
• Resize Canvas – cambiar lienzo: esta opción cambiar el tamaño del liezo del dibujo al nuevo tamaño, pero sin escalar el contenido del dibujo. Puedes ajustar el punto de anclaje de la imagen para el redimensionado, con las flechas direccionales y, a continuación, ajustar el valor del tamaño. Existe la misma opción para mantener el aspect ratio, con un check, y, en la parte inferior, puedes elegir el redimensionamiento en píxeles o porcentaje.

Cuando estás contento con el nuevo tamaño, puedes darle al botón Apply, para cerrar esta ventana y aplicar los cambios. Esta opción para cambiar la imagen solo está disponible para los ficheros que son tipo imagen, y no para ficheros .SWF o de Spine.

En esta sección también tenemos el botón Edit image, que abrirá el editor de imágenes de Game Maker Studio 2 para dibujar el sprite desde cero. También tienes el botón Import para importar un sprite creado previamente, ya sea como varias imágenes (extensiones .PNG, .JPG, .GIF, etc, sería el mismo sprite pero con varios frames o subimágenes. También puedes importar los ficheros .SWF y Spine que hemos comentado antes.

Texture Settings – configuración de la textura

Cuando compilamos nuestro juego, todos los sprites se guardan en varias páginas de texturas. Una página de textura agrupa uno o varios sprites para optimizar la carga de recursos cuando se está ejecutando nuestro juego (todo esto de forma automática). Lo único que nos tenemos que preocupar nosotros es definir una configuración para esa textura, ya que es importante para optimizar en dispositivos móbiles o cuando exportamos un juego para nuestro navegador web.

Las casillas Tile Horizontally y Tile Vertically no están marcados por defecto, pero puede interesarnos que el sprite se guarde como un tile dentro de la página, por ejemplo, si está relacionado con el fondo de la room.

Si tu sprite quieres que se utilice como un mapa de texturas, recordemos que con el nuevo editor de imágenes ya no sería tan necesario utilizar un programa externo para dibujar, podemos marcar la casilla Separate Texture Page. Cada subimagen tendrá su propia página de texturas, así que cuidado a la hora de generar este tipo de ficheros.

Por último, tenemos la opción más importante, hay un combo para definir en cual grupo de texturas estará el sprite. Por defecto tenemos una textura llamada Default, y todos los sprites irían a un sólo grupo (que puede generar varias páginas si lo necesita, depende del número de recursos y el tamaño de cada página). Podemos agrupar los sprites en estos grupos definiendo cualquier criterio que creamos conveniente. Por ejemplo, si tenemos claro que una serie de enemigos, fondos, etc. solo aparecen en un nivel o determinados niveles, ponerlos en el mismo grupo. Así, cuando cargue estas imágenes, no será necesario cargar sprites que sabemos que no vamos a usar y mejoraremos el rendimiento al reducir el intercambio de páginas dentro de la misma room.

Collision Mask – máscara de colisión

Todos los sprites tienen una máscara de colisión, que es la zona del sprite que se utilizará para detectar colisiones cuando el sprite se asocie a un objeto ( y esta instancia choque con otra en la room). La máscara de colisión no tiene que ser toda la imagen, así que podemos elegir varias opciones dentro de esta zona. Para empezar, tenemos un combo que indica el modo de la máscara, dónde podemos elegir:

• Automatic – automático: GMS2 calculará automáticamente la máscara de colisión, en función de la opacidad del sprite.
• Full Image – imagen completa: la máscara se calculará con los límites del sprite.
• Manual: Nosotros le indicaremos los valores de la máscara, definiendo valores para el lado izquierdo, derecho, arriba y abajo.

Aparte del modo de la máscara de colisión, también tenemos varios tipos de máscara que puedes elegir en el segundo combo:

• Rectangle – rectángulo: una simple máscara de colisión rectangular. Es la opción más rápida para resolver cuando se utiliza en el proyecto.
• Ellipse – elipse: crea una máscara de colisión elíptica. Es más lenta de resolver.
• Diamond – diamante: una máscara de colisión con forma de diamante. También es bastante lenta de resolver, ya que genera más proceso de CPU.
• Precise – precisa: crea una máscara de colisión basada en el contorno del sprite, y si tiene varias subimágenes, el contorno será el de la combinación de todas.
• Precise per Frame – precisa por frame: lo mismo que el anterior, pero diferenciará cada máscara por cada frame/subimagen. La máscara cambiará y se ajustará al contorno de la imagen. No hace falta decir que esta es la opción más lenta de todas, así que tienes que evitar esta opción a no ser que el caso sea muy específico.

Para ver un ejemplo de todas estas opciones, miramos la siguiente imagen:

Podemos ver todas las opciones, pero debemos considerar: ¿es la máscara precisa la mejor? Sí, porque es la que mejor se ajusta a la imagen. ¿Es necesaria? Para un botón, creo que con la máscara rectangular es suficiente. Pero cuando estamos comprobando dos instancias que chocan entre sí, en el caso del botón es necesaria la máscara para interactuar con el ratón, es importante tener claro que máscara tiene cada instancia para saber si se ejecuta el evento de colisión o no.

Origin / zoom – origen / zoom

En la parte superior del sprite podemos encontrar las propiedades del origen del sprite y del zoom de la vista previa. Los datos que muestra son la posición del origen para poder editarla, que es posición inicial cuando está en la room (cuando creamos una instancia y le decimos su X/Y). Por defecto, los valores son 0/0, que corresponden con la esquina superior izquierda, pero a menudo nos interesa colocarlo en el centro del sprite o en otra posición (yo suelo utilizar la base del sprite para juegos en plataforma).

En el desplegable podemos encontrar algunos valores más utilizados, pero también podemos usar una opción personalizada escribiendo en los número o haciendo click en la vista previa (y moviendo la cruz que aparece). También podemos establecer un origen fuera del sprite, con valores negativos o superiores a su tamaño. Un ejemplo de este uso es tener varios sprites para pintar un personaje (cabeza, brazos, piernas, complementos, etc), teniendo todos estos sprites el mismo origen de referencia.

En la parte superior derecha tenemos los controles de zoom, dónde podemos ampliar o reducir la vista previa como creamos conveniente. Si haces click en el botón  ajustas en zoom a tamaño real 1:1, así lo vemos en píxeles reales.

Preview – vista previa

La sección de vista previa del sprite muestar el sprite tal y como lo veremos en el juego, y se puede ampliar o reducir utilizando la rueda del ratón (o con los botones que hemos comentado antes). Puedes usar los controles de Frame que explicamos ahora para cambiar la forma en que se ve la imagen en la vista previa.

Frames – subimágenes

De siempre en Game Maker se ha dicho que un sprite contiene subimágenes, y ahora han cambiado el nombre a frames. Es lógico usar este término al ser imágenes animadas, pero tenemos que tener claro de separar los frames por segundo (fps) que puede pintar una room que de su velocidad o step que tiene. Aquí podemos ver cada frame que compone el sprite. Podemos mover uno de los frames arrastrándolo a izquierda o derecha, de esta manera cambiará la animación. Si hacemos doble click en cualquier frame abrirá el editor de imágenes para poder cambiar esa imagen. En una subimagen seleccionada aparecerá un icono de eliminar en la parte superior si queremos hacerlo. Para seleccionar varios frames, podemos hacer <Ctrl> + click izquierdo, dónde podemos eliminarlos todos con el mismo icono.

Frame Controls – controles de frame

Los controles de Frame son para reproducir en la ventana dela vista previa la animación de los frames. Con el botón de Play podemos iniciar o pausar la reproducción, y con el botón de loop  podemos decidir si la animación se repite al llegar al último frame o no (es un botón de activación/desactivación). Cuando aparece este icono , la animación retrocede al llegar al final (por eso se llama pingpong). Podemos ajustar la velocidad con el cuadro de texto de Speed, esta velocidad viene marcada por el desplegable Frame per second o Frame per game frame (ya hemos dicho que es diferente esa velocidad, así que de esta manera podemos asegurarnos que es la correcta). El número total de frames se muestra a la derecha jutno al frame actual. Si seleccionas varios frames también se indicará aquí.

Resumen final

Hemos visto todas las partes del editor de sprites de Game Maker Studio 2. Podemos modificar cosas como la máscara de colisión, el origen del sprite, tamaño y otras opciones interesantes. En el próximo post hablaremos del Editor de imágenes, uno de los platos fuertes de Game Maker Studio 2. ¡Nos vemos!