Flujo de trabajo de activos de mapas de mosaicos 2D: De la imagen al nivel
En Unity 2017.2, presentamos una nueva incorporación al conjunto de funciones 2D: ¡Mapas de mosaicos! Usando Tilemaps, puedes diseñar y crear rápidamente niveles 2D usando una combinación de Sprites y GameObjects, y tener control sobre propiedades tales como ordenamiento de capas, colisionadores de mapas de mosaicos, mosaicos animados y más. En esta publicación de blog, explicaré el flujo de trabajo completo, desde la importación de su archivo de imagen a Unity hasta un nivel diseñado para un juego de plataformas 2D.
A modo de resumen, el flujo de trabajo se puede resumir de la siguiente manera, con cada elemento relacionado con un activo o un componente en el Editor de Unity :
Sprite -> Mosaico -> Paleta -> Pincel -> Mapa de mosaicos
Desde el punto de vista de la No Unidad, estos términos podrían parecer un poco abstractos. Imagínese el proceso de una pintura real sobre un lienzo real:
Color -> Pintura -> Paleta de mosaicos -> Pincel -> Lienzo
¡Hay una lógica similar para cada paso del proceso e incluso nombres similares para cada paso!
Para esta publicación, utilizaré esta imagen 'GrassPlatform_TileSet' como ejemplo principal:
El resultado final es un nivel construido con estas piezas en el que un personaje 2D puede correr como si fuera un 'nivel':
La importación de una imagen a Unity se puede realizar de varias maneras:
- Guardar el archivo de imagen deseado en la carpeta 'Activos' del proyecto.
- Desde el menú superior, seleccionando ‘Activos -> Importar nuevo activo’ y luego seleccionando el archivo deseado.
- Arrastrar el archivo de imagen desde el explorador de archivos a la "Ventana del proyecto" en el editor de Unity (¡esta es probablemente la forma más fácil!)
Una vez que la imagen se importa a su proyecto, sus configuraciones de importación de tipo de textura predeterminadas se definen según el modo de comportamiento en el que se encuentra configurado actualmente su proyecto: 2D o 3D.
Este modo se configura originalmente cuando se crea un nuevo proyecto:
O se puede cambiar desde la Configuración del editor:
Como mi proyecto ya está configurado para el modo de comportamiento 2D, entonces 'GrassPlatform_TileSet' se importará automáticamente con el tipo de textura 'Sprite (2D y UI)', que es la configuración que el activo Tile requerirá para hacer referencia al Sprite.
Como 'GrassPlatform_TileSet' es una serie de sprites en una imagen, necesitaremos dividirlo en sprites individuales; esto se puede hacer configurando el Modo de Sprite de 'Único' a 'Múltiple' y abriendo el Editor de Sprites:
La ventana del Editor de Sprites te permite "cortar" una imagen en múltiples sprites; de esta manera puedes trabajar en una hoja de sprites en el software de edición de imágenes que desees y definir qué áreas de la imagen se tratan como sprites "individuales" directamente en Unity. ¡No es necesario hacer malabarismos y administrar cientos de archivos de imágenes individuales!
Como 'GrassPlatform_TileSet' es una imagen compuesta de una serie de mosaicos, podemos usar la configuración de corte de cuadrícula del editor de sprites para dividir automáticamente la imagen en múltiples sprites. Las dimensiones de cada 'mosaico de celda' en este conjunto de mosaicos son 64 píxeles por 64 píxeles, por lo que podemos ingresar estas configuraciones y dejar que el Editor de sprites genere automáticamente los fragmentos de sprites requeridos:
¡Y después de hacer clic en el botón "Cortar", ahora tenemos un conjunto de sprites cortados!
En la ventana del Editor de sprites, cada sprite cortado se puede seleccionar y editar. Por ejemplo, puedes establecer nombres para cada sprite e incluso modificar manualmente valores como la posición y los pivotes.
Luego debemos 'Aplicar' los cambios al recurso Sprite (haciendo clic en el botón 'Aplicar' cerca de la esquina superior derecha del Editor Sprite), lo que nos permitirá hacer referencia a cada sprite cortado individualmente en la ventana Proyecto:
Ahora que nuestra hoja de sprites se ha dividido en sprites individuales, ahora debemos "convertirlos" en mosaicos.
El mosaico es un activo completamente nuevo agregado en Unity 2017.2. Su propósito es almacenar datos para que el mapa de mosaicos los utilice en una celda específica de la cuadrícula.
El activo Tile predeterminado base (que se puede generar desde 'Crear -> Tile' en la ventana Proyecto) permite asignarle un Sprite y también otras personalizaciones como el Tinte del Sprite y el tipo de Collider que usaría en el Tilemap (que se explicará más adelante).
¡Unity 2017.2 presenta una nueva ventana: la paleta de mosaicos! Esta ventana es fundamental para utilizar el nuevo sistema Tilemap, ya que actúa como una interfaz para seleccionar qué Tiles utilizar y cómo se editará el Tilemap con ellos.
Antes de que podamos agregar el mosaico 'TopGrassTile' a la ventana Paleta de mosaicos, primero debemos crear una nueva paleta. Las paletas se pueden utilizar para organizar sus conjuntos de mosaicos en lugar de "almacenarlos" todos (¡podrían ser cientos o más!) en un espacio de trabajo en la ventana.
En el menú desplegable Paleta hay una opción para crear una paleta completamente nueva:
¡Es tan simple y fácil como arrastrar y soltar para agregar 'TopGrassTile' a esta paleta recién creada!
Sin embargo, en algunas situaciones podríamos estar trabajando con cientos y cientos de Sprites que construyen nuestra escena 2D. Sería una tarea que llevaría mucho tiempo crear manualmente un recurso de mosaico para cada uno de estos Sprites y luego arrastrar y soltar cada uno individualmente en la Paleta.
Afortunadamente, existe un flujo de trabajo que se puede usar para generar automáticamente un conjunto de mosaicos (uno para cada sprite) y asignarlos todos a la paleta deseada. ¡Y además es tan simple y fácil como arrastrar y soltar! En lugar de arrastrar un activo de mosaico a la paleta, arrastre la hoja de sprites de origen que contiene los sprites cortados. En este caso, 'GrassPlatform_TileSet':
Ahora que nuestra hoja de sprites 'GrassPlatform_TileSet' está configurada correctamente en la ventana Paleta de mosaicos, ¡es hora de comenzar a construir un nivel 2D!
Para comenzar, necesitamos crear un nuevo 'Tilemap' en nuestra escena actual; esto se puede hacer desde el menú desplegable 'GameObject -> Objetos 2D -> Tilemap'. Sin embargo, esto no solo crea un GameObject 'Tilemap' (con componentes relacionados) sino también un GameObject 'Grid' del cual el GameObject Tilemap es automáticamente un hijo.
La estructura de GameObject más similar a la configuración 'Cuadrícula <-> Mapa de mosaicos' es el sistema de interfaz de usuario de Unity; donde el GameObject padre Canvas actúa como un contenedor de diseño para todos sus GameObjects de interfaz de usuario secundarios (como texto e imágenes). El GameObject 'Grid' utiliza el componente 'Grid' para definir las dimensiones de todos sus GameObjects Tilemap secundarios. Hay opciones que permiten cierta personalización en el diseño:
Luego, el componente Tilemap y el componente Tilemap Renderer construyen el GameObject secundario Tilemap; el primero contiene los datos de los mosaicos pintados en él y el segundo define las configuraciones visuales de cómo se representa.
El sistema Tilemap ha sido diseñado para que varios GameObjects Tilemap puedan ser hijos de la misma cuadrícula, lo que significa que el resultado final de tu nivel puede componerse fácilmente mediante múltiples capas de diferentes Tiles:
Cada renderizador de mapas de mosaicos le brinda control sobre el material utilizado para renderizar sus mosaicos, la capa de clasificación que utiliza (que es el mismo sistema de capas que utilizan los renderizadores de sprites, los lienzos de interfaz de usuario y los sistemas de partículas) y también cómo reacciona a la máscara de sprite.
Antes de poder pintar mosaicos en el mapa de mosaicos, se deben seleccionar dos cosas: qué mapa de mosaicos está enfocado actualmente y qué pincel está en uso actualmente.
El primero se puede elegir desde el menú desplegable 'Mapa de mosaicos activo' en la ventana Paleta de mosaicos debajo de Opciones de edición:
Esta lista desplegable mostrará todas las instancias del componente 'Tilemap' en la escena y le permitirá seleccionar una para pintarla y editarla. La captura de pantalla anterior solo muestra una opción 'Tilemap', y lleva el nombre del GameObject Tilemap predeterminado, mientras que una escena más compleja con múltiples Tilemaps podría mostrar una lista de posibles Tilemaps activos como esta:
Para el ejemplo 'GrassPlatform_TileSet', al cambiar el nombre del GameObject "Tilemap" para que sea más preciso, también se actualizarán los nombres de la lista de Tilemap activos:
Lo siguiente que debemos seleccionar es el Pincel actual. Mientras que el activo Tile determina qué datos contendrá una celda (elementos visuales, tipo de colisionador, etc.), un activo Brush define cómo se colocará un Tile (o Tiles) en un Tilemap. Actualmente, Unity solo tiene un pincel incorporado (llamado 'Pincel predeterminado') para seleccionar; y tiene la funcionalidad esperada de su nombre, como colocar, borrar, mover y rellenar mosaicos en el mapa de mosaicos. Sin embargo, en el GitHub del equipo de Unity Technologies hay un repositorio de extras 2D que tiene una variedad de ejemplos de cómo puedes crear tus propios pinceles y mosaicos personalizados. Una vez que estos se importen a su proyecto, el menú Pincel actual (en la parte inferior de la ventana Paleta de mosaicos) le permitirá elegir qué pincel usar:
Si bien este artículo no profundiza en el uso de pinceles y mosaicos programables, es un área muy poderosa para estudiar e integrar en su conjunto de herramientas de diseño de niveles basado en mapas de mosaicos.
Con el Mapa de mosaicos activo y el Pincel actual establecidos, podemos seleccionar un mosaico específico, en la ventana Paleta de mosaicos, y luego pintarlo en el Mapa de mosaicos en la Escena. También deberá asegurarse de que el ícono "Pincel" en las Herramientas de edición también esté seleccionado:
¡Éxito! ¡Se están pintando mosaicos en el mapa de mosaicos! Sin embargo, es posible que notes que los mosaicos son ligeramente más pequeños que el tamaño de las celdas de la cuadrícula. Esto no es un error, pero debemos dar un paso atrás para explicar por qué y cómo puedes cambiar el valor predeterminado.
El tamaño de celda del componente Cuadrícula utiliza las unidades de distancia del espacio mundial de Unity (por ejemplo, un cubo primitivo de Unity con una escala predeterminada de 1 para cada eje tendrá el mismo tamaño que una celda en la Cuadrícula predeterminada). Cada recurso de Sprite tiene un valor de píxeles por unidad en su configuración de importación, siendo el valor predeterminado 100:
