Mini Mapa simple en Unity

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.

juego en primera persona hecho en unity con mini mapa en la esquina superior derecha
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.

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

prefabricado de standard assets para controlar el jugador en primera persona
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.

archivos de descarga para el proyecto del mini mapa hecho en unity
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.

configuracion de imágenes como sprites en unity para admitir transparencia
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.

imágenes para usar como mascaras en unity
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.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 7: Creamos un GameObject tipo Canvas para los elementos de la interfaz gráfica.
escalador de canvas en unity utilizado para escalar los elementos de la interfaz grafica
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.

jerarquia de un prototipo en unity, mini mapa en unity
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.

inspector de un gameobject perteneciente a un prototipo en unity
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.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 11: Creamos otro GameObject tipo Image que va a servir de máscara para darle la forma al mini mapa.

inspector de un gameobject perteneciente a un prototipo en unity
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.

jerarquia de un prototipo en unity, mini mapa en unity
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.

inspector de un gameobject perteneciente a un prototipo en unity
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

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.

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

inspector de un gameobject perteneciente a un prototipo en unity
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.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 18: Configuración de la componente Rect Transform de la máscara.

inspector de un gameobject perteneciente a un prototipo en unity
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.

viernes de silueta en unity
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.

viernes de silueta en unity
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.

inspector de una camara en un prototipo de unity
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.

camara perspectiva en unity, objetos cercanos se ven mas grandes
Fig. 23: En la cámara perspectiva los objetos más cercanos se verán más grandes.

camara ortografica en unity, objetos se proyectan sobre el plano
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.

creacion de objeto render texture para un prototipo en unity
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.

inspector de un objeto render texture en unity
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.

inspector de una camara en un prototipo de unity
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.

inspector de un objeto raw image en un prototipo en unity
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.

viernes de silueta en unity, 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”.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 30: Creamos un 3D Text para colocar carteles en el mini mapa.

inspector de un objeto tipo text para un prototipo de unity
Fig. 31: Componente Text del texto 3D.

Colocamos el texto en algún lugar del escenario.

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

escena 3d hecha en unity, escenario y mini mapa
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.

creacion de nueva layer en un prototipo en unity
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.

creacion de nueva layer en un prototipo en unity
Fig. 35: Creamos una nueva capa llamada Mini Mapa.

asignacion de layer en un prototipo en unity
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.

culling mask para una camara en unity
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.

escenario simple para probar el mini mapa hecho en unity
Fig. 38: Al quitar la capa Mini Mapa de la lista el texto 3D ya no es visible para esa cámara.

escenario simple para probar el mini mapa hecho en unity
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.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 40: Arrastramos la silueta de Skinner a la jerarquía para crear un Sprite y nos aseguramos que sea hijo del personaje.

configuracion de sprite renderer para utilizar como icono en un mini mapa en unity
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.

viernes de silueta en unity
Fig. 42: Acomodamos la silueta arriba del personaje.

mini mapa hecho en unity con la forma de la silueta de skinner, icono para el 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.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 44: Para controlar la cámara con el Script que viene en la descarga la sacamos de entre los hijos del personaje.

inspector de un objeto camara para un prototipo hecho en unity
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.

mini mapa hecho en unity con la forma de la silueta de skinner, icono para el personaje
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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Secured By miniOrange