Hoy vamos a ver cómo crear mapas 2D compuestos de mosaicos. Puede pensar en los mosaicos como bloques de lego reutilizables como sprites que se ensamblan para crear un mapa más detallado. Los mosaicos se almacenan en una estructura de datos llamada conjunto de mosaicos, donde se pueden agregar detalles de colisión. Estos mosaicos y conjuntos de mosaicos se utilizan luego para «pintar» escenas 2D en algo llamado mapa de mosaicos. Un mapa de mosaicos en sí mismo puede contener múltiples capas de mosaicos apilados uno encima del otro. No te preocupes, tendrá sentido una vez que saltemos.

¡ADVERTENCIA!

Cuando escribí este tutorial, la mayoría de las funciones que cubro se encuentran actualmente en un desarrollo muy activo. Para seguir este tutorial, debe tener instalada la versión 4.8. Actualmente, la versión 4.8 solo se encuentra en versión preliminar; espero que se lance pronto y pueda eliminar este mensaje. Sin embargo, por ahora, si desea trabajar con mapas de mosaicos 2D con datos de colisión, debe instalar la versión de desarrollo. Para obtener detalles sobre cómo hacer esto, por favor lee esta publicación.

Entonces, en este punto, supongo que tiene la descarga de la vista previa para desarrolladores, ha transcurrido suficiente tiempo para que esta funcionalidad esté en la versión principal o simplemente está leyendo para futuras referencias. Todos los descargos de responsabilidad fuera del camino, ¡saltemos!

Hay una versión en video HD de este tutorial disponible aquí: [Coming Soon].

Creación de un conjunto de fichas

Primero comience cargando una textura de hoja de sprite en Unreal Engine, detalles de cómo cargar un sprite están disponibles aquí.

Para este ejemplo en particular, necesitamos algunos mosaicos con los que trabajar. En lugar de crear mis propias hojas de sprites, usaré algunos de los gráficos gratuitos que Kenney.nl pone a disposición, en concreto, la Paquete de plataforma. Obviamente, puede usar cualquier imagen que desee, solo asegúrese de que los mosaicos tengan el mismo tamaño e, idealmente, que su imagen tenga un tamaño de potencia de dos.

Importa la hoja de sprites que vas a usar para tus mosaicos, en mi caso seleccioné Spritesheets/spritesheet_suelo.png. Realice los cambios que desee en la textura, como deshabilitar mipmaps y cambiar el filtrado al más cercano.

Ahora haga clic derecho en su textura recién creada y seleccione Acciones de Sprite->Crear mosaico:

Esto creará un objeto TileSet, haga doble clic en él para abrir el editor.

Debería aparecer el editor de TileSet:

En el lado izquierdo están todos los mosaicos que están en tu sprite importado. Seleccionar uno lo hará visible en la ventana superior derecha. La ventana inferior derecha tiene propiedades para todo el conjunto de texturas. Lo más importante que debe configurar de inmediato es el tamaño del mosaico:

Aquí ingresa las dimensiones en píxeles de cada mosaico individual dentro de su imagen. En la hoja de sprites de Kenney.nl, cada mosaico tiene un tamaño de 128 × 128. Las configuraciones restantes son para conjuntos de fichas que tienen espacios entre las fichas y no son aplicables en este caso. Tanto la ventana izquierda como la superior derecha se pueden ampliar y desplazar usando los comandos regulares.

Ahora veamos cómo configurar formas de colisión para algunos mosaicos. Primero seleccione un mosaico del lado izquierdo, así:

Un rectángulo blanco rodeará el mosaico seleccionado. Ahora aparecerá en la ventana superior derecha:

Ahora podemos definir formas delimitadoras usando la barra de herramientas:

En este caso, un cuadro simple es el más fácil (y el que requiere menos procesamiento). Haga clic en Agregar cuadro:

Esto ahora hará que toda la superficie provoque una colisión. Para mosaicos sin forma de caja, a menudo querrá usar la opción Agregar polígono en su lugar, luego defina el límite de colisión en consecuencia, así:

Simplemente haga clic en cada vértice que desee crear. Una vez hecho esto, presione enter para terminar su forma. Puede cambiar el clic para agregar nuevos puntos a una forma existente.

Repita esta acción para cada mosaico que tenga datos de colisión. Si un sprite puede pasar completamente a través del sprite sin colisión, no necesita proporcionar una forma de colisión en absoluto. Repita este paso para cada ficha de su conjunto con la que se pueda colisionar.

Puede verificar fácilmente para qué mosaicos ha definido una forma de colisión haciendo clic en Mosaicos en colisión:

Cuando haya terminado, haga clic en Guardar y acabamos de crear nuestro primer TileSet.

Creación de un mapa de mosaicos

Ahora es el momento de crear un Tilemap. Para crear un mapa de mosaicos, seleccione Agregar nuevo –>Paper2D->Mapa de mosaicos

Esto creará un nuevo objeto de mapa de mosaico. Haga doble clic en él para que aparezca el editor de mapas de mosaicos.

Aquí está el editor de mapas de mosaicos en acción:

En el lado izquierdo hay una selección de fichas con las que puedes pintar. En el medio está el lienzo en el que pinta, mientras que a la derecha están los controles de capa y las propiedades de la capa. Hay un par de cosas críticas que debe configurar de inmediato.

Primero seleccione su conjunto de fichas. En el lado izquierdo, despliegue el cuadro de diálogo Conjunto de mosaicos activos (presione el icono de cuadrícula) y seleccione el conjunto de mosaicos que acabamos de crear.

Ahora, en las propiedades de la capa, establecemos el tamaño de nuestros mosaicos y el ancho y alto general de nuestra capa (en mosaicos):

Comience seleccionando un mosaico base para llenar todo el mapa, seleccione el modo de archivo y luego haga clic en algún lugar dentro de la cuadrícula del mapa, así:

Seleccione mosaico base:

Elija Relleno:

Y haga clic en:

Ahora seleccione un mosaico individual para pintar, haga clic en Pintar, luego dibújelo en el mapa, así:

Muy a menudo querrá que los mosaicos aparezcan «sobre» otros mosaicos. Esto se puede lograr usando capas. Para agregar una capa, simplemente haga clic en el botón Agregar nueva capa:

El orden en que se dibujan las capas es el mismo que se muestran:

Puede usar los iconos arriba y abajo para cambiar el orden de las capas. La capa seleccionada (la resaltada) es la capa en la que se producirán todos los dibujos.

Agregar su mapa de mosaicos a la escena

Ahora que ha creado su mapa, puede usarlo como lo haría con cualquier objeto Sprite. Simplemente arrástralo a tu escena:

La posición del mapa de mosaicos es importante, el valor de Y determinará qué se dibujará encima o debajo al dibujar la escena, al igual que con los sprites. Sin embargo, en este caso, a veces querrás colocar tu sprite frente al fondo, pero detrás de una capa de primer plano, así:

Esto se hace usando una propiedad llamada Separación por capa en los detalles de Tilemap.

Esta es la coordenada Y (confusamente llamada orden Z en la información sobre herramientas) de la capa dentro del mundo del juego. Por ejemplo, si coloca su mapa de mosaicos en Y= –10 y establece la Separación por capa en 50, la primera capa estará en Y=40, la segunda en Y=90, etc. Por lo tanto, un sprite en 0 se dibujará frente al capa inferior, pero detrás de la capa superior.

Si desea ver un ejemplo más detallado que muestre las colisiones en acción, asegúrese de ver la versión en video de este tutorial.

---