El conjunto de elecciones en un videojuego también incluye la construcción del escenario, un elemento esencial para dar vida a un universo de personajes y ofrecer una experiencia completa a los jugadores.
En el desarrollo de juegos en 2D, especialmente los basados en el pixel art, se utiliza la técnica del tileset y del tilemap. Ambos ayudan a construir escenarios mediante un proceso sencillo, ágil y capaz de hacerle la vida más fácil a miles de game designers.
¿Qué es un tileset?
Un tileset o set de teselas es un conjunto de texturas reunidas en una misma imagen, una composición. Estas texturas forman las piezas gráficas que componen el escenario de un videojuego: suelos, paredes, escaleras, techos, etc.
Para crear este conjunto, utilizamos una cuadrícula compuesta por cuadrados del mismo tamaño. En este caso, 16x16px. Cada cuadrado de esta cuadrícula se llama tile o tesela, la parte más pequeña de la composición.
Esta colección de piezas (o texturas) debe organizarse de manera que se puedan distinguir objetos como una pared, un toldo, varias puertas, una parte de suelo y un par de colores lisos, por ejemplo. A partir de estos elementos se creará un escenario.
El tileset es muy importante para el desarrollo de un juego, porque es el archivo que servirá de referencia durante todo el proceso y ayudará a reducir el tiempo de desarrollo mediante la creación modular de los escenarios.
¿Qué es el tilemap?
El tilemap o mapa de teselas es el escenario, un mapa de cómo deben organizarse las teselas. Los llamamos mapas (y no escenarios) porque en el universo de los juegos es mucho más común utilizar la expresión “mapa”.
Para crear un tilemap nos venimos a la pestaña de Jerarquía y pulsamos el botón derecho seleccionamos 2D Object> Tilemap. Se nos añadirá un objeto llamado Grid que contiene el Tilemap para que ahora podamos construir en él nuestro mapa o escenario.
Unity tiene una manera para organizar que elementos queremos que vayan delante y cuales detrás y ese metodo es con la opción Sorting Layer que aparece dentro de las opciones de nuestro Tilemap desde la pestaña Inspector.
Deberemos añadir varias sortings layers que definirán las diferentes capas donde irán nuestros elementos.
Creamos dos Sorting layers uno llamado Background y otro Foreground. Pulsando en el botón + crearemos esos dos elementos y los colocaremos tal y como aparecen en las siguientes imágenes
El background será todo lo que tenga el personaje detrás de él y por lo tanto fondo de nuestro videojuego.
El default es por donde se moverá nuestro personaje y choque con algunos objetos.
El Foreground serán todos aquellos elementos que se encuentran por delante de nuestro personaje.
A continuación vamos a crear una serie de tilemaps que nos permitirán configurar nuestro mundo, cada uno de ellos tiene una función. Nos venimos a la pestaña de Jerarquía y creamos estos cinco tilemaps
Importante para crear dichos tilemaps deberemos seleccionar el objeto padre llamado Grid y desde ahí pulsamos el botón derecho de nuestro ratón y buscamos la opción Object 2D > Tilemap
El primero tilemap, Ground, su función es la de ser el suelo en si de nuestro juego, la tierra y por lo tanto pertenece al sorting layer de Background y su orden de layer o capa es la 0 ya que va a ser lo que más al fondo esté el resto de objetos se irán pintando encima de este tilemap. Seleccionamos Ground desde la ventana de Jerarquía y en la pestaña del Inspector cambiamos los parámetros de su sorting layer junto con la opción orden layer que la dejamos a 0 tal y como aparece en la imágen:
El segundo tilemap, GroundDecoration, su función es también la que tiene el Ground pero va a estar por delante del Ground.
Sigue siendo suelo pero va a tener objetos encima del suelo anterior. Pasaremos siempre por encima de ellos pero se usa por ejemplo si tenemos un tilemap con transparencia. Porque si lo pintas en el mismo tilemap anterior, Ground, nos deja el hueco de la transparencia en el suelo, mientrás que si lo pintamos en un tilemap encima va a respetar la transparencia y el tilemap que tiene por debajo y se va a ver como una decoración más. Por lo que en la ventana del inspector deberemos elegir que su sorting layer sea Background y que su orden de layer esté en 1
El tercer tilemap, Walkable, es donde nuestro personaje andará y donde van a estar los objetos con los cuales vamos a interactuar. Su sorting layer es Default y su orden de layer 0. Además deberemos cambiar el modo que viene por defecto de los tilemaps, Chunk, y cambiarlo a Individual. Ya que si no no podriamos hacer que nuestro personaje pudiera interactuar con los objetos que se pintaran en este tilemap.
El cuarto tilemap, Foreground, es todo aquello que queda por delante tanto del suelo como de nuestro personaje. Es decir este tilemap es el que está por encima de todos. Por ejemplo si queremos poner unas nubes o cualquier otro objeto que siempre estará muy lejos del player ahí es donde aplicaremos el tilemap de Foreground.
El quinto tilemap, Collisions, aquí añadiremos las colisiónes es decir pintará solo los colliders para que el personaje choque con ellos. La característica más importante de este tilemap es que no utilizamos su renderer es decir no va a pintar nada, no va a renderizarse nada en pantalla porque lo unico que queremos usar de este tilemap son los colliders. Los colliders son areas invisibles que hacen posible que se apliquen físicas en nuestros personajes algo así como un campo de fuerza en determinadas zonas hará que nuestro personaje se vea empujado o choque con algo. Dejaremos los parametros como el anterior tilemap, en Foreground y el orden de layer en 0
Ahora vamos a crear las paletas de tilemaps para poder pintar sobre nuestro juego. Para ello deberemos abrir el TilePalette desde la barra de herramientas superior, clicar en Window> 2D>TilePalette
Se nos abrirá una ventana flotante llamada TilePalette que colocaremos justo despues de la ventana Game
A continuación vamos a crear las paletas para poder pintar nuestro juego. Para ello nos venimos a Assets y creamos una nueva carpeta llamada Tiles
Y dentro vamos a crear tres nuevas carpetas, Ground, Interior y Walkable. Dentro de ellas vamos a meter los tiles para pintar nuestro suelo, los interiores y el suelo con el que interactúa nuestro personaje
Ahora deberemos hacer un pequeño cambio en la configuración de nuestros sprites que se encuentran en la carpeta atlas dentro de Sprites> Environment
Seleccionamos ground-atlas y walkable-atlas y nos aseguramos que el modo del sprite esté en Múltiple y que su tamaño en pixeles es el de 16. Abrimos el sprite editor y en la opción de Slice vemos que en efecto se encuentran sus celdas a 16. Haremos lo mismo con el archivo atlas_16x que se encuentra en la carpeta interior pack.
Por último en la ventana de Inspector dejamos deseleccionado la opción de Generate Physics para el sprite walkable atlas.
