Entornos isométricos 2D con Tilemap

Con el lanzamiento de Unity 2018.3, presentamos soporte para mapas de mosaicos isométricos, siguiendo de cerca el soporte para mapas de mosaicos hexagonales que se agregó en la versión 2018.2. Las nuevas características de Tilemap proporcionan una forma rápida y de alto rendimiento de crear entornos 2D basados en diseños de cuadrícula isométrica y hexagonal, como los que se ven en muchos juegos clásicos, incluidas las primeras entregas de las franquicias Diablo y Fallout, Civilization, Age of Empires y muchos más. Ambas funciones se basan en el sistema Tilemap existente introducido en Unity 2017.2, ¡y trabajar con ellas hoy en día es igual de fácil! También están integrados de forma nativa en el Editor. En futuras versiones de Unity, es posible que se trasladen al administrador de paquetes. Si estás interesado en seguir y experimentar con las técnicas mostradas, hemos creado un proyecto de kit de inicio isométrico preconfigurado con un personaje animado y múltiples conjuntos de mosaicos de entorno, que puedes descargar de forma gratuita.

Explora más entornos y herramientas 2D que ofrecen infinitas posibilidades creativas

Antes de comenzar a trabajar con Tilemap, es importante configurar correctamente nuestro proyecto. Isometric Tilemap funciona con sprites bidimensionales y se basa en la correcta clasificación del renderizador para crear la ilusión de una vista isométrica de arriba hacia abajo. Debemos asegurarnos de que los mosaicos que están más lejos del espectador se pinten primero y los que están más cerca se pinten encima de ellos.

Para personalizar el orden en que se pintan los objetos 2D en la pantalla, podemos utilizar la función de clasificación de ejes personalizados de Unity. Puede definir esta configuración por cámara (actualmente, esta es la forma predeterminada de hacerlo en los canales de renderizado programable, incluidos LWRP y HDRP) o globalmente a nivel de proyecto.

Para definir una ordenación de ejes personalizada a nivel de proyecto, vaya a Editar > Configuración del proyecto > Gráficos. En la sección Configuración de la cámara, verá un menú desplegable Modo de clasificación de transparencia, así como las configuraciones de valores X, Y y Z para el Eje de clasificación de transparencia.

De forma predeterminada, el eje de ordenamiento de transparencia en Unity está establecido en (0, 0, 1) para XYZ respectivamente. Sin embargo, todos nuestros mosaicos 2D están en realidad en el mismo plano Z. En cambio, podemos determinar qué fichas están detrás o delante utilizando su altura en la pantalla, en lugar de su profundidad. Las fichas que estén ubicadas más arriba en la pantalla se ordenarán detrás de las que estén ubicadas más abajo. Para ordenar los mosaicos según la altura, cambie el Modo de ordenamiento de transparencia a Personalizado y configure los valores del Eje de ordenamiento de transparencia en (0, 1, 0).

Puede leer la página de documentación de Unity correspondiente para la clasificación 2D si desea obtener más información sobre cómo funciona.

En algunos casos, es posible que también desees ajustar el valor Z del eje de ordenamiento de transparencia. Cubriremos esto con más profundidad más adelante en esta publicación del blog.

La función Tilemap consta de varios componentes que trabajan juntos. Los dos primeros son los objetos de juego Grid y Tilemap. Para crear una cuadrícula, simplemente haga clic derecho en cualquier lugar de la jerarquía, vaya a Objeto 2D y seleccione el tipo de mapa de mosaicos que desea usar. De forma predeterminada, cada nueva cuadrícula se crea con un objeto de juego Tilemap secundario del tipo correspondiente. Los tipos de mapas de mosaicos disponibles actualmente son los siguientes:

Mapa de mosaicos : crea una cuadrícula rectangular y un mapa de mosaicos. Un ejemplo del uso de este mapa de mosaicos se puede ver en el kit de juego 2Dde Unity.

Mapa de mosaicos con puntos hexagonales : crea una cuadrícula hexagonal y un mapa de mosaicos, donde uno de los vértices de cada hexágono apunta hacia arriba.

Mapa de mosaicos con superficie plana hexagonal : otro tipo de cuadrícula hexagonal, donde la parte superior del hexágono es un borde paralelo a la parte superior de la pantalla.

Los dos últimos tipos, Isométrico e Isométrico Z como Y, crean dos implementaciones diferentes de la cuadrícula isométrica. La diferencia entre ellos surge al simular diferentes niveles de elevación de las baldosas, como por ejemplo cuando tenemos una plataforma elevada en nuestro nivel isométrico.

Un mapa de mosaicos isométrico regular se utiliza mejor cuando se desea crear objetos de juego de mapa de mosaicos separados para cada nivel de elevación individual de los mosaicos. Esto simplificará el proceso de creación de formas de colisión automáticas, pero tendrá menos flexibilidad en lo que respecta a la variación de altura entre los mosaicos, ya que todos los mosaicos de una capa tendrán que estar en el mismo "plano".

En el caso de un mapa de mosaicos isométrico Z como Y, el valor de la posición Z de cada mosaico funciona en combinación con la configuración personalizada de Ordenamiento del eje de transparencia para hacer que los mosaicos aparezcan apilados uno sobre otro. Al pintar en un mapa de mosaicos Z como Y, ajustamos dinámicamente la configuración Z en el pincel para cambiar entre diferentes alturas. El mapa de mosaicos Z como Y requiere un valor Z adicional en el eje de ordenamiento de transparencia personalizado para representarse correctamente.

Nota: Los recursos que se muestran aquí pertenecen al conjunto de mosaicos Temple de nuestro proyecto Isometric Starter Kit . ¡Siéntete libre de obtenerlo, completamente gratis, y divertirte creando tus propios entornos!

Piense en la cuadrícula como el "caballete" que sostiene sus objetos de juego Tilemap, que son esencialmente lienzos sobre los que pintará sus mosaicos. Para comenzar a pintar en un Tilemap, también necesitarás un pincel y una paleta. Una paleta de mosaicos es lo que contiene tus recursos de mosaicos, después de lo cual puedes seleccionarlos con la herramienta de pincel y comenzar a pintar.

Para crear una paleta de mosaicos, elija Ventana > 2D > Paleta de mosaicos. En la ventana recién abierta, en el menú desplegable superior izquierdo, seleccione “Crear nueva paleta”. Asegúrese de configurar el tipo de cuadrícula que corresponda a su caso de uso. Para este ejemplo, utilizaré un mapa de mosaicos isométrico normal; así como los recursos de nuestro proyecto Isometric Starter Kit. Establezca el tamaño de celda de la paleta en Manual para poder personalizar las dimensiones de sus mosaicos isométricos. En este caso, sé que las dimensiones de mis mosaicos corresponden a una cuadrícula de 1 en X y 0,5 en Y; sin embargo, para su caso de uso, dependerá de la resolución, los valores de píxeles por unidad seleccionados en la importación y las dimensiones de los activos; esencialmente, del ángulo isométrico en el que se giran los mosaicos.

Es posible que no esté seguro acerca de las configuraciones de importación correctas y el tamaño del mapa de mosaicos que funcionarán para sus activos. Hay una regla general que puedes seguir aquí en función de las dimensiones iniciales de tus activos. Primero, eche un vistazo a la resolución de sus mosaicos. Normalmente, los mosaicos isométricos que se representan como un bloque son más altos que anchos; los mosaicos "planos" (aquellos que aparecen como un plano en lugar de un cubo) son más anchos que altos. Sin embargo, el ancho entre ellos siempre será el mismo. Por lo tanto, si desea que sus mosaicos ocupen exactamente una unidad de Unity, configure el valor de Píxeles por unidad en la configuración de importación de mosaicos igual a su ancho en píxeles. Es posible que desees ajustar este valor en algunos casos, generalmente disminuyéndolo (o aumentando la resolución real de tus recursos); esto podría ser útil si estás intentando producir un efecto en el que algunos mosaicos parecen ocupar más de una celda de la cuadrícula y superponerse a los mosaicos vecinos.

Para decidir el valor correcto de la cuadrícula Y para las baldosas, tome la altura de la base (o tapa) de una sola baldosa y divídala por el ancho. Esto le dará un valor de Y relativo a X, siempre que X sea 1. Veamos algunos ejemplos:

Para el pixel art que estamos usando en este proyecto, todos los mosaicos tienen una altura base de 32 píxeles y 64 píxeles de ancho. Por lo tanto, el tamaño de la cuadrícula que utilizaremos es exactamente 0,5 en Y. El segundo bloque en la imagen de ejemplo proviene de un paquete de activos de Golden Skull Art. El mosaico de ejemplo se ha reducido para referencia, pero los recursos originales tienen 128 píxeles de ancho. La base del mosaico mide aproximadamente 66 píxeles de alto, lo que nos da un tamaño de cuadrícula Y de 66/128 (aproximadamente 0,515 unidades).

Una vez que hayamos establecido las dimensiones correctas de la cuadrícula, sigamos adelante y agreguemos algunos mosaicos a nuestra paleta. Simplemente toma uno de tus sprites de mosaicos y arrástralo a la ventana de la Paleta de mosaicos. Esto creará un activo de mosaico. Contiene información sobre el mosaico en sí, como el sprite o los sprites que está usando, un color de tinte y el tipo de colisionador que generará. Si desea ver la información detallada sobre un mosaico en la paleta, elija la herramienta Seleccionar (S) en la parte superior de la ventana Paleta de mosaicos y haga clic en ese mosaico. Ahora, en el Inspector, deberías poder ver a qué activo de Tile hace referencia.

Para pintar el nuevo mosaico en nuestro mapa de mosaicos, seleccione la herramienta Pincel (B) y haga clic en el mosaico en la paleta. Ahora podrás pintar con el mosaico seleccionado en la vista de escena. Algunas otras herramientas de pintura incluyen el Borrador (D), el Relleno de cuadro (U), el Relleno de inundación (G) y el Selector de mosaicos (I).

A veces, es posible que también desees editar la disposición de los mosaicos en la propia paleta. Justo debajo de la barra de herramientas, verá un botón Editar. Si hace clic en él, accederá al modo de edición de la paleta, durante el cual las herramientas afectarán a la paleta de mosaicos en sí. No olvides salir de este modo una vez que hayas realizado los cambios deseados.

En algunos casos, es posible que veas una situación en la que los mosaicos de diferentes tipos no se ordenan correctamente, a pesar de estar en el mismo mapa de mosaicos, como en el siguiente ejemplo:

Esto está determinado por la configuración de Modo en el componente Renderer de mapa de mosaicos. De forma predeterminada, el modo está configurado en Fragmento.

El modo fragmento es eficaz para reducir el costo de rendimiento de Tilemap. En lugar de renderizar cada mosaico individualmente, los renderiza en lotes de una sola vez, como un bloque grande. Sin embargo, su uso presenta dos inconvenientes principales. El primero es el hecho de que no admite la clasificación dinámica con otros objetos 2D en la escena. Esto significa que si su Tilemap está en modo Chunk, no podrá ordenar dinámicamente detrás y delante de otros objetos, como personajes; solo será posible uno u otro a la vez, según la configuración de Orden en capa. Sin embargo, sigue siendo extremadamente efectivo cuando deseas optimizar tu juego y puede usarse para renderizar por lotes grandes áreas del terreno.

Sin embargo, esto no soluciona el problema de que los distintos mosaicos no se ordenan entre sí. Para renderizar por lotes mosaicos que provienen de dos o más sprites diferentes (es decir, texturas), los sprites deben unificarse bajo un único activo de Sprite Atlas.

Para crear un Atlas de Sprites, seleccione Activos > Crear > Atlas de Sprites. En la configuración de Sprite Atlas, encontrarás la lista de Objetos para empacar. Simplemente arrastre todos los mosaicos que desea que se representen en lote a esta lista y configure las configuraciones de importación correctas (generalmente equivalentes a las de sus sprites individuales).

Una vez que hayas hecho eso, los mosaicos se ordenarán correctamente; pero solo serán visibles de esta manera en el modo de juego o en tiempo de ejecución.

Por ello, es mejor configurar el modo de renderizado de mapas de mosaicos en Individual durante la edición. Ordenará cada mosaico por separado, lo que significa que los verás representados correctamente incluso fuera del modo de juego, lo que resulta extremadamente útil cuando todavía estás realizando cambios en tu nivel. Una vez que tengas la estructura de niveles en su lugar, siempre puedes configurar el Modo de renderizado de mapas de mosaicos nuevamente en Trozos.

El modo de renderizado individual también es útil cuando deseas agregar objetos (como árboles, accesorios y terreno elevado) que deseas ordenar dinámicamente con personajes o entre ellos. Durante esta publicación del blog, nos centraremos en el uso del modo individual para todos nuestros mapas de mosaicos.

A veces, es posible que quieras utilizar más de un mapa de mosaicos en la misma cuadrícula. En el caso de mapas de mosaicos isométricos y hexagonales, será útil si desea agregar objetos de apoyo al nivel que también se alineen con la cuadrícula; o si desea agregar mosaicos que parezcan ser más altos que la primera capa.

Para adjuntar otro Tilemap a la cuadrícula, haga clic derecho en el objeto de juego de cuadrícula y cree un nuevo Tilemap del tipo correspondiente.

Para cambiar a pintar en el nuevo Mapa de mosaicos, regrese a la ventana Paleta de mosaicos y cambie el Mapa de mosaicos activo justo debajo de la barra de herramientas principal.

Generalmente hay dos formas de agregar terreno elevado a tus niveles. El que probablemente utilizarás dependerá del tipo de mapa de mosaicos que elijas. Repasaremos cada uno de los casos posibles.

Además, hemos preparado un breve vídeo sobre el tema, que demuestra uno de estos enfoques con un mapa de mosaicos isométrico normal, además de agregar áreas de colisión a los mosaicos. Échale un vistazo si quieres tener una referencia rápida en vídeo de ambas cosas:

Para mapas de mosaicos isométricos normales, puedes simplemente crear un nuevo mapa de mosaicos bajo la misma cuadrícula y darle un valor de Orden en Capa más alto. Luego, puedes cambiar la configuración de Anclaje de mosaico para hacer que la nueva capa se ancle a un punto más alto en la cuadrícula.

Mi mapa de mosaicos a nivel del suelo tenía un ancla de mosaico de (0, 0) para X e Y respectivamente. Quiero que mi nueva capa pinte una unidad más arriba, así que cambiaré el punto de anclaje del nuevo mapa de mosaicos a (1, 1). Además, le daré una Orden en Capa de 1, solo una unidad más alta que mi nivel base.

Ahora puedo cambiar mi Tilemap activo al que tiene el segundo nivel de altura y pintar.

A veces puede ser útil simular diferentes alturas utilizando el mismo mapa de mosaicos. Para este caso, puedes utilizar un mapa de mosaicos isométrico Z como Y y una cuadrícula.

Con un mapa de mosaicos Z como Y, el valor Z de cada mosaico tiene una influencia adicional en el orden de representación de los mosaicos. Podemos ajustar el valor Z que tienen los mosaicos mientras los pintamos, usando la configuración de Posición Z en nuestro pincel en la parte inferior de la Paleta de Mosaicos (que también se puede cambiar usando las teclas de acceso rápido '+' y '-'):

Sin embargo, para que nuestro valor Z contribuya adecuadamente y para que los mosaicos se ordenen correctamente, debemos volver a nuestro valor de Ordenamiento de eje personalizado y agregar una influencia Z. El número que utilizamos aquí está directamente relacionado con la forma en que Unity convierte las posiciones de las celdas en una cuadrícula isométrica en valores del espacio mundial.

Por ejemplo, una cuadrícula con dimensiones XYZ de (1, 0,5, 1) (el valor predeterminado para isométrica) tendrá un valor de ordenamiento del eje Z de -0,26. Si tiene curiosidad sobre cómo se calcula este número o está utilizando una cuadrícula con un tamaño de celda diferente, siga leyendo para aprender cómo encontrar el valor Z correcto para su caso.

Una vez que haya establecido el valor correcto de Ordenamiento de eje personalizado, puede comenzar a pintar mosaicos que tengan diferentes valores Z. También puedes ajustar los incrementos en los que el valor Z mueve los mosaicos elevados hacia arriba o hacia abajo cambiando la dimensión Z de la cuadrícula, establecida en 1 de manera predeterminada.

Hay una fórmula general que puedes usar para calcular el valor Z de tu ordenamiento de ejes. Primero, tome la dimensión Y de su cuadrícula. Si aún no ha calculado su dimensión Y, consulte la nota sobre la importación de activos en la parte superior de esta publicación del blog. Multiplique este valor por menos 0,5 y réstele 0,01 adicional.

Siguiendo esta fórmula, una cuadrícula que tenga las dimensiones (1, 0,5, 1) nos dará un valor de ordenamiento Z de -0,26 (punto veintiséis negativo). En este valor de ordenamiento de eje, cualquier cuadrícula (1, 0,5, 1) tendrá sus mosaicos ordenados correctamente.

Si desea obtener más información sobre de dónde proviene este valor y cálculo, consulte la documentación aquí. Explica en profundidad cómo funcionan los renderizadores 2D y qué método se utiliza al convertir celdas isométricas en valores de espacio mundial.

Ahora que tenemos algunas fichas colocadas más arriba que otras, podemos controlar las áreas a las que puede ir el jugador y hacer la transición entre ellas mediante colisión.

Hay muchos enfoques para agregar colisión; pero en nuestro caso, queremos que el jugador ascienda y descienda a lo largo del nivel usando una rampa y, como tal, no es obvio qué objetos deberían o no tener colisionadores. En lugar de ello, podemos definir la colisión manualmente utilizando un Tilemap adicional.

En este proyecto, hemos creado algunos sprites que corresponden a las diferentes formas que usaremos para definir nuestras áreas de colisión. Podemos pintar estas formas en nuestro tercer mapa de mosaicos, en las áreas que no queremos que el jugador pase. Por ejemplo, queremos que el jugador pueda ascender al acantilado únicamente usando la rampa, en lugar de caminar directamente sobre él.

También podemos agregar un Material personalizado en nuestro componente Tilemap Renderer para teñir los mosaicos de un color diferente que sea distinto del resto de nuestro nivel.

Una vez que hayamos colocado nuestros mosaicos de colisión, podemos agregar un componente Tilemap Collider al Tilemap de colisión. Esto generará automáticamente colisionadores para cada mosaico individual en función de la forma del sprite.

Para un mejor rendimiento, también podemos agregar un componente Composite Collider 2D y asegurarnos de marcar Usado por Composite en nuestro Tilemap Collider. Esto unifica todos nuestros colisionadores individuales en una gran forma.

Añadir accesorios al nivel es bastante sencillo. Puedes colocar manualmente los sprites de utilería en cualquier punto deseado de la escena, o puedes adjuntar los accesorios a la cuadrícula del mapa de mosaicos convirtiéndolos en mosaicos individuales. Puede decidir qué enfoque funciona mejor para su caso.

En este proyecto, colocamos manualmente algunos árboles alrededor del nivel. Los árboles y el personaje tienen el mismo Orden en Capa, lo que permite a nuestro personaje ordenarse detrás y delante de ellos dinámicamente.

Podemos definir el punto en el que el jugador puede pasar el árbol utilizando un colisionador. Hay varias maneras en las que podemos hacer esto.

El primero, como se muestra en los videos, es conectar un colisionador secundario al objeto y cambiar su forma según sea necesario.

El otro método es definir una forma física personalizada para el objeto dentro del Editor de sprites.

Para abrir el Editor de Sprites, seleccione el sprite del objeto y busque el botón Editor de Sprites en el Inspector. En el menú desplegable superior izquierdo, cambie al editor de formas físicas personalizadas. Aquí puedes crear una forma poligonal para definir los límites de tu colisionador personalizado.

Una vez que haya definido una forma física, puede adjuntar un componente Polygon Collider a su objeto, y se corresponderá con esa forma.

Si estás usando tus accesorios como mosaicos en un mapa de mosaicos, también podrías usar un colisionador de cuadrícula. Seleccione el recurso de mosaico que corresponde a un mosaico de propiedad (si necesita un repaso sobre dónde encontrarlo, eche un vistazo a la sección Flujo de trabajo básico de mapas de mosaicos). Podrás ver una configuración desplegable para el tipo de colisionador. De forma predeterminada, está configurado como sprite, lo que significa que el colisionador generado automáticamente utilizará la forma física de la que hablamos anteriormente. Sin embargo, si lo configura en cuadrícula, siempre coincidirá exactamente con la forma de la celda de la cuadrícula a la que está conectado el accesorio. Puede que no sea la forma más precisa de implementar colisionadores, pero podría ser útil para un tipo específico de juego.

Para utilizar los colisionadores de cuadrícula para estos mosaicos, seleccione el Mapa de mosaicos con sus accesorios y agregue un componente Colisionador de Mapa de mosaicos.

Los mosaicos de reglas son extremadamente útiles cuando se trata de automatizar el flujo de trabajo de pintura de mosaicos. Un mosaico de reglas actúa como un mosaico normal, con una lista adicional de parámetros de mosaico. Usando estos parámetros -o reglas- el mosaico puede elegir automáticamente qué sprite debe pintarse en función de sus mosaicos vecinos.

Los mosaicos de reglas son útiles cuando quieres evitar seleccionar manualmente mosaicos con diferentes rotaciones, por ejemplo, al crear un acantilado o una plataforma. También se pueden utilizar para aleatorizar entre diferentes variaciones del mismo mosaico para evitar patrones obvios e incluso para crear mosaicos animados.

Los mosaicos de reglas isométricas y hexagonales están disponibles en el repositorio 2D Extras de Unity en GitHub. También contienen muchos otros recursos útiles para la función Tilemap que quizás quieras explorar.

También hemos incluido mosaicos de reglas preconfigurados para cada uno de los diferentes conjuntos de mosaicos en nuestro proyecto de kit de inicio isométrico . A continuación se muestran algunos ejemplos de los mosaicos incluidos en el proyecto para que puedas experimentar con ellos:

¡Ahora que ya aprendiste todos los detalles de los mapas de mosaicos isométricos en Unity, descarga el proyecto del kit de inicio isométrico aquí y pruébalo tú mismo! También es posible interactuar con Tilemaps a través de un script si eres programador, por lo que quizás también quieras probarlo.

Por ejemplo, puedes descubrir cómo puedes implementar un controlador de personajes simple que funcione con Isometric Tilemap mirando este video:

La obra de arte de este proyecto fue creada para Unity por @castpixel y puedes ver más de su trabajo aquí. Si buscas recursos 2D adicionales para experimentar con el uso de Tilemaps, también puedes consultar la Tienda de recursos de Unity .

---

Aprenda las mejores prácticas para utilizar Tilemap con contenido para principiantes y avanzados en la plataforma Unity Learn Premium.