El Editor de tiles de Game Maker Studio 2

Un conjunto de tiles, un tile set, es un recurso gráfico para dibujar niveles y otros elementos estáticos de tu juego. Normalmente es una única imagen, que se divide en diferentes celdas, y se colocan en el editor de rooms para crear una imagen completa (como si fuera un puzzle). Mostremos las partes del editor de tilesets para  ver un ejemplo.

Estas son las formas más comunes, también puede haber un espacio entre cada celda o tile, pero no te preocupes, Game Maker Studio 2 los maneja perfectamente. Todos los tiles deben ajustarse en una cuadrícula completa, es decir, no puede haber celdas de un tamaño y de otro, no tienen que ser cuadrados, sino también rectangulares.

Cuando creas tus propios tiles, tienes que tener en cuenta una peculiaridad de Game Maker Studio 2: la primera celda, arriba a la izquierda, tiene que ser transparente siempre, ya que es la celda que GMS 2 identifica para borrar los tiles.

Cuando creas un recurso de tipo tileset, tienes las siguientes opciones del editor.

TileSet Name – nombre

Le damos un nombre al recurso. Recuerda que los nombres sólo pueden ser alfanuméricos, usar el símbolo _ y no empezar por un número.

Sprite del tileset

Aquí seleccionamos el sprite relacionado con el tileset. AL hacer click en el botón principal, abrirás el explorador de recursos para elegir el sprite que utilizaremos.

También puedes hacer click en el botón New Sprite  para crear un nuevo recurso de sprite (abrirá el editor de sprites que ya conocemos). También podemos editar el sprite con el botón Edit Sprite , o editar la propia imagen con el botón Edit Image .

De forma predeterminada, se abrirá la ventana de Propiedades del tileset, aunque si lo cierras siempre puedes reabrirla.

Properties – propiedades del tileset

La ventana de Propiedades del tileset es para mostrar el tamaño de las celdas, o tile, el desplazamiento y la separación entre celdas, establecer los valores de margen (dónde empieza los tiles dentro de la imagen). Hay que jugar con estos valores para configurar correctamente los tiles para después pintarlos correctamente.

Editors – editores

Cada uno de los botones de esta sección abrirá un editor diferente para una función específica del tileset. Aunque los detallaremos al final del artículo, un resumen de estos tres editores sería:

• Crear pinceles de tilesets basados en varias celdas o baldosas.
• Crear tiles o azulejos animados, utilizando cada tile como un frame diferente.
• Crear tiles automáticos que se unirán en función de los tiles que le rodean.

Preview Toolbox – caja de herramientas de la vista previa

En la vista previa del tileset, tenemos una serie de botones que nos permite usar el zoom, para alejar o acerca la previsualización, o para activar/desactivar la grid o rejilla. También se puede cambiar el color de la grid usando el botón . Esta grid que vemos es la que hemos configurado en las propiedades, respetando todos los márgenes, tamaños, etc.

Preview – vista previa

En la vista previa podemos ver como queda el tileset. Además de lo que hemos comentado justo antes del zoom y la grid, también podemos desplazarnos si pulsamos el botón central del ratón.

Los editores de tilesets de Game Maker Studio 2

Una vez hemos configurado las principales propiedades de un conjunto de mosaicos, podemos agregar más información gracias a estos editores personalizados. Cada editor hará una función diferente, pero todos se basan en la misma imagen de tileset que tenemos en el preview. Veamos estos editores en detalle.

Brush Builder – creador de pincel

La traducción es un poco rara, la verdad… Por defecto, cuando pintamos los tiles en el editor de rooms, elegimos una celda y la vamos pintando en la room con esa única celda. Sin embargo, los tilesets están pensados  para tener secciones que caben juntas de diversas maneras para formar secciones enteras. Por ejemplo, un conjunto de tiles de un juego RPG puede tener mosaicos que sean parte de un paisaje, que se conectan para hacer escenarios mucho más grandes, o más pequeños, dependiendo del número de tiles que se usan.

Colocar estos tiles en la capa correspondiente de la room, si estamos hablando de seleccionar un tile, pintarlo, cambiar de tile, volver a pintar, etc, seguro que penaliza en tu trabajo hacerlo de esta manera (que es la manera que se ha hecho siempre). Para resolver esto, Game Maker Studio 2 ha añadido los pinceles de tiles en el editor, disponible con el botón Brush Builder.

Tal y como vemos en la imagen, en el editor para crear pinceles mediante tiles, tenemos la imagen original en la parte de la izquierda, y un lienzo vacío en la parte derecha. Puedes seleccionar cualquier mosaico de la izquierda y pintarlo en la derecha para ir creando el pincel. Mostramos un ejemplo de 3 pinceles personalizados que se han creado:

Cada pincel diferente tiene un recuadro naranja que lo rodea. Vemos que la separación entre pinceles es de un tile entre ellos, porque cualquier tile que entre en contacto con el grupo será tratado como el mismo pincel en el editor de rooms (esto es muy importante si no queremos cometer errores).

Mientras creamos el pincel, podemos pintar los tiles con el botón izquierdo del ratón, y con el botón derecho podemos borrarlos. También podemos usar zoom con la tecla <Ctrl>+la rueda del ratón, y desplazarse en el lienzo con <Espacio>+click izquierdo  y moviéndolo. También tenemos los botones correspondientes para ampliar o reducir su tamaño, como hemos visto en otros editores.

En la parte superior derecha podemos ver la herramienta seleccionada, y también podemos elegir el tamaño del pincel que queremos pintar. El tamaño predeterminado es 1, un solo mosaico o tile, pero si ampliamos ese tamaño nos sirve para pintar más celdas y borrar lo que ya tenemos pintado.

En la caja de herramientas podemos elegir la herramienta a utilizar para cada tarea diferente en el editor, algunas están relacionadas con la pestaña de estilo específico, como las Macros o los tiles animados. Vamos a repasar estas herramientas brevemente, que serán las mismas que veremos cuando estemoa en la capa de tiles en el editor de rooms (al fin y al cabo, estamos haciendo lo mismo en etornos diferentes, que es dibujar tiles, ya sea como pincel o como fondo en la room).

•  Lápiz: es la herramienta predeterminada, para pintar el tile con el botón izquierdo y borrarlo con el botón derecho.
•  Goma: para borrar un tile con el botón izquierdo del ratón.
•  Selección: podemos definir un área de la capa de tiles para trabajar. Hacemos click sobre el área a trabajar, arrastramos para hacer una selección rectangular, y podemos usar la tecla <Ctrl> + click izquierdo para añadir selecciones múltiples. Para borrar la selección, pulsamos la tecla <Esc>. Cuando hemos seleccionado un área, las otras herramientas (lápiz, goma, etc), sólo funcionarán dentro de esa área. También podemos cortar o copiar, usando las teclas <Ctrl>+<X> o <Ctrl>+<C> respectivamente, para poder pegarlos en el editor de pinceles del tile.
•  Tile automático: cuando está marcada esta opción, podemos pintar los tiles en modo automático. Si seleccionamos cualquier tile que vemos en la previsualización, pintará correctamente los tiles, dibujando los tiles de alrededor correctamente, que hemos configurado en el editor de autotiles.
•  Voltear: volteará el tile con el eje horizontal.
•  Espejo: reflejará el tile en el eje vertical.
•  Rotación: haciendo click izquierdo sobre el tile que queremos, lo giraremos 90 grados en el sentido de las agujas del reloj, con el botón derecho girará en sentido antihorario.

Debajo de estas herramientas, encontramos dos secciones diferentes de librerías para seleccionar cualquier autotile o tiles animados que se han creado con el tile que estamos trabajando. Un solo sprite de tiles puede usarse para multitud de pinceles o sprites animados, y aquí podemos ver todos los usados.

Una vez hemos configurado los pinceles usados, podemos utilizarlos para pintar en cualquier capa de tiles en el editor de rooms.

Animation – animación

Los tiles se consideran normalmente imágenes fijas dentro de una room, ya sea una única imagen o diferentes que se han puesto para formar un dibujo. Sin embargo, en Game Maker Studio 2 podemos animar los tiles, tal y como se haría con un sprite. ¿Y por qué no usar simplemente un sprite? Bueno, los sprites se utilizan para los objetos, y aunque se pudieran usar sin asociarlos a ellos, tienen una característica propia que son las máscaras, así que su proceso es algo superior que simplemente un tile animado.

La pega es que para la animación de tiles debe ser con un número de frames de una potencia de 2 (2, 4, 8, 16, 32 frames, etc…) y deben de crearse, obviamente, dentro del mismo recurso de tileset. Además, todos deben animarse a la misma velocidad. Aunque parece que hay bastantes limitaciones, usar tiles animados es un recurso muy potente que debe ser considerado para mejorar la ambientación de nuestros juegos.

Para crear una animación de tiles, primero debemos tener un tileset, con todos los tiles requeridos para la animación dentro de la imagen (no como frames de un sprite). Luego abrimos el editor de animaciones de tileset, dónde veremos una ventana como ésta

En el ejemplo, vemos que en la imagen única tenemos todos los frames de animación, pero también tiene otros tiles que corresponden a otras cosas del juego, ya sean animados o no. Para crear la animación, primero hay que añadirla a la biblioteca de animaciones, haciendo click en el botón + Add Animation. Añadirá un registro en la biblioteca y pedirá el número de frames que contiene

A continuación, verás una vista con los frames vacíos que hemos seleccionados, con el frame inicial resaltado

Si regresamos al conjunto de tiles del editor, puedes hacer click a cualquier tile de la imagen para ir añadiendo a la animación, veremos que el frame seleccionado irá cambiando en cada click, y cuando hayamos añadido todos los frames podemos previsualizar la animación con el botón Play  que hay al lado.

Una vez terminada la animación, vemos que pertenece a la biblioteca y, al entrar en el editor de rooms, podremos seleccionarlo y colocarlo en la room. Ten en cuenta que al seleccionar cualquier tile del recurso y añadirlo a la room, estamos añadiendo la animación a partir del frame seleccionado. Esto puede interesarnos en algunos aspectos, pero debemos tener en cuenta que puede desincronizarse esa animación cuando colocamos varias, aunque tenga el mismo número de frames (no es lo mismo empezar con el frame 1 que con el frame 4).

Auto tile – tile automático

Y ahora hablaremos como una de las mejoras más importantes y que la comunidad siempre había comentado como algo muy necesario en Game Maker. Cuando tenemos un tile de algún escenario, pintar los tiles individualmente es muy pesado. Siempre se pedía algo para que la creación de fondos de nuestros juegos fuera mucho más rápido, y creo que con la opción de autotile en Game Maker Studio 2 lo han conseguido.

Esencialmente hay que crear una biblioteca de autotile, y luego, cuando añades un tile a la room, éste se conectará para pintar los tiles que están alrededor, para dibujar un muro o una plataforma.  Sin embargo, antes de nada hay que configurar correctamente el tileset y elegir un tipo apropiado de autotile. Hay dos tipo sde autotiles, que podemos elegir como si fuese una plantilla: un autotile de 47 celdas y uno de 16 tiles. La plantilla de 16 tiles se usa normalmente para dibujar de arriba hacia abajo, normalmente en un juego de plataformas, pero dependerá siempre de como luce tu proyecto final y no hay que seguirlo como una norma.

Veamos un par de ejemplos. La siguiente imagen es un ejemplo de un tileset de 47 celdas o tiles, preparada para autotile. También vemos el de 16 azulejos.

Quizás las imágenes no nos dicen mucho de cómo funciona, pero luego veremos como es. Abrimos el editor de Auto Tiling, con el botón correspondiente. Con el editor se verá así:

En este ejemplo tenemos que un solo sprite lo usamos para el autotile, pero recuerda que puede haber otros tiles en el mismo fichero, o diferentes sprites para diferentes autotiles. Ahora podemos darle al botón + de la plantilla de 47 tiles, para crear un nuevo registro en la biblioteca de 47 baldosas, abriendo una ventana con la plantilla en cuestión.

Como vemos en la plantilla, el área que es de color gris claro corresponde al borde exterior del til, es decir, si fuera un tile de muro el gris claro sería el muro. El gris oscuro sería el relleno del tile, por ejemplo, el suelo. Al igual que con la animación de tiles, para añadir cada tile a la plantilla se hace haciendo click directamente a cada uno de ellos.

Si nos equivocamos, recuerda que la primera cela corresponde a un tile vacío, que siempre hay que dejar, así que para borrar un tile erróneo podemos elegir la celda vacía para eliminarlo. Una vez hemos añadido todos los tiles, podemos comprobar los tiles agregados con la plantilla con el botón Show Template . Con esto superpones la plantilla con el autotile final.

Si quieres hacer un auto tile de tamaño 16, el proceso es exactamente el mismo, usando la plantilla correcta.

Ya tenemos un par de autotiles en la biblioteca, pillada del sprite de tilesets correspondiente. Ahora podemos suarlo en el editor de rooms, creando una capa de tilemap, ya llegaremos a eso en otro artículo, y seleccionando uno de los autotiles de la biblioteca. Ahora a pintar la habitación arrastrando haciendo click con el ratón del mouse, y vemos que pondrá los tiles correctamente

Un último apunte del autotile, los bordes de alrededor pueden ser abiertos o cerrados, y eso dependerá del botón Open or Closed Edges . Por defecto, cuando colocamos un tile en el borde de la habitación o room, colocará el tile correspondiente como si ese borde estuviera, por ejemplo, al pintar el interior de un edificio. Si activamos este botón, los tiles del límite de la room estarán abiertos, igual que si estamos pintando un escenario abierto en el exterior (sin bordes).

Resumen final

Hemos visto con todo detalle cómo funcionan los tilesets en Game Maker Studio 2, y en el próximo post hablaremos del editor de sonidos. Como resumen de los tiles, sabemos ahora el motivo de porqué se tratan como un recurso aparte, aunque sea un sprite, ya que tiene características especiales: son dibujos de fondo, pueden tener animaciones y nos facilitan a la hora de dibujar con los pinceles y el autotiling. Crear escenarios y rooms en nuestros juegos, como puede ser un RPG, ahora es más fácil que nunca. ¿Que opinas de todo este planteamiento nuevo? ¡A los comentarios!