¿Qué es un Tileset?

Entendemos TILESET como un conjunto de tiles o “azulejos” que unidos conforman un mapeado en un videojuego. Un tileset puede ser cualquier conjunto de objetos, normalmente centrado en una temática concreta (ya sea un bosque, un nivel acuático, el interior de un castillo). Gracias a esto dotaremos a los juegos 2D de la organicidad que necesitan.

Existen diferentes tipos de Tilesets. A continuación os enseñaré los tres más comunes y los que trabajaremos en este módulo del curso.

• Cenital
• Frontal
• Isométrico

Así a bote pronto la vista cenital de un tileset es como si viéramos el mundo desde arriba (Hotline Miami). Pero ojo, no confundamos con la vista isométrica que también es visto desde arriba pero desde un lado. La vista isométrica se suele usar en juegos de estrategia (Starcraft, Age of Empires, Diablo…). La vista frontal de un tileset es la típica de los juegos de plataformeo como Super Mario, Hollow Knight, o casi cualquier plataformas que puedas recordar.

Además de esto, podemos dividir los tiles en estáticos o animados. Ambas opciones las barajaremos en este modulo del curso. 

                                                                                                                                                                                                   Escenario de plataformas de “aamatniekss” – 32×32 píxeles

Tileset estático

No hay mucho que contar acerca de los Tilesets estáticos. Como su nombre indica son tiles que carecen de animación y en los que podemos añadir todos los detalles que queramos.

Normalmente utilizamos Tilesets con tamaños estándar como el de los personajes. Esto se refiere a una resolución de 16×16, 32×32 y en rara ocasión 64×64 píxeles. El tamaño del  tileset dependerá de la complejidad o detalle del juego que estés creando solo o con tu equipo. Hay Tilesets muy sencillos donde con 6 tipos de tiles pueden hacer un nivel entero, o Tilesets donde hay infinidad de detalles. Desde tiles para escaleras, paredes, suelos con diferentes detalles… 

Cuantos más tiles hagas para tu tileset más posibilidad hay que parezca algo orgánico que algo creado a base de “azulejos”.

En juegos como Sonic Manía, donde utilizan un tileset para generar los niveles, es bastante probable que no te des cuenta de que todo está hecho por tiles ya que hay infinidad de ellos:

                                                                                                                                                                                              Tileset ripeado por Alex13art del nivel Green Hill en Sonic Manía

Fíjate en la cantidad de tiles que hay distintos para solo UN NIVEL de Sonic Manía. Existen diferentes tipos de rampas, con diferentes grados de desnivel, loops, arcos… pero todo está planteado para conseguir que el personaje coja velocidad.

No te preocupes por que puedan parecer muchos, obviamente no hay porque hacerlos todos de uno en uno. Realmente todo ese tileset parte de un tile en concreto que sirve para hacer el “tramado” de cuadros más claros y oscuros, y luego se le aplica la forma que quiera el level designer que es el encargado de montar el nivel a través del tileset que haga el grafista. 

¿Cómo hago un tileset y por donde empiezo?

A veces esta pregunta tiene fácil solución. Piensa en el juego que estás creando, en qué tipo de escenario vas a trabajar y documéntate. Es súper importante la documentación siempre que vayas a proceder a crear algo gráfico.

Debes tener en cuenta siempre que hagas un tileset es que no puedes dibujar a lo loco sin tener en consideración varias directrices:

1. Paleta de colores: No puedes inventarte colores que no hayan sido designados en un GDD o estudio previo del producto.
2. El tamaño: Sí importa. Antes de empezar con el tileset debes saber en qué tamaños te vas a mover.
3. Cumple los requisitos del escenario: A estas alturas deberías saber que un escenario no es lo mismo que un nivel. Pero por si no lo sabes, te dejo un asterisco*.
4. Es tileable: Vale que esto parece una redundancia pero si tu “azulejo” no encaja con otros azulejos, tu tileset vas a tener que tirarlo a la basura o dedicarle horas a rehacer. Así que antes de que eso ocurra, haz que todas las piezas encajen entre ellas.

Empezar por crear un boceto de todos los tiles que necesitarás en tu juego te ayudará a no repetir tiles y a manejar la cantidad de sprites correcta. Además tener algo ya abocetado ¡Ayudará a tu level designer a maquetar el nivel!

Un escenario es el entorno donde transcurre el nivel. Para poder crear un nivel necesitamos haber creado previamente un escenario. Por ejemplo en Sonic Manía, El primer nivel de Greenhill Zone, el escenario sería la selva con las decoraciones pertinentes y el nivel sería donde transcurre el acto. Las siguientes imágenes te ayudarán a entenderlo. La primera imagen es un Concept Art oficial de Sonic Forces para Green Hill. Simplemente vemos las tonalidades que usan, las palmeras, plantas y los terrenos. Es un concepto de lo que debe tener y debe ser el nivel en cuanto a colores y cromías.

En cambio en la siguiente imagen veremos como los diseñadores han aplicado esas cosas al estilo del juego final. Así que “Escenario” se refiere al concept y al entorno visual y el “nivel” se refiere a materializar ese concept en algo jugable:

Tilesets animados

Partiremos de la base de que ya sabemos mínimamente hacer un tileset, los parámetros que tenemos que seguir y demás, pero… ¿Y si hay partes del tileset que estoy haciendo que quiero que tengan movimiento?

Primeramente tendrás que saber si ese movimiento lo puedes hacer tú con sprites o es más rentable hacerlo desde el motor en el que trabajes tú junto a tu equipo. No es lo mismo hacer una animación de una antorcha colgada en la pared, que hacerla directamente con un gestor de partículas dentro de Unity. El tiempo y la inversión del mismo es muy variable.

Pero en el caso de que quieras hacer un tileset animado, deberás plantear cuales son las partes movibles de ese y separarlas del tileset estático original. Personalmente recomiendo también que dejes el tile estático original en el tileset estático por lo que pueda pasar. 

Hay dos formas más estandarizadas para hacer esto, yo te voy a explicar las dos para que puedas elegir tu mismo cual se adecua a tu forma de trabajo.

Workflow 01

En el video de apoyo tendrás una metodología clara para abarcar este tema y como dejarlo preparado para insertar en el engine correspondiente. Pero de todas formas te dejo el workflow aquí para que puedas seguirlo:

1. Diseñaremos un tileset estático original.
2. Analizaremos el tileset en busca de los tiles que se puedan o queramos animar.
3. Duplicaremos el TILE en cuestión en un lienzo nuevo del tamaño de ese tile.
4. Lo animaremos como si fuera un sprite animado más.
5. A la hora de exportarlo lo haremos como si fuera una hoja de spritesheet para mayor comodidad.

Workflow 02

Utilizaremos un tileset de mayor tamaño para añadir todas las animaciones ordenadas dentro del mismo. Cada tile será un “fotograma” más de la animación. Con lo cual en vez de utilizar un archivo por separado por cada tile animado, utilizaremos solo un tileset pero de gran tamaño. Personalmente esta técnica me parece peor, puesto que si hay muchas cosas animadas o es un tileset grande es posible que te pierdas dentro de un tiempo si tienes que editar cualquier cosa. Pero como digo, ¡Tú decides!

Tiros de cámara

En los videojuegos, igual que sucede en el cine y en la animación se utilizan los tiros de cámara para recoger sensaciones del espectador, en este caso el jugador. Si bien es cierto que nosotros estamos trabajando en un entorno 2D con un estilo pixelart, en los juegos pixelados también existe el tiro de cámara. Como ya dije al principio de este módulo, los más comunes son tres:

1. Cenital
2. Frontal
3. Isométrico

Vista cenital

Los juegos con vista cenital se centran sobretodo en la exploración del entorno. O al menos tal como lo concibo yo. Una vista cenital nos ayudará a tener más rango de visión, y de preparación en el caso de que el juego implique cualquier tipo de estrategia. Ya sea dentro de una mazmorra, como en un juego tipo supervivencia, mantener tu granja, etc… 

Esta vista se caracteriza porque es prácticamente (o en su totalidad) una vista desde arriba. Puede tener algún ángulo para que no sea tan picada la cámara, pero normalmente se ve desde lo más arriba posible. Pongamos algunos ejemplos:

                                                                                                                                                                                                                                           Hotline Miami / Stardew Valley

                                                                                                                                                                                                                                     The binding of Isaac / Bomberman 

He elegido estas cuatro imágenes ya que representan muy bien lo que hemos comentado. La vista cenital te ayuda a ver desde gran distancia todo lo que sucede alrededor de tu personaje. En Hotline Miami podemos ver las habitaciones colindantes a la que estamos. En Stardew Valley podemos, de un vistazo, gestionar nuestra granja y saber cual va a ser nuestro siguiente paso. En TBOI la vista cenital nos ayuda a saber donde están los enemigos y como enfrentarnos a ellos. Mientras que en Bomberman podremos emplear el rango de la pantalla para crear una estrategia de combate frente a nuestros oponentes. Además, si nos fijamos. En este tipo de cámara,  ningún elemento se antepone a otro. Podemos ver todo el mapeado y sus detalles en su totalidad sin que nos interfieran otras cosas ya que todo está al mismo nivel. Cosa que no sucede en los tiros de cámara Isométricas que revisaremos un poco más adelante.

Vista frontal

La vista frontal es utilizada mayoritariamente en juegos de acción. Plataformas, Shoot em up, Beat em up, classic arcades… Esta vista, cumple otra serie de cometidos. Nos interesa saber exclusivamente lo que hay en nuestra pantalla, y lo que haya por delante todavía no es nuestro problema. En los juegos de plataformas por lo general centraremos la acción en lo que sucede en la pantalla. Los enemigos que nos ataquen (o puzles)  y como solventar los problemas del momento.  Veámoslo en unos ejemplos:

                                                                                                                                                                                                                                     Super Contra / Golden Axe 2

                                                                                                                                                                                                                                         Super Hydoriah / The Lost Vikings

Estos cuatro ejemplos que he elegido tienen una misión clara. Hacerte participe de los peligros que suceden en pantalla y centrando tu atención en lo que tienes delante. En Super Contra la acción es rápida y tienes que aprenderte muy bien todo lo que sucede durante el nivel para poder avanzar satisfactoriamente. Golden Axe va avanzando a tramos para enseñarte solo los enemigos que tienes en ese momento, y no puedes avanzar hasta que hayas derrotado a todos. Super Hydoriah por contrapunto te hace avanzar sin detenerte soltándote oleadas de enemigos que tienes que ir abatiendo, y la mecánica principal reside en que no sabes lo que te viene por delante, con lo que el juego juega (valga la redundancia) con tu tiempo de reacción y agilidad. En The Lost Vikings resolveremos puzles con tres vikingos cada uno con una habilidad distinta, y los puzles los podremos ver una vez que hayamos descubierto ciertas zonas del área en el que estamos. Implementando así la mecánica de investigación y descubrimiento del mapeado.

vista isométrica

La vista isométrica la podemos encontrar generalmente en juegos tipo estrategia, CRPG (Computer Role Playing Games) táctico por turnos, etc. Pero no nos dejemos engañar. Hay juegos de aventura gráfica incluso que utilizan esta vista. Lo más destacable de este tiro de cámara es la amplitud de mapeado que podemos abarcar y la posibilidad aún mayor de “encasillar” las cosas en pequeñas parcelas. No obstante en contraposición tenemos que discutir que en lo que apartado gráfico y estético se refiere, según la isometría que utilicemos se puede perder detalles de la escena. Veamos algunos ejemplos:

                                                                                                                                                                                                                                       Final Fantasy Tactics Advance / Fallout 2

                                                                                                                                                                                                                                     La abadía del crimen / Age of Empires II

Final Fantasy Tactics Advance es un juego TRPG, en el que obviamente por su título deducimos que es un juego de corte táctico. Lo que nos facilita la tarea de jugar son sus escenarios a modo de tablero, dándole así al juego una sensación de tablero muy acorde con lo que necesita. Por otra parte tenemos Fallout 2 que nos invita a jugar en un mapa amplio para poder ver que sucede en otras casas, descubrir secretos e ir ampliando el mapa. Tiene pinceladas de estrategia y sobretodo el componente de Rol. La abadía del crimen cuenta una historia y una serie de puzles que resolver. Es un juego narrativo con puzzle. Y finalmente Age of empires es un juego de gestión de ciudad donde los recursos son los que ayudarán a evolucionar a tu civilización. Por ello la vista isométrica juega un gran papel, ya que te ayuda a gestionar todos los espacios de tu tablero imaginario para averiguar donde es mejor poner las edificaciones dentro del mapeado.

Bien, con todo lo que hemos aprendido en este módulo, a partir de este punto estás más que preparado para los ejercicios que se acercan. Adelante!