7 - 3D Tilemaps en Unity

Objetivo

En esta guía exploraremos la construcción y uso de Tilemaps en 3D con Unity. Un tilemap es una herramienta muy útil para crear escenarios de manera eficiente y flexible. Imagina que estás construyendo un edificio con bloques de Lego: cada bloque sería un tile (o tesela) y el conjunto de bloques sería el tilemap.

¿Para qué sirven los tilemaps?

• Creación de escenarios: Los tilemaps permiten construir niveles enteros a partir de una cuadrícula de tiles. Esto hace que la creación de escenarios sea mucho más rápida y organizada que dibujar cada elemento individualmente.
• Repetición de elementos: Los tiles suelen ser elementos gráficos que se repiten, como suelo, paredes, hierba, etc. Esto reduce la cantidad de recursos gráficos necesarios y facilita la creación de niveles más grandes.
• Edición fácil: Los tilemaps ofrecen herramientas para editar los niveles de forma intuitiva, como pintar con diferentes tipos de tiles, borrar, copiar y pegar.
• Optimización: Al utilizar tilemaps, el motor del juego puede optimizar la renderización de los gráficos, lo que mejora el rendimiento del juego.

¿Cómo funcionan?

• Tileset: Es una colección de imágenes que representan los diferentes tipos de tiles (suelo, pared, objetos, etc.).
• Tilemap: Es una cuadrícula donde se colocan los tiles para formar el escenario. Cada celda de la cuadrícula corresponde a un tile. Editor de tilemaps: Es una herramienta que permite al desarrollador colocar los tiles en el tilemap, creando así el nivel.

Ejemplo:

Imagina que estás creando un juego de plataformas 2D. Puedes utilizar un tileset con diferentes tipos de suelo, paredes, plataformas y objetos. Luego, en el tilemap, colocas estos tiles para construir el nivel, creando plataformas para que el jugador salte, obstáculos que evite y enemigos que combata.

Ventajas de los tilemaps:

• Facilidad de uso: Son fáciles de aprender y utilizar, incluso para desarrolladores sin mucha experiencia.
• Flexibilidad: Permiten crear niveles muy variados y complejos.
• Eficiencia: Optimizan el rendimiento del juego.
• Reutilización: Los tilesets pueden reutilizarse en diferentes niveles y juegos.

En resumen, los tilemaps son una herramienta fundamental en el desarrollo de videojuegos 2D y 3D, ya que permiten crear escenarios de forma rápida, eficiente y flexible.

Instrucciones

Sigue los pasos descritos en la siguiente guía, si tienes algún problema no olvides que tus profesores están para apoyarte.

Guía

Paso 1 Crear y configurar un nuevo proyecto

Para este laboratorio usaremos un proyecto en 3D.

Una vez que tenemos creado nuestro proyecto vamos a crear dos carpetas llamadas Models y Materials.

Paso 2 Importar modelos

Para esta guía vamos a descargar assets fuera de la tienda de Unity. Esto nos ayudará a poder trabajar con assets pre fabricados o diseñados por nosotros mismos.

Para descargar los que vamos a utilizar puedes consultar la siguientes página, en caso de que no puedas descargarlos puedes intentar desde aquí.

El siguiente paso es descomprimir el zip y desde Unity vamos a seleccionar nuestra carpeta de Models. Una vez hecho vamos a seleccionar la opción de Assets > Import New Asset.

Aquí vamos a buscar la carpeta que acabamos de descomprimir y vamos a ver que tenemos varias opciones en nuestro modelos para importar.

Para nuestra guía vamos a utilizar el formato FBX ya que este ya combina los materiales y el modelo, si bien podemos importar los OBJ Unity no nos deja insertar los MTL por lo que necesitaríamos hacer algunos pasos adicionales que nos dificultarían un poco más el proceso.

Si pudiste notar dentro de la carpeta de FBX Format viene una carpeta que se llama Textures, si de casualidad no agregaste el archivo dentro de la carpeta es la razón por la que parece que todos los modelos son grises.

Para solucionarlo vamos a realizar el mismo procedimientos desde Assets > Import New Asset. Una vez realizado, importamos la textura colormap.png

Al hacer el import, nuestros modelos dentro de Unity deben actualizarse de manera automática tomando el color correspondiente.

Con esto podemos empezar a trabajar directamente en Unity.

Paso 3 Creación de materiales

Antes de avanzar con la creación de materiales, debemos entender que es un material.

Un archivo .mtl en el contexto del modelado 3D y motores de juego como Unity, es un archivo de material. Este archivo contiene información sobre cómo se deben renderizar las superficies de un modelo 3D.

¿Qué información contiene un archivo .mtl?

Un archivo .mtl define las propiedades visuales de un material, como:

• Color: El color base de la superficie.
• Textura: La imagen que se aplicará a la superficie para darle una apariencia más realista.
• Brillo: La cantidad de luz que refleja la superficie.
• Transparencia: La cantidad de luz que pasa a través de la superficie.
• Iluminación: Cómo interactúa la superficie con las luces en la escena.

¿Para qué sirven los archivos .mtl en Unity?

En Unity, los archivos .mtl se utilizan junto con los modelos 3D (por ejemplo, en formato .obj) para definir cómo se verán esos modelos en la escena. Al asignar un material a un objeto en Unity, estás diciéndole al motor cómo debe renderizar ese objeto, utilizando la información contenida en el archivo .mtl.

Ejemplo práctico

Imagina que tienes un modelo 3D de una esfera. Puedes crear varios archivos .mtl diferentes para esa esfera:

• Esfera roja: Un archivo .mtl que define un color rojo sólido para la esfera.
• Esfera metálica: Un archivo .mtl que define una textura de metal, un alto brillo y una ligera transparencia.
• Esfera de madera: Un archivo .mtl que define una textura de madera, un brillo bajo y una opacidad completa.

Al asignar cada uno de estos materiales a la esfera, obtendrás visualizaciones completamente diferentes.

Ya que entendimos un poco el concepto vamos a crear uno.

Desde Unity seleccionando nuestra carpeta de Materials y crearemos un nuevo Material.

Aquí ya sea desde la creación o desde el inspector vamos a ponerle un nombre de Blue.

Este material que vamos a crear es el más simple que existe pues solo aplicará un color. Desde el inspector verás el cuadro blanco, si das click verás el selector de color. Selecciona el azul de tu preferencia.

Una vez que creamos nuestro material podemos seguir con nuestra práctica.

Paso 4 Creación de planos

El tilemap como ya definimos al inicio es una porción de mapa o terreno por el cual crearemos nuestro juego, algo muy común es que cada tile es un modelo u objeto, si creáramos todo el terreno a partir de esto, el procesamiento y nivel de detalle empezaría a crecer de gran manera.

Por ello es que para la definición general del piso de un nivel o terreno es usual utilizar un Plane, este objeto abarca un gran espacio según lo definamos y permite ser la capa inicial para evitar o ayudar a pre visualizar terreno más detallado en el juego.

Dentro de nuestra jerarquía vamos a crear un objeto Plane.

Esto nos agregará un cuadrado dentro de nuestro proyecto, pero a diferencia del cubo, este cuadrado requiere menos procesamiento y esto sin importar que estemos trabajando con un juego 3D.

Ahora nos falta algo, el plano que agregamos es blanco, por lo cual no nos dice mucho, pero ¿y si agregáramos algo azul?

Arrastra el material que creamos Blue hacia el plano dentro de la escena del juego.

Nota: No intentes arrastrarlo a la sección del material en el inspector porque no te permitirá hacerlo.

Ahora vamos a extender un poco mas nuestro plano, dentro de las propiedades de Scale del mismo ahora tienes los valores 1,1,1, sustituye estos valores por 10,10,10.

El resultado será el aumento de tamaño en nuestro plano.

Ya hemos preparado la base de terreno de nuestro mapa, ahora si pasemos al tilemap.

Paso 5 Creación de tilemaps

Para comenzar vamos a instalar unas herramientas que nos permitirán trabajar con esto. Estas herramientas inicialmente están pensadas para trabajo en proyectos 2D, pero igualmente pueden usar proyectos 3D.

La diferencia radica en que el proyecto 3D no va a estar tan optimizado como pudiera esta un proyecto 2D. Pero al menos de momento no existe una herramienta que permita hacer esto en Unity de una manera más sencilla.

Ve al menú de Window > Package Manager y una vez abierta la ventana selecciona la opción para filtrar con Unity Registry.

Una vez seleccionado el registro, busca tile. Esto deberá regresar el siguiente resultado.

Vera las opciones de:

• 2D Tilemap Editor
• 2D Tilemap Extras

Instala ambas opciones en el proyecto.

Una vez instalado cierra la ventana del package manager y ahora regresa a la jerarquía del proyecto. Y vamos a crear un objeto 2D que sera el Tilemap rectangular.

Al crearlo se agregará a nuestra jerarquía un objeto Grid, y dentro del mismo un objeto TileMap. Si observas la escena veras una cuadrícula a la cual pertenece el Grid, esta nos ayudará a colocar objetos, sin embargo está girada de manera vertical, en un momento vamos a hacer la corrección de esta parte. También observa que en la esquina inferior derecha de la escena del juego aparece un nuevo botón que dice Open Tile Palette.

Abre la ventana seleccionando la opción de Open Tile Palette y arrastra la nueva ventana a un lado del inspector.

Una vez hecho lo anterior, vamos a proceder a corregir la orientación del Grid.

En el inspector selecciona el Grid, verás la opción Cell Swizzle y su valor seleccionado actual es XYZ, cambia este valor por XZY, ahora verás como la orientación del Grid se modifica y se coloca en modo horizontal.

Ahora bien, como te mencioné no estamos en un proyecto 2D, por tanto no podemos usar el brush por defecto, necesitamos cambiarlo por uno que añada game objects.

En el Tile Palette cambia el brush por defecto en la parte inferior.

Una vez seleccionado expande la propiedad Cells y el Element 0 y verás que recibe un Game Object. Aquí es donde colocaremos el modelo que queremos pintar.

Puedes experimentar con cualquiera de los modelos que descargamos al proyecto, en mi caso voy a usar el modelo block-grassoverhang-large, voy a usar este y no el primer block debido a que al rellenar espacios no se cubren las esquinas, esto dependerá de los modelos que uses y es cuestión de experimentar un poco para que obtengas el terreno deseado.

Ahora vamos a posicionar nuestra cámara en la escena para comenzar a pintar. Selecciona desde la escena para que se posicione la cámara en Y y tener una perspectiva desde arriba de la escena.

Notarás que desde la perspectiva superior se alcanza a divisar la cuadrícula del Grid.

Ahora en Tile Palette vamos a asegurarnos que está seleccionado el modo pincel.

Asegúrate de tener seleccionado en la jerarquía el Tilemap para que todo lo que hagas se guarde desde ahí. Ahora dentro de la escena procede a dar click en algún espacio de la cuadrícula y observa como se empiezan a agregar los objetos del bloque seleccionado.

Notarás que aunque siguen la cuadrícula el tamaño va a variar, esto está bien, y aquí depende la proporción de los objetos que tengas para pintar, puedes ajustar el Grid para mejorar el tamaño pero esto ya es más un tema personal, decide cual es la mejor forma de poder tener el resultado que desees y no olvides experimenta para entenderlo mejor.

Ahora veamos que sucede en la jerarquía, si extendemos el Tilemap veremos lo siguiente:

Tiene lógica el resultado final, donde logramos crear un mapa y cada pedazo de terreno corresponde a un bloque de modelo que estamos "pintando".

Paso 6 Creación de capas

Podemos crear nuestro mapa, pero se ve un poco plano, en la realidad vamos a necesitar crear más objetos como capas para crear follaje, montañas, etc.

Para poder agregar estas capas vamos a hacer lo siguiente. Reduce en kla jerarquía el Tilemap y dale doble clic para renombrarlo como Terrain.

Ahora vamos a seleccionar el Grid y vamos a crear un nuevo objeto 2D > Tilemap como hicimos al inicio.

La diferencia es que ahora no se va a crear un nuevo Grid, sino que se va a añadir el Tilemap como jeraquía del mismo Grid.

Vamos a renombrar el nuevo Tilemap como NIObjects o Non-Interactive-Objects.

Para este vamos a comenzar añadiendo al Tile Palette un nuevo objeto, en mi caso voy a seleccionar el modelo Tree.

Antes de empezar a dibujar necesitamos hacer 2 ajustes, el primero es asegurarnos que vamos a empezar a dibujar dentro de NIObjects y no dentro de Terrain. Para ello vamos a ver las opciones superiores del Tile Palette.

Cuando modifiquemos la capa, si es que agregamos más no olvides de revisar que estén en la adecuada para que se refleje el cambio dentro de este grupo.

El segundo cambio es cambiar la altura, ya que si empezamos a pintar, los árboles se colocarían a la altura del terreno y no se vería bien. Para ajustar esto, debajo de donde colocamos el Game Object, veremos varias opciones, la que nos interesa es el offset, vamos a cambiar el valor de Y a 1 para ajustar este pedazo de altura.

Ahora ya tenemos todo listo vamos a empezar a colocar algunos árboles en nuestro mapa.

Agrega los elementos que consideres necesarios, igualmente experimenta agregando algunos otros objetos diferentes para crear algo que quede a tu gusto.

Mi resultado es algo como lo siguiente, al final podemos mover la cámara para ver la perspectiva en primera persona.

Para mi narrativa podría pensar en un mundo con islas, por lo que el Plane funge como el mar pues no va a tener mucha más interacción.

Aquí es mucha creatividad en como construyes a partir de tu conjunto de modelos un mundo completo.