¿Qué estás buscando?
Hero background image
Cómo crear arte y jugabilidad con mapas de mosaicos 2D

Descubra cómo se utiliza el sistema Unity Tilemap en Happy Harvest, un juego de simulación agrícola de arriba hacia abajo en 2D de muestra creado con Unity 2022 LTS.

Encuentre estas técnicas, y muchas más para el arte y la animación, en el libro electrónico Arte, animación e iluminación de juegos 2D para artistas.

Lea los otros artículos de esta serie para aprender cómo replicar los efectos y visuales en Happy Harvest:

  1. Técnicas de luces y sombras 2D en Universal Render Pipeline
  2. Cómo animar personajes 2D en Unity 2022 LTS
  3. Efectos especiales 2D con VFX Graph y Shader Graph (disponibles próximamente)

DescargueHappy Harvest desde Unity Asset Store hoy.

Modo de sobregiro
Crea grandes paisajes con Unity Tilemap

El sistema Unity Tilemap te permite crear un mundo de juego utilizando mosaicos, que son pequeños objetos colocados en una cuadrícula. En lugar de diseñar un nivel como una imagen grande, puedes dividirlo en piezas parecidas a ladrillos que se repiten a lo largo de todo el nivel. Esto es especialmente útil para juegos con grandes áreas transitables, como un simulador o un juego de rol.

Los Tilemaps pueden ayudar a ahorrar tiempo en la creación de arte, así como también en el uso de memoria y CPU. Esto se debe a que los mosaicos se pueden representar mediante un renderizador dedicado y los mosaicos que no son visibles en la pantalla se pueden desactivar. Una herramienta de pincel hace que sea eficiente pintar mosaicos en una cuadrícula, y se pueden programar para que utilicen reglas de pintura. También vienen con generación automática de colisiones para pruebas y ediciones más eficientes.

Al crear hojas de mosaicos, es importante evitar combinar mapas de mosaicos en capas cuando no sean necesarios, ya que esto ayuda a reducir el sobredibujo. En Happy Harvest, todos los mapas de mosaicos se encuentran bajo Grid GameObject. Puedes ver cómo el mapa de mosaicos llamado GroundBasecontiene todas las ilustraciones del terreno. Todos estos mosaicos se agrupan al mismo tiempo configurando el modo de renderizado en Chunk en Tilemap Renderer. Esto puede ayudar a optimizar el rendimiento.

El camino de adoquines de la muestra podría haberse creado con capas de obras de arte en azulejos: Uno para el adoquín y otro para el césped. Esto puede parecer conveniente desde la perspectiva de la creación de arte, pero tendría menos rendimiento debido a las capas de píxeles superpuestos. Solo cree mapas de mosaicos separados cuando sea necesario, como en los casos en los que necesite planos de profundidad distintos.

Para obtener una introducción completa sobre cómo funciona el sistema Unity Tilemap, descargue el libro electrónico Arte, animación e iluminación de juegos 2D para artistas.

Diferentes hojas de mosaicos de naturaleza
Mapas de mosaicos en Happy Harvest

Los mosaicos en Happy Harvest se crearon en secciones, dando prioridad a los mapas de mosaicos que se usan ampliamente en el juego, como el camino principal o las zonas de césped. Estos mapas requieren más mosaicos porque se utilizan para crear caminos de diferentes formas. Por el contrario, los pinos del fondo, dispuestos como mapas de mosaicos de forma cuadrada, requieren menos mosaicos.

Generalmente, los accesorios que son verticales y se representan delante o detrás del personaje se separan en GameObjects en otra capa de clasificación. Sin embargo, GameObject Brush, una función incluida en el paquete 2D Tilemap Extras, se utiliza para colocar algunos de esos objetos, como vallas de madera, en una cuadrícula de Tilemap. Para distribuir estos accesorios en un patrón más orgánico, puedes colocarlos en un GameObject en la Jerarquía fuera del mapa de mosaicos.

Texturas secundarias para mapas de mosaicos.

Cada mapa de mosaicos en la carpeta Tilemaps tiene contrapartes llamadas texturas de mapas normales y de mapas de máscara. Estos comparten las mismas dimensiones y diseño, pero están pintados para mostrar la iluminación. Lea el artículo “Técnicas de luces y sombras 2D en Universal Render Pipeline” para saber cómo se creó la iluminación en la muestra.

Las texturas del mapa normal y del mapa de máscara se agregan a la textura principal del conjunto de mosaicos en el Editor de Sprite. En Happy Harvest, los mapas de máscaras se utilizan para crear efectos de silueta de luz de borde para el personaje y los accesorios. Sin embargo, dado que la mayoría de las losas se utilizan para el suelo, no necesitan una luz de borde. Es por eso que la mayor parte de la textura de este juego de azulejos es negra, para evitar reflejar la luz creada para el efecto de borde. Una excepción son las tejas de construcción utilizadas para los tejados, donde se resaltan los bordes de estas tejas.

Ejemplo de mosaicos de ruta
Rule Tile para el diseño del entorno.

La herramienta Tile Palette se utiliza en Happy Harvest para llenar de manera eficiente la cuadrícula de cada mapa de mosaicos con mosaicos. Colocar manualmente los bordes o esquinas de las formas del camino puede llevar mucho tiempo y ser propenso a errores. Deberá repetir el trabajo manual cada vez que realice cambios en el trazado o en cualquier otra forma basada en mosaicos. Puede utilizar la función Mosaico de reglas para evitar esto.

Rule Tile pinta los mosaicos de borde correctos según los mosaicos vecinos de la forma. En la carpeta del proyecto de Happy Harvest, encontrará una paleta de mosaicos llamada Palette_Tiles. La primera fila de la paleta contiene mosaicos de uso frecuente, como el parche de tierra con césped. Estas son fichas de reglas. Seleccione GameObject en el Inspector para mostrar el activo en la vista Proyecto. Luego puede seleccionar este activo para ver la configuración de este mosaico de reglas.

Si corresponde a su proyecto, puede ahorrar tiempo reutilizando estos recursos de mosaico o pintando sobre las texturas.

Múltiples mapas de mosaicos en una escena de mapa
Estructura de mapa de mosaicos en Happy Harvest

Todos los mosaicos de la muestra tienen el mismo tamaño y forma y están contenidos en el mismo Grid GameObject. Esto ayuda a mantener baja la cantidad de mapas de mosaicos. Un componente llamado Terrain Manager está adjunto al Grid GameObject, lo que proporciona posibilidades de juego que explicamos en la siguiente sección.

Algunos de los mapas de mosaicos bajo Grid GameObject incluyen:

  • UnderwaterTiles: Se utilizan para losas submarinas, para el acantilado y como terreno verde para la zona del estanque.

  • Agua: Estos mosaicos utilizan un sombreador diferente a los demás llamado Sprite-Lit-Material, que está creado en Shader Graph para simular la animación del agua.

  • GroundBase: Esta es la obra de arte del suelo que comprende mosaicos para los caminos, pasto, barro y piedra para llenar los espacios de los mosaicos de elevación.

  • ObjectsInTiles: Esto se usa para GameObjects pintados en un mapa de mosaicos con el pincel GameObject de la paleta de mosaicos, como las vallas.

  • TilledTilemap: Estos mosaicos se utilizan en el código para detectar mosaicos donde se pueden plantar semillas.

  • WateredTileLayer: La lógica del juego utiliza esto para hacer que las fichas parezcan mojadas. Cuando las baldosas se secan, se retiran las baldosas "mojadas".

  • Almacén, Casa: Estos mapas de mosaicos se utilizan para crear el almacén y la casa. La creación de los edificios con mapas de mosaicos le dio al artista la flexibilidad de remodelarlos y cambiar su tamaño de manera más eficiente, y ahorrar espacio en la textura, ya que partes del edificio usan la misma textura.

  • Cultivo: Esto agrupa todas las plantas bajo un GameObject y también lo utiliza el Terrain Manager.
Ejemplo de administrador de terreno
API Tilemap para juegos

El script Terrain Manager adjunto al Grid GameObject maneja los cambios de mosaicos y utiliza mosaicos para realizar un seguimiento de los cultivos. Utiliza la API Tilemap, que puede resultar útil para configurar un juego basado en cuadrículas, ayudándote a identificar más fácilmente la posición de los elementos en 2D.

Esta clase MonoBehaviour crea dos clases genéricas llamadas GroundData y CropData. Incluyen variables relacionadas con el juego, como el tiempo que las fichas aparecen mojadas, la rapidez con que crece una planta o cuánto tiempo permanece sin cosechar antes de morir.

El script Terrain Manager hace referencia a los mapas de mosaicos y mosaicos que se utilizan con fines de juego, incluidos:

  • Mapa de mosaicos de tierra: Esto hace referencia al mapa de mosaicos que contiene mosaicos de suelo que indican dónde el jugador puede cavar y plantar semillas. Si excavas en cualquier mosaico fuera de este mapa de mosaicos, no sucederá nada.

  • Mapa de mosaicos de cultivos: Esto hace referencia al Tilemap GameObject que es el objeto principal de los cultivos. El uso de la API Tilemap aquí le permite colocar, actualizar y eliminar mosaicos recortados.

  • Water Tilemap: Úselo para pintar sobre las losas de tierra labrada con agua simulada, comunicando visualmente al jugador que estas losas están listas para plantar y crecer.

  • Azulejo regado: Este es un mosaico de anulación de reglas con el gráfico de agua, que le permite crear mosaicos con variaciones de un mosaico de reglas sin establecer nuevas reglas.

  • Baldosa cultivable: Esto se usa para identificar fichas que el jugador puede usar para excavar.

  • Azulejo embaldosado: Este es el mosaico de reglas utilizado para pintar la imagen del suelo labrado.

El script Terrain Manager incluye funciones que utilizan la API Tilemap para leer información de mosaicos en un formato de ubicación Vector3int y actualizar los mosaicos en consecuencia. Esas funciones se llaman desde las diferentes herramientas cuando PlayerController activa la función en ellas.

Ejemplo de sangrado
Evite el sangrado de textura en mapas de mosaicos

Para garantizar una apariencia visual atractiva, querrá evitar la aparición de sangrado o pequeños espacios entre los mosaicos debido a la interpolación y el suavizado de bordes. Esto es algo que no sucede en los juegos de pixel art, en los que los sprites no se suavizan, ya que su Modo de filtro está configurado en Punto (sin filtro). En Happy Harvest, los sprites de mosaicos están equipados con Sprite Atlas , que proporciona una mejor organización, rendimiento y control del proyecto a través de una configuración sencilla.

Si no está utilizando una hoja de mosaico, se recomienda usar Sprite Atlas para ayudar con las uniones y la clasificación interna en Tilemap Renderer. Algunas configuraciones predeterminadas funcionan para la mayoría de los sprites, pero los mapas de mosaicos pueden requerir algunos ajustes. Funciones como evitar la rotación de los sprites cuando están empaquetados o la dilatación alfa ayudan a que los mosaicos mantengan bordes más nítidos.

Portada del libro electrónico Arte, animación e iluminación de juegos 2D para artistas
Más recursos

Aprender a crear mosaicos que se conecten perfectamente, evitar repeticiones y mantener la escena legible puede ser una experiencia de prueba y error. Obtenga más información sobre el sistema Tilemap en el libro electrónico Arte, animación e iluminación de juegos 2D para artistas.

Las siguientes publicaciones de blog destacan juegos 2D retro creados con Unity y brindan más consejos de desarrollo 2D:

Además, echa un vistazo a nuestras otras demostraciones en 2D, The Lost Crypt y Dragon Crashers.

Encontrarás más recursos para programadores, artistas, artistas técnicos y diseñadores avanzados en el centro de mejores prácticas de Unity.

¿Te gustó este contenido?