Unity 2018.3 introdujo soporte para mapas de mosaicos isométricos, muy similar a los mapas de mosaicos hexagonales, que se agregó en la versión 2018.2. Las nuevas características de Tilemap le permiten crear de manera rápida y eficiente entornos 2D basados en las cuadrículas isométricas y hexagonales que se usaron en muchos juegos clásicos, incluidas las primeras partes de Diablo y Fallout, Civilization, Age of Empires y muchos otros.
Ambos sistemas se basan en el sistema Tilemap ya existente, que apareció en Unity 2017.2, ¡y hoy es tan fácil trabajar con ellos! Además, tienen integración nativa con el Editor. En futuras versiones de Unity, se pueden portar al administrador de paquetes.
Si está interesado en experimentar con estos sistemas, creamos un proyecto de Kit de inicio isométrico preparado previamente con un personaje animado y varios mosaicos de entorno. Puedes descargarlo
aquí .
Configuración del proyecto para el mapa de mosaico isométrico
Antes de comenzar con Tilemap, es importante configurar el proyecto correctamente. El mapa de mosaico isométrico funciona con sprites bidimensionales y utiliza la clasificación correcta de la representación para crear la ilusión de un mapa isométrico con una vista superior. Necesitamos hacer que los mosaicos más alejados del espectador dibujen primero, y más cerca de ellos.
Puede usar la función Unity llamada Custom Axis Sort para ajustar el orden de representación de los objetos 2D en la pantalla. Este parámetro se puede configurar para la cámara (actualmente este método es estándar para las tuberías de renderizado programables, incluidos LWRP y HDRP), o globalmente, a nivel de proyecto.
Para establecer la clasificación personalizada del eje en el nivel del proyecto, vaya a
Edición> Configuración del proyecto> Gráficos . En la sección Configuración de la cámara, verá el menú desplegable Modo de clasificación de transparencias, así como las opciones X, YZ para Eje de clasificación de transparencias.
De forma predeterminada, el eje de clasificación de transparencia establece los ejes XYZ en (0, 0, 1). Sin embargo, todos nuestros mosaicos 2D están realmente en el mismo plano Z. Por lo tanto, para determinar qué mosaicos están adelante o atrás, no debes usar la profundidad, sino la altura. Los mosaicos ubicados más arriba en la pantalla se ordenarán por los más bajos. Para ordenar los mosaicos por altura, cambie el valor del Modo de clasificación de transparencias a Personalizado y establezca el Eje de clasificación de transparencias en (0, 1, 0).
Para obtener más información sobre cómo funciona esto, puede leer la
página correspondiente sobre ordenación 2D en la documentación de Unity.
En algunos casos, es posible que también necesite cambiar el valor del Eje de clasificación de transparencia a Z. Hablaremos más sobre esto a continuación.
Tipos de tarjetas de mosaico
El sistema Tilemap consta de varios componentes que interactúan. Los dos primeros son los objetos del juego Grid y Tilemap. Para crear una cuadrícula, simplemente haga clic con el botón derecho en cualquier lugar de la jerarquía, vaya al objeto 2D y seleccione el tipo de mapa de mosaico que desea usar. Por defecto, cada nueva cuadrícula se crea con un objeto de juego Tilemap secundario del tipo correspondiente. Actualmente existen los siguientes tipos de Tilemap:
Mapa de mosaico : crea cuadrícula rectangular y mapa de mosaico. Se puede ver un ejemplo del uso de este Tilemap en el
Kit de juego 2D del motor de Unity.
Mapa de mosaico superior del punto hexagonal : crea una cuadrícula y un mapa de mosaico a partir de hexágonos, en los que uno de los vértices de cada hexágono se dirige hacia arriba.
El mapa de mosaico plano superior hexagonal es otro tipo de cuadrícula de hexágonos, en el que en la parte superior del hexágono hay una cara paralela al borde 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 aparece cuando se simulan diferentes niveles de altura de mosaico, por ejemplo, cuando hay una plataforma alta en el nivel isométrico.
Si desea crear objetos de juego de Tilemap separados para cada nivel de altura de mosaico, entonces es mejor usar el tipo de
mapa de mosaico isométrico habitual. Simplifica el proceso de creación de formas automáticas de colisiones, pero tiene menos flexibilidad cuando se trabaja con elevaciones entre mosaicos, porque todos los mosaicos en la misma capa deben estar en el mismo "plano".
En el caso de
Z isométrica como mapa de mosaicos Y, el valor de la posición Z de cada mosaico funciona junto con el parámetro Clasificación de eje de transparencia, haciendo que los mosaicos aparezcan apilados uno encima del otro. Al dibujar en un mapa de mosaico Z como Y, cambiamos dinámicamente el parámetro Z del pincel para cambiar entre diferentes alturas. Para representar
Z como mapa de mosaico Y correctamente , se requiere un valor Z adicional en el eje de clasificación de transparencias con el modo personalizado.
Nota: Los activos que se muestran en las capturas de pantalla se tomaron del mosaico Temple del proyecto Isometric Starter Kit . ¡Son completamente gratuitos, por lo que puede usarlos para crear sus propios entornos!Piense en la cuadrícula como un "caballete" en el que residen todos los objetos del juego Tilemap. Y ellos, a su vez, son esencialmente un lienzo en el que dibujaremos mosaicos. Para comenzar a dibujar en Tilemap, también necesitamos un pincel y una paleta. Todos los activos de mosaico se encuentran en la Paleta de mosaico, desde la cual se pueden seleccionar con la herramienta Pincel y comenzar a dibujar.
Para crear una paleta de mosaicos, elija Ventana> 2D> Paleta de mosaicos. En el menú desplegable superior izquierdo, seleccione "Crear nueva paleta". Asegúrese de seleccionar el tipo de malla apropiado. En el ejemplo, usaré el mapa de mosaico isométrico habitual, así como los recursos del proyecto
Isometric Starter Kit . Especificaremos Manual como el tamaño de celda de la paleta (tamaño de celda) para poder cambiar el tamaño de los mosaicos isométricos. En este caso, sé que los tamaños de mis mosaicos corresponden a una cuadrícula con un tamaño de celda de 1 por X y 0.5 por Y; sin embargo, dependen de la resolución seleccionada al importar los valores de píxeles por unidad y el tamaño de los activos; de hecho, del ángulo isométrico en el que se rotan los mosaicos.
Nota sobre la importación de activos
Es posible que no sepa qué opciones de importación y qué tamaño de tarjeta de mosaico son los mejores para sus activos. Hay una regla general que puedes seguir: primero debes mirar la resolución de los mosaicos. Típicamente, los bloques de mosaicos isométricos son más grandes en altura que en ancho; Las baldosas "planas" (que se parecen más a un plano que a un cubo) son más anchas que altas. Sin embargo, el ancho entre ellos siempre será el mismo. Por lo tanto, si desea que los mosaicos ocupen exactamente una unidad de medida de Unity, configure los
Píxeles por unidad en la configuración de importación de mosaicos a un valor igual a su ancho en píxeles. En algunos casos, este valor tendrá que cambiarse, generalmente en la dirección de disminuir (o aumentar la resolución de los activos); Esto puede ser útil si desea recrear un efecto en el que algunos mosaicos parecen ocupar más de una celda de cuadrícula y superponer mosaicos adyacentes.
Para determinar el valor correcto de la cuadrícula por Y para los mosaicos, tome la altura de la base (o vértice) de un mosaico y divídala por el ancho. Esto le dará un valor de Y en relación con X, dado que X es 1. Veamos algunos ejemplos:
En los activos de pixel art que utilizamos para este proyecto, todos los mosaicos base tienen 32 píxeles de alto y 64 píxeles de ancho. Por lo tanto, el tamaño de la cuadrícula en Y será igual a 0,5. El segundo bloque de la imagen está tomado del paquete de activos de Golden Skull Studios; Puedes verlo
aquí . El mosaico de ejemplo se ha reducido, pero los activos originales tienen 128 píxeles de ancho. La base del mosaico es de aproximadamente 66 píxeles, lo que da un tamaño de cuadrícula Y de 66/128, es decir, aproximadamente 0,515 unidades.
El proceso básico de trabajar con Tilemap
Una vez decidido el tamaño correcto de la cuadrícula, agregue algunos mosaicos a nuestra paleta. Simplemente tome uno de los sprites de mosaico y arrástrelo a la ventana Paleta de mosaico. Esto creará el activo de mosaico. Contiene información sobre el mosaico en sí, por ejemplo, los sprites que usa, el tono y el tipo del colisionador generado. Si necesita ver información detallada sobre el mosaico de la paleta, seleccione la herramienta Seleccionar (S) en la parte superior de la ventana Paleta de mosaico y haga clic en este mosaico. Observe que el Inspector puede ver a qué activo de mosaico se refiere.
Para dibujar un nuevo mosaico por mapa de mosaico, seleccione la herramienta Pincel (B) y haga clic en el mosaico en la paleta. Después de eso, puede dibujar con el mosaico seleccionado en la ventana de escena. Existen otras herramientas de dibujo como Borrador (D), Relleno de caja (U), Relleno de inundación (G) y Selector de mosaico (I).
A veces necesita cambiar la ubicación de los mosaicos en la paleta misma. Justo debajo de la barra de herramientas hay un botón Editar. Si hace clic en él, se activará el modo de edición de paleta, en el que las herramientas afectarán a la paleta de mosaico. No olvide salir de este modo después de hacer los cambios necesarios.
Modos de representación del mapa de mosaico
En algunos casos, los mosaicos de diferentes tipos pueden no ordenarse correctamente, a pesar de estar en el mismo mapa de mosaicos, como en este ejemplo:
Esto está determinado por el parámetro Modo del componente Renderizador de Tilemap. Por defecto, el Modo es Chunk.
El modo fragmentado es efectivo para reducir el consumo de activos de Tilemap. En lugar de renderizar cada mosaico individualmente, los renderiza en una sola pasada como un bloque grande. Sin embargo, este modo tiene dos desventajas principales. Primero, no admite la ordenación dinámica con otros objetos 2D en la escena. Esto significa que si el Tilemap está en modo Chunk, no podrá ordenar dinámicamente delante o detrás de otros objetos, por ejemplo, caracteres, solo uno u otro será visible a la vez, y esto depende del parámetro Orden en la capa. Sin embargo, sigue siendo extremadamente efectivo para optimizar el juego y puede usarse para renderizar por lotes grandes áreas de terreno.
Sin embargo, esto no nos salva del problema de la clasificación incorrecta de diferentes mosaicos. Para la representación por lotes de mosaicos tomados de dos o más sprites diferentes (por ejemplo, texturas), los sprites deben combinarse en un solo activo Sprite Atlas.
Para crear Sprite Atlas, seleccione
Activos> Crear> Sprite Atlas . Sprite Atlas tiene una lista de
objetos para empacar . Simplemente arrastre y suelte en él todos los mosaicos que deben procesarse en lotes, y especifique los parámetros de importación apropiados, generalmente coinciden con los parámetros de sprites individuales.
Después de eso, las fichas se ordenarán correctamente; pero solo serán visibles en el modo Jugar o durante la ejecución del juego.
Por lo tanto, durante el proceso de edición, es mejor seleccionar el modo
Individual para el Renderizador de Tilemap. En este modo, cada sprite se ordenará por separado; Esto significa que se renderizarán correctamente incluso fuera del modo Play, lo cual es muy útil al editar un nivel. Después de completar la creación de la estructura de niveles, puede cambiar el modo Renderizador de Tilemap a Chunk nuevamente en cualquier momento.
El modo de representación individual también es útil cuando necesita agregar objetos tales como árboles, objetos y terrenos más altos que deben clasificarse dinámicamente con caracteres o entre sí. En esta publicación habilitaremos el modo Individual para todos los Tilemap.
Usando Múltiples Tilemap
A veces es necesario usar varios Tilemap en una cuadrícula. En el caso del mapa de mosaico isométrico y hexagonal, es útil poder agregar al nivel del elemento alineado en la cuadrícula o mosaicos que parecen más altos que la primera capa.
Para conectar otro Tilemap a la cuadrícula, haga clic derecho en el objeto del juego Grid y cree un nuevo Tilemap del tipo apropiado.
Para comenzar a dibujar en el nuevo Tilemap, regrese a la ventana Tile Palette y cambie Active Tilemap debajo de la barra de herramientas principal.
Agregar áreas elevadas
Hay dos formas principales de agregar áreas elevadas a los niveles. Elegir el correcto generalmente depende del tipo de Tilemap que seleccione. Consideraremos cada uno de los casos.
Además, hemos preparado un video corto sobre este tema, que demuestra estos enfoques utilizando el mapa de mosaico isométrico habitual, así como la adición de áreas de colisión a los mosaicos. Mire el video si desea comprender brevemente ambas formas:
Usando un mapa de mosaico isométrico regular
Para el mapa de mosaico isométrico normal, simplemente puede crear un nuevo mapa de mosaico con la misma cuadrícula y asignar un valor más alto a la orden en la capa. Luego puede cambiar el parámetro Tile Anchor para que la nueva capa esté anclada a un punto más alto en la misma cuadrícula.
Mi mapa de mosaico de nivel inferior para X e Y tiene el anclaje de mosaico establecido en (0, 0). Quiero que la nueva capa se dibuje una unidad más arriba, por lo que cambiaré el punto de anclaje del nuevo Tilemap a (1, 1). También estableceré Order in Layer en 1, uno más que el nivel base.
Ahora puede cambiar el mapa de mosaico activo a un segundo nivel de altura y comenzar a dibujar.
Usar Z como mapa de mosaico isométrico Y
A veces puede ser útil simular diferentes alturas con un solo mapa de mosaico. En tal caso, se pueden utilizar Z como Y Isometric Tilemap and Grid.
En el caso de Z como mapa de mosaico Y, el valor Z de cada mosaico tiene un efecto adicional en el orden en que se representan los mosaicos. Podemos cambiar el valor de los mosaicos Z al dibujarlos utilizando el parámetro de pincel de Posición Z en la parte inferior de la Paleta de mosaicos (así como utilizando las teclas de acceso rápido "+" y "-"):
Sin embargo, para que el valor Z influya correctamente y los mosaicos se ordenen correctamente, debe volver al valor Ordenar por eje personalizado y agregar la influencia Z. El número utilizado aquí está directamente relacionado con la forma en que Unity convierte las posiciones de las celdas de la cuadrícula isométrica en valores en el espacio mundial.
Por ejemplo, una cuadrícula con dimensiones según XYZ de (1, 0.5, 1) - estándar para isometría - tendrá un valor de clasificación a lo largo del eje Z igual a -0.26. Si está interesado en cómo se calcula este número, o si usa una cuadrícula con un tamaño de celda diferente, continúe leyendo para descubrir cómo encontrar el valor Z correcto para su caso.
Al establecer el valor correcto para la Clasificación del eje personalizado, puede comenzar a dibujar mosaicos con diferentes valores Z. También puede configurar los incrementos con los que el valor Z mueve los mosaicos elevados hacia arriba o hacia abajo, cambiando el tamaño Z de la cuadrícula, que es 1 de forma predeterminada.
Cálculo del valor Z
Hay una fórmula general que se puede usar para determinar el valor Z de la clasificación de ejes. Primero, toma el tamaño Y de la cuadrícula. Si aún no ha decidido el tamaño de Y, consulte la nota sobre la importación de activos más arriba. Multiplique este valor por -0.5 y reste otro 0.01.
De acuerdo con esta fórmula, una cuadrícula que tenga un tamaño de (1, 0.5, 1) nos dará un valor de clasificación por Z de -0.26. Con este valor de clasificación, los mosaicos de cualquier cuadrícula (1, 0.5, 1) se ordenarán correctamente.
Si desea saber más sobre este valor y sobre los cálculos, estudie la
documentación . Explica en detalle el trabajo de los renderizadores 2D y lo que sucede cuando las celdas isométricas se convierten en valores del espacio mundial.
Agregar colisiones
Ahora que hemos colocado algunas de las fichas sobre las otras, con la ayuda de colisiones podemos controlar las áreas que el jugador puede alcanzar y las transiciones entre ellas.
Hay muchas formas de agregar colisiones, pero en nuestro caso se requiere que el jugador se levante y caiga a lo largo de la pendiente, por lo que no es tan obvio qué objetos deberían tener colisionadores. Podemos establecer conflictos manualmente usando el Tilemap opcional.
En este proyecto, creamos varios sprites correspondientes a varias formas que definirán áreas de colisiones. Podemos dibujar estas formas en el tercer mapa de mosaico en lugares donde el jugador no puede pasar. Por ejemplo, queremos que un jugador pueda escalar una roca solo a lo largo de una pendiente y no subir directamente sobre ella.
También podemos agregar material único a Tilemap Renderer para darles a los azulejos un tono diferente y distinguirlos del resto del nivel.
Al colocar mosaicos de colisión, puede agregar el componente Collider de Tilemap a las colisiones de Tilemap. En este caso, para cada mosaico individual, los colisionadores se crean automáticamente, determinados por la forma del sprite.
Para optimizar el rendimiento, también puede agregar el componente 2D Composite Collider y marcar la casilla de verificación Utilizado por Composite para Tilemap Collider. Esto combinará todos los colisionadores individuales en una forma grande.
Agregar elementos
Agregar elementos a un nivel es bastante simple. Puede colocar manualmente sprites de elementos en cualquier punto deseado de la escena o adjuntar elementos a la cuadrícula de Tilemap, convirtiéndolos en mosaicos separados. Elija qué solución es mejor para usted.
En este proyecto, colocamos manualmente varios árboles en el nivel. Los árboles y el personaje tienen el mismo orden en la capa, lo que le permite ordenar dinámicamente el personaje delante y detrás de los árboles.
Usando el colisionador, puedes especificar el punto en el que el jugador puede acercarse al árbol. Esto también se puede hacer de varias maneras.
El primero se muestra en el video: simplemente adjunte un colisionador secundario al objeto y cambie su forma según sea necesario.
La segunda forma es establecer la
Forma de física personalizada para el objeto en el Editor de Sprite. Para abrir el Editor de Sprite, seleccione el objeto de Sprite y busque el botón del Editor de Sprite en el Inspector. En el menú desplegable superior izquierdo, cambie al editor de formas de física personalizadas. Aquí puede crear formas poligonales que definen los bordes del colisionador. Una vez establecida la forma física, puede adjuntar el componente Polygon Collider al objeto, y corresponderá a esta forma.
Si usa objetos como mosaicos en Tilemap, también puede usar el colisionador de Cuadrícula. Elija el activo de mosaico que coincida con el mosaico del elemento (si no recuerda dónde encontrarlo, consulte la sección "Proceso básico del mapa de mosaico"). Verá el menú Tipo de colisionador. Por defecto, un sprite se establece como el tipo, es decir, el colisionador generado automáticamente usará la Forma Física, de la que hablamos anteriormente. Si el tipo se establece en cuadrícula. entonces siempre coincidirá exactamente con la forma de la celda de malla a la que está unido el elemento. Quizás esta no sea la forma más precisa de implementar colisionadores, pero para algunos tipos de juegos puede ser útil.
Para usar colisionadores para estos mosaicos, seleccione el mapa de mosaico con objetos y agregue el componente Collider de mosaico.
Usar mosaicos de reglas
Los mosaicos de reglas son extremadamente útiles para automatizar el proceso de dibujo con mosaicos. Rule Tile funciona como un mosaico normal, pero tiene una lista adicional de opciones de mosaico.
Usando estos parámetros (reglas), un mosaico puede elegir automáticamente qué sprite dibujar dependiendo de los mosaicos vecinos.Los mosaicos de reglas son útiles cuando no desea seleccionar manualmente mosaicos con diferentes giros, por ejemplo, al crear una roca o plataforma. También se pueden usar para aleatorizar entre diferentes variaciones del mismo mosaico, para evitar patrones repetitivos e incluso para crear mosaicos animados.Los mosaicos de reglas isométricas y hexagonales están disponibles en el repositorio 2D Extras Unity en GitHub. También tiene muchos otros activos útiles de Tilemap que vale la pena explorar. Agregamos el kit de inicio isométricoal proyecto.Regla Azulejos para cada juego de fichas. Aquí hay algunos ejemplos de mosaicos de proyectos con los que puede experimentar:Trabajo adicional
Ahora que ha aprendido sobre el dispositivo de las tarjetas de fichas isométricas en Unity, descargue el proyecto del kit de inicio isométrico e intente trabajar con ellas usted mismo. Si eres un programador, entonces tienes la oportunidad de interactuar con Tilemap a través de scripts, puedes usarlo.Por ejemplo, al ver este video, puede aprender cómo implementar un controlador de caracteres simple compatible con Isometric Tilemap:Los gráficos para este proyecto fueron creados para Unity por @castpixel ; Sus otros trabajos se pueden ver aquí . Si desea obtener más información sobre la creación de juegos 2D en Unity, debe aprender algunos cursos excelentes en el sitio web de Learn . Si está buscando recursos adicionales para experimentar con mapas en mosaico, consulte la Tienda de activos de Unity .¿Es la primera vez que creas niveles con Tilemap? Aprende a construir mundos bidimensionales en este tutorial para principiantes de Unity Learn.