{ Hacer un MINIMAPA en Unity sin programar } Soluciones para Descargar

Introducción

En este artículo vamos a ver una forma simple de hacer un Mini Mapa en Unity que muestre una vista superior del escenario y siga al personaje. Para resolver esto no será necesario escribir código.

*Fig. 1: Esto es lo que conseguimos al final del artículo y el video.*

🟢 En el siguiente video explico cómo construir el minimapa para Unity y cómo funciona

Artículo: Cómo mostrar este Minimapa en un segundo monitor

Archivos de descarga:

A continuación puedes descargar un archivo para importar el paquete de Unity en tu proyecto.

Entre las descargas hay un par de archivos png para usar como máscaras, además hay un Script muy sencillo que hará que el objeto al que está asignado, siga la posición de otro objeto que queramos.

Si no tienes el paquete Standard Assets lo podés conseguir haciendo clic aquí.

Estado inicial del proyecto

Para comenzar hice un escenario simple y arrastré a la escena el prefabricado “FPSController” que es un controlador en primera persona, de esa forma al entrar en el modo juego ya tengo un prototipo armado.

*Fig. 2: Antes de empezar armé un escenario simple para que se vea en el mini mapa.*

*Fig. 3: Coloqué en la escena el prefabricado FPSController de Standard Assets.*

Vamos a importar los archivos que vienen dentro el ZIP de descarga, se trata de tres imágenes png para usar como máscara y un Script simple que vamos a aplicar al final como una segunda opción.

*Fig. 4: En el paquete de descarga vienen estos archivos, los importamos a Unity.*

Seleccionamos las tres imágenes y en el inspector las configuramos con el tipo Sprite, luego aplicamos los cambios.

*Fig. 5: Seleccionamos las tres imágenes y en el inspector las configuramos como Sprites y aplicamos.*

Esto permitirá utilizar estas imágenes en la interfaz gráfica y también hará que tengan transparencia, como observamos en la figura 6.

*Fig. 6: Ahora las imágenes tienen transparencia.*

Crear Mini Mapa en la interfaz gráfica

El mini mapa aparecerá como una imagen en la interfaz gráfica, esto significa que siempre estará visible por encima de la cámara del jugador.

Para empezar vamos a crear un objeto tipo Canvas y configurar el componente escalador de Canvas con la opción “Scale with Screen Size” y resolución 1920×1080. Esto hará que a distintas resoluciones el mini mapa tenga distintos tamaños.

*Fig. 7: Creamos un GameObject tipo Canvas para los elementos de la interfaz gráfica.*

*Fig. 8: Configuramos el Canvas Scaler como se observa para que los elementos se escalen automáticamente.*

Como hijo del Canvas vamos a crear un GameObject tipo Image que llamaremos “Fondo”, este objeto actuará como un recuadro para el mini mapa.

*Fig. 9: Creamos un GameObject tipo Image que va a actuar como el fondo del mini mapa.*

En la figura 10 podemos ver la configuración del componente imagen del fondo.

*Fig. 10: Componente Image del fondo del mini mapa.*

Luego como hijo del fondo vamos a crear otro GameObject tipo Image que llamaremos “Mascara”. A este objeto le vamos a asignar la componente “Mask” utilizando el botón Add Component en el inspector.

*Fig. 11: Creamos otro GameObject tipo Image que va a servir de máscara para darle la forma al mini mapa.*

*Fig. 12: Componente Image y Mask para enmascarar el mini mapa.*

Por último vamos a crear un GameObject tipo Raw Image que llamaremos MiniMapa, este objeto será el que finalmente muestre el mapa.

*Fig. 13: Creamos un GameObject tipo Raw Image que va a ser el que muestre el mapa.*

En la figura 14 vemos la componente Raw Image del GameObject MiniMapa.

*Fig. 14: Componente Raw Image del objeto mini mapa.*

Cámara del Mini Mapa

El mini mapa mostrará todo lo que esté viendo una segunda cámara que situaremos en lo alto mirando hacia abajo y configuraremos para que siga todo el tiempo los pasos del personaje.

Creamos el objeto Cámara y lo ponemos como hijo del GameObject FPSController que en mi caso es el personaje, dependiendo de tu proyecto deberías ponerla como hijo del objeto que la cámara tiene que seguir.

Es importante que sea hijo del personaje porque de esa forma seguirá todo el tiempo los movimientos del personaje. En la figura 15 se ve cómo debe quedar esta relación jerárquica

*Fig. 15: Creamos una segunda cámara y la posicionamos arriba del personaje apuntando hacia abajo.*

jerarquia de un prototipo en unity, mini mapa en unity — *Fig. 15: Creamos una segunda cámara y la posicionamos arriba del personaje apuntando hacia abajo.*

Ubicación y Forma del Mini Mapa

Ahora seleccionamos el GameObject Fondo de la figura 15 que contiene todos los elementos del mini mapa y lo situamos en donde nos guste dentro del Canvas.

*Fig. 16: Acomodamos el fondo en donde nos guste dentro del Canvas.*

*Fig. 17: Configuración de la componente Rect Transform del fondo.*

Dejo capturas de la configuración de las componentes RectTransform de los GameObjects “Fondo”, “Mascara” y “MiniMapa”. Lo que hice fue setear el ancho y el alto de las tres imágenes en 300 para el fondo y el mini mapa y 280 la máscara.

*Fig. 18: Configuración de la componente Rect Transform de la máscara.*

*Fig. 19: Configuración de la componente Rect Transform del mapa.*

Básicamente podemos hacer que nuestro Mini Mapa tenga la forma que queramos utilizando una máscara apropiada.

*Fig. 20: Al colocar un Sprite en la máscara, las partes con transparencia son eliminadas mientras que las partes blancas de la imagen quedan visible.*

*Fig. 21: Podemos asignar el mismo u otro Sprite que queramos para el fondo.*

Cámara Perspectiva y Ortográfica

Una alternativa interesante es configurar la cámara del mini mapa para que proyecte de manera ortográfica, como se ilustra en la figura 22, seteamos el modo Orthographic y en el valor Size ponemos 25 o el valor que queramos, este último parámetro hará que el mini mapa muestre más o menos área.

*Fig. 22: Configuramos la cámara como ortográfica con valor 25 en el parámetro Size.*

La diferencia que hay entre proyección perspectiva y ortográfica es que la primera tiene profundidad lo que nos permite percibir la tridimensionalidad en la imagen que vemos, esto hace que los objetos que estén más cercanos a la cámara se verán relativamente más grandes en comparación con los que estén más lejos.

En cambio en la perspectiva ortográfica todos los objetos se proyectan en el plano de la cámara.

En la figuras 23 y 24 vemos dos imágenes tomadas con la cámara y los objetos situados en la misma posición, pero en la primera la cámara es perspectiva y en la segunda ortográfica.

*Fig. 23: En la cámara perspectiva los objetos más cercanos se verán más grandes.*

*Fig. 24: En la cámara ortográfica los objetos se proyectan sobre el plano y objetos del mismo tamaño se ven iguales.*

Renderizar imagen sobre textura

Para mostrar lo que está viendo la cámara en la imagen del mini mapa usaremos un objeto llamado Render Texture.

*Fig. 25: En la carpeta del proyecto creamos un objeto tipo Render Texture.*

En el inspector de este objeto podemos setear el tamaño de la textura, mayor tamaño resultará en una mejor resolución para el mapa.

*Fig. 26: Podemos ajustar el tamaño de la textura lo que mejorará la resolución del mini mapa.*

Seleccionamos la cámara del mini mapa y en el campo “Target Texture” asignamos esta Render Texture, debería verse como en la figura 27.

*Fig. 27: Asignamos la Render Texture al campo “Target Texture” de la cámara del mini mapa.*

Luego vamos al GameObjec MiniMapa de la jerarquía (el que tenía asignada la componente Raw Image) y en el campo Texture de Raw Image asignamos la Render Texture.

*Fig. 28: En el componente Raw Image del mini mapa asignamos en “Texture” la Render Texture.*

En la figura 29 vemos que ahora el componente Raw Image muestra lo que está viendo la cámara del mini mapa.

*Fig. 29: Vemos que ahora la silueta de Skinner muestra una vista superior del escenario, lo cual funciona a modo de mapa.*

Carteles e Íconos en el mini mapa

Es común que los mini mapas nos muestre carteles o íconos con puntos de interés en el escenario.

Vamos a ver una forma de agregar estos elementos sin necesidad de programar.

Para empezar creamos un texto 3D y lo configuramos, en mi caso le escribo “Cuartel General”.

*Fig. 30: Creamos un 3D Text para colocar carteles en el mini mapa.*

*Fig. 31: Componente Text del texto 3D.*

Colocamos el texto en algún lugar del escenario.

*Fig. 32: Acomodamos el texto 3d en el escenario.*

*Fig. 33: La cámara del personaje puede ver el texto flotando.*

El problema con esto es que el jugador también puede ver el texto 3D flotando en el aire.

Para solucionar esto vamos a hacer uso de las Layers o capas, en el inspector de cualquier GameObject hacemos clic en el menú desplegable Layer y luego en Add Layer.

*Fig. 34: En el inspector hacemos clic en Layer y luego Add Layer para crear una nueva capa.*

Vamos a crear una nueva capa llamada Mini Mapa, luego seleccionamos el texto 3D y le asignamos la capa recién creada.

*Fig. 35: Creamos una nueva capa llamada Mini Mapa.*

*Fig. 36: Al texto 3D le asignamos la capa Mini Mapa recién creada.*

Ahora vamos a la cámara del personaje o la cámara que estemos utilizando para mostrar el juego y en el campo Culling Mask quitamos de la lista la capa Mini Mapa.

*Fig. 37: En la cámara del personaje, en el campo Culling Mask desmarcamos la capa Mini Mapa.*

En las figuras 38 y 39 vemos que la cámara del juego no ve el texto 3d flotando, pero en la cámara del mini mapa si se puede ver.

*Fig. 38: Al quitar la capa Mini Mapa de la lista el texto 3D ya no es visible para esa cámara.*

*Fig. 39: La cámara del mini mapa puede ver ese texto.*

El mismo principio podemos usar para colocar íconos en el escenario, utilizamos el GameObject tipo Sprite y lo configuramos a gusto.

*Fig. 40: Arrastramos la silueta de Skinner a la jerarquía para crear un Sprite y nos aseguramos que sea hijo del personaje.*

*Fig. 41: Configuramos el Sprite Renderer como nos guste.*

Para el ícono del personaje no debemos olvidar ponerlo como hijo del GameObject, de esta forma el ícono seguirá los pasos del personaje.

*Fig. 42: Acomodamos la silueta arriba del personaje.*

*Fig. 43: Ahora en donde está el personaje tendremos un ícono para identificarlo.*

Script

Por último podemos cambiar la manera en la que la cámara del mini mapa sigue al personaje. Con un Script podemos tener un mayor control sobre el mini mapa, implementar un zoom por ejemplo.

En las descargas hay un Script que se llama SeguirObjeto que hará este trabajo.

Para utilizarlo debemos sacar la cámara del mini mapa de entre los hijos del objeto personaje. Luego asignar el Script a la cámara, como se muestra en la figura 45.

El Script tiene un campo llamado Target que permite poner el objetivo al que la cámara va a seguir, en mi caso pongo el prefabricado del personaje. El Vector Offset permite setear la distancia a la que la cámara seguirá al personaje.

*Fig. 44: Para controlar la cámara con el Script que viene en la descarga la sacamos de entre los hijos del personaje.*

*Fig. 45: Agregamos a la cámara el Script y colocamos como objetivo el prefabricado del personaje y configuramos el offset.*

Utilizando este Script evitamos que el mini mapa gire junto con el personaje, ya que la cámara sólo copia los movimientos del jugador pero no el ángulo.

*Fig. 46: Con esto logramos que el mini mapa deje de girar junto con el personaje.*

Conclusión

Probando descubrí varias formas de resolver este problema, pero esta solución me pareció la mas interesante porque no requería de programación para funcionar.

Podemos resolver el problema usando sólo lo que nos ofrece Unity, pero para darle una forma circular por ejemplo vamos a necesitar una máscara como la que viene en los archivos de descarga.

El componente Render Texture nos permite renderizar en tiempo real lo que está viendo una de las cámaras.

Podemos añadir elementos indicativos al mini mapa como textos 3D e íconos y hacer que sólo una de las cámaras pueda verlos, para esto utilizamos las Layers o capas.

Dependiendo de las necesidades de nuestro proyecto esta solución nos puede servir o no, si necesitamos mostrar información más compleja en el mini mapa como rutas o la posibilidad de hacer zoom, vamos a tener que crear un Script y programar una solución a medida.

Mini Mapa simple en Unity