Mini Mapa simple en Unity

Introducción

En este artícu­lo vamos a ver una for­ma sim­ple de hac­er un Mini Mapa en Uni­ty que muestre una vista supe­ri­or del esce­nario y siga al per­son­aje. Para resolver esto no será nece­sario escribir código.

juego en primera persona hecho en unity con mini mapa en la esquina superior derecha
Fig. 1: Esto es lo que con­seguimos al final del artícu­lo y el video.

En el sigu­iente video expli­co cómo con­stru­ir el min­ima­pa para Uni­ty y cómo funciona.

🟢 Mini Mapa sim­ple en Uni­ty
 

Artícu­lo: Cómo mostrar este Min­ima­pa en un segun­do monitor

Archivos de descarga:

Entre las descar­gas hay un par de archivos png para usar como más­caras, además hay un Script muy sen­cil­lo que hará que el obje­to al que está asig­na­do, siga la posi­ción de otro obje­to que queramos.

Mini mapa sim­ple en Unity

Si no tenés el paque­te Stan­dard Assets lo podés con­seguir hacien­do clic aquí.

Estado inicial del proyecto

Para comen­zar hice un esce­nario sim­ple y arras­tré a la esce­na el pre­fab­ri­ca­do "FPSCon­troller" que es un con­tro­lador en primera per­sona, de esa for­ma al entrar en el modo juego ya ten­go un pro­totipo armado.

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

prefabricado de standard assets para controlar el jugador en primera persona
Fig. 3: Colo­qué en la esce­na el pre­fab­ri­ca­do FPSCon­troller de Stan­dard Assets.

Vamos a impor­tar los archivos que vienen den­tro el ZIP de descar­ga, se tra­ta de tres imá­genes png para usar como más­cara y un Script sim­ple que vamos a aplicar al final como una segun­da opción.

archivos de descarga para el proyecto del mini mapa hecho en unity
Fig. 4: En el paque­te de descar­ga vienen estos archivos, los impor­ta­mos a Unity.

Selec­cionamos las tres imá­genes y en el inspec­tor las con­fig­u­ramos con el tipo Sprite, luego apli­camos los cambios. 

configuracion de imágenes como sprites en unity para admitir transparencia
Fig. 5: Selec­cionamos las tres imá­genes y en el inspec­tor las con­fig­u­ramos como Sprites y aplicamos.

Esto per­mi­tirá uti­lizar estas imá­genes en la inter­faz grá­fi­ca y tam­bién hará que ten­gan trans­paren­cia, como obser­va­mos en la figu­ra 6.

imágenes para usar como mascaras en unity
Fig. 6: Aho­ra las imá­genes tienen transparencia.

Crear Mini Mapa en la interfaz gráfica

El mini mapa apare­cerá como una ima­gen en la inter­faz grá­fi­ca, esto sig­nifi­ca que siem­pre estará vis­i­ble por enci­ma de la cámara del jugador.

Para empezar vamos a crear un obje­to tipo Can­vas y con­fig­u­rar el com­po­nente escal­ador de Can­vas con la opción "Scale with Screen Size" y res­olu­ción 1920x1080. Esto hará que a dis­tin­tas res­olu­ciones el mini mapa ten­ga dis­tin­tos tamaños.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 7: Creamos un GameOb­ject tipo Can­vas para los ele­men­tos de la inter­faz gráfica.
escalador de canvas en unity utilizado para escalar los elementos de la interfaz grafica
Fig. 8: Con­fig­u­ramos el Can­vas Scaler como se obser­va para que los ele­men­tos se escalen automáticamente.

Como hijo del Can­vas vamos a crear un GameOb­ject tipo Image que lla­mare­mos "Fon­do", este obje­to actu­ará como un recuadro para el mini mapa.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 9: Creamos un GameOb­ject tipo Image que va a actu­ar como el fon­do del mini mapa.

En la figu­ra 10 podemos ver la con­fig­u­ración del com­po­nente ima­gen del fondo. 

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 10: Com­po­nente Image del fon­do del mini mapa.

Luego como hijo del fon­do vamos a crear otro GameOb­ject tipo Image que lla­mare­mos "Mas­cara". A este obje­to le vamos a asig­nar la com­po­nente "Mask" uti­lizan­do el botón Add Com­po­nent en el inspector.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 11: Creamos otro GameOb­ject tipo Image que va a servir de más­cara para dar­le la for­ma al mini mapa.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 12: Com­po­nente Image y Mask para enmas­carar el mini mapa.

Por últi­mo vamos a crear un GameOb­ject tipo Raw Image que lla­mare­mos Min­iMa­pa, este obje­to será el que final­mente muestre el mapa.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 13: Creamos un GameOb­ject tipo Raw Image que va a ser el que muestre el mapa.

En la figu­ra 14 vemos la com­po­nente Raw Image del GameOb­ject MiniMapa.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 14: Com­po­nente Raw Image del obje­to mini mapa.



Cámara del Mini Mapa

El mini mapa mostrará todo lo que esté vien­do una segun­da cámara que situ­are­mos en lo alto miran­do hacia aba­jo y con­fig­u­raremos para que siga todo el tiem­po los pasos del personaje.

Creamos el obje­to Cámara y lo ponemos como hijo del GameOb­ject FPSCon­troller que en mi caso es el per­son­aje, depen­di­en­do de tu proyec­to deberías pon­er­la como hijo del obje­to que la cámara tiene que seguir.

Es impor­tante que sea hijo del per­son­aje porque de esa for­ma seguirá todo el tiem­po los movimien­tos del per­son­aje. En la figu­ra 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 segun­da cámara y la posi­cionamos arri­ba del per­son­aje apun­tan­do hacia abajo.

Ubicación y Forma del Mini Mapa

Aho­ra selec­cionamos el GameOb­ject Fon­do de la figu­ra 15 que con­tiene todos los ele­men­tos del mini mapa y lo situ­amos en donde nos guste den­tro del Canvas.

canvas en unity
Fig. 16: Aco­modamos el fon­do en donde nos guste den­tro del Canvas.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 17: Con­fig­u­ración de la com­po­nente Rect Trans­form del fondo.

Dejo cap­turas de la con­fig­u­ración de las com­po­nentes Rect­Trans­form de los GameOb­jects "Fon­do", "Mas­cara" y "Min­iMa­pa". Lo que hice fue setear el ancho y el alto de las tres imá­genes en 300 para el fon­do y el mini mapa y 280 la máscara.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 18: Con­fig­u­ración de la com­po­nente Rect Trans­form de la máscara.

inspector de un gameobject perteneciente a un prototipo en unity
Fig. 19: Con­fig­u­ración de la com­po­nente Rect Trans­form del mapa.

Bási­ca­mente podemos hac­er que nue­stro Mini Mapa ten­ga la for­ma que quer­amos uti­lizan­do una más­cara apropiada.

viernes de silueta en unity
Fig. 20: Al colo­car un Sprite en la más­cara, las partes con trans­paren­cia son elim­i­nadas mien­tras que las partes blan­cas de la ima­gen quedan visible.

viernes de silueta en unity
Fig. 21: Podemos asig­nar el mis­mo u otro Sprite que quer­amos para el fondo.

Cámara Perspectiva y Ortográfica

Una alter­na­ti­va intere­sante es con­fig­u­rar la cámara del mini mapa para que proyecte de man­era ortográ­fi­ca, como se ilus­tra en la figu­ra 22, seteamos el modo Ortho­graph­ic y en el val­or Size ponemos 25 o el val­or que quer­amos, este últi­mo parámetro hará que el mini mapa muestre más o menos área.

inspector de una camara en un prototipo de unity
Fig. 22: Con­fig­u­ramos la cámara como ortográ­fi­ca con val­or 25 en el parámetro Size.

La difer­en­cia que hay entre proyec­ción per­spec­ti­va y ortográ­fi­ca es que la primera tiene pro­fun­di­dad lo que nos per­mite percibir la tridi­men­sion­al­i­dad en la ima­gen que vemos, esto hace que los obje­tos que estén más cer­canos a la cámara se verán rel­a­ti­va­mente más grandes en com­para­ción con los que estén más lejos. 

En cam­bio en la per­spec­ti­va ortográ­fi­ca todos los obje­tos se proyectan en el plano de la cámara.

En la fig­uras 23 y 24 vemos dos imá­genes tomadas con la cámara y los obje­tos situ­a­dos en la mis­ma posi­ción, pero en la primera la cámara es per­spec­ti­va y en la segun­da ortográfica.

camara perspectiva en unity, objetos cercanos se ven mas grandes
Fig. 23: En la cámara per­spec­ti­va los obje­tos más cer­canos se verán más grandes.

camara ortografica en unity, objetos se proyectan sobre el plano
Fig. 24: En la cámara ortográ­fi­ca los obje­tos se proyectan sobre el plano y obje­tos del mis­mo tamaño se ven iguales.



Renderizar imagen sobre textura

Para mostrar lo que está vien­do la cámara en la ima­gen del mini mapa usare­mos un obje­to lla­ma­do Ren­der Texture.

creacion de objeto render texture para un prototipo en unity
Fig. 25: En la car­pe­ta del proyec­to creamos un obje­to tipo Ren­der Texture.

En el inspec­tor de este obje­to podemos setear el tamaño de la tex­tu­ra, may­or tamaño resul­tará en una mejor res­olu­ción para el mapa.

inspector de un objeto render texture en unity
Fig. 26: Podemos ajus­tar el tamaño de la tex­tu­ra lo que mejo­rará la res­olu­ción del mini mapa.

Selec­cionamos la cámara del mini mapa y en el cam­po "Tar­get Tex­ture" asig­namos esta Ren­der Tex­ture, debería verse como en la figu­ra 27.

inspector de una camara en un prototipo de unity
Fig. 27: Asig­namos la Ren­der Tex­ture al cam­po "Tar­get Tex­ture" de la cámara del mini mapa.

Luego vamos al GameOb­jec Min­iMa­pa de la jer­ar­quía (el que tenía asig­na­da la com­po­nente Raw Image) y en el cam­po Tex­ture de Raw Image asig­namos la Ren­der Texture.

inspector de un objeto raw image en un prototipo en unity
Fig. 28: En el com­po­nente Raw Image del mini mapa asig­namos en "Tex­ture" la Ren­der Texture.

En la figu­ra 29 vemos que aho­ra el com­po­nente Raw Image mues­tra lo que está vien­do la cámara del mini mapa.

viernes de silueta en unity, mini mapa
Fig. 29: Vemos que aho­ra la silue­ta de Skin­ner mues­tra una vista supe­ri­or del esce­nario, lo cual fun­ciona a modo de mapa.

Carteles e Íconos en el mini mapa

Es común que los mini mapas nos muestre carte­les o íconos con pun­tos de interés en el escenario.

Vamos a ver una for­ma de agre­gar estos ele­men­tos sin necesi­dad de programar.

Para empezar creamos un tex­to 3D y lo con­fig­u­ramos, en mi caso le escri­bo "Cuar­tel General".

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 30: Creamos un 3D Text para colo­car carte­les en el mini mapa.

inspector de un objeto tipo text para un prototipo de unity
Fig. 31: Com­po­nente Text del tex­to 3D.

Colo­camos el tex­to en algún lugar del escenario.

texto 3d en escenario en unity
Fig. 32: Aco­modamos el tex­to 3d en el escenario.

escena 3d hecha en unity, escenario y mini mapa
Fig. 33: La cámara del per­son­aje puede ver el tex­to flotando.

El prob­le­ma con esto es que el jugador tam­bién puede ver el tex­to 3D flotan­do en el aire.

Para solu­cionar esto vamos a hac­er uso de las Lay­ers o capas, en el inspec­tor de cualquier GameOb­ject hace­mos clic en el menú desple­gable Lay­er y luego en Add Layer.

creacion de nueva layer en un prototipo en unity
Fig. 34: En el inspec­tor hace­mos clic en Lay­er y luego Add Lay­er para crear una nue­va capa.

Vamos a crear una nue­va capa lla­ma­da Mini Mapa, luego selec­cionamos el tex­to 3D y le asig­namos la capa recién creada.

creacion de nueva layer en un prototipo en unity
Fig. 35: Creamos una nue­va capa lla­ma­da Mini Mapa.

asignacion de layer en un prototipo en unity
Fig. 36: Al tex­to 3D le asig­namos la capa Mini Mapa recién creada.

Aho­ra vamos a la cámara del per­son­aje o la cámara que este­mos uti­lizan­do para mostrar el juego y en el cam­po Culling Mask quita­mos de la lista la capa Mini Mapa.

culling mask para una camara en unity
Fig. 37: En la cámara del per­son­aje, en el cam­po Culling Mask des­mar­camos la capa Mini Mapa.

En las fig­uras 38 y 39 vemos que la cámara del juego no ve el tex­to 3d flotan­do, 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 tex­to 3D ya no es vis­i­ble 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 mis­mo prin­ci­pio podemos usar para colo­car íconos en el esce­nario, uti­lizamos el GameOb­ject tipo Sprite y lo con­fig­u­ramos a gusto.

jerarquia de un prototipo en unity, mini mapa en unity
Fig. 40: Arras­tramos la silue­ta de Skin­ner a la jer­ar­quía para crear un Sprite y nos ase­gu­ramos que sea hijo del personaje.

configuracion de sprite renderer para utilizar como icono en un mini mapa en unity
Fig. 41: Con­fig­u­ramos el Sprite Ren­der­er como nos guste.

Para el ícono del per­son­aje no debe­mos olvi­dar pon­er­lo como hijo del GameOb­ject, de esta for­ma el ícono seguirá los pasos del personaje.

viernes de silueta en unity
Fig. 42: Aco­modamos la silue­ta arri­ba del personaje.

mini mapa hecho en unity con la forma de la silueta de skinner, icono para el personaje
Fig. 43: Aho­ra en donde está el per­son­aje ten­dremos un ícono para identificarlo.



Script

Por últi­mo podemos cam­biar la man­era en la que la cámara del mini mapa sigue al per­son­aje. Con un Script podemos ten­er un may­or con­trol sobre el mini mapa, imple­men­tar un zoom por ejemplo.

En las descar­gas hay un Script que se lla­ma SeguirOb­je­to que hará este trabajo.

Para uti­lizar­lo debe­mos sacar la cámara del mini mapa de entre los hijos del obje­to per­son­aje. Luego asig­nar el Script a la cámara, como se mues­tra en la figu­ra 45.

El Script tiene un cam­po lla­ma­do Tar­get que per­mite pon­er el obje­ti­vo al que la cámara va a seguir, en mi caso pon­go el pre­fab­ri­ca­do del per­son­aje. El Vec­tor Off­set per­mite setear la dis­tan­cia a la que la cámara seguirá al personaje.

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

inspector de un objeto camara para un prototipo hecho en unity
Fig. 45: Agreg­amos a la cámara el Script y colo­camos como obje­ti­vo el pre­fab­ri­ca­do del per­son­aje y con­fig­u­ramos el offset.

Uti­lizan­do este Script evi­ta­mos que el mini mapa gire jun­to con el per­son­aje, ya que la cámara sólo copia los movimien­tos 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 jun­to con el personaje.

Conclusión

Proban­do des­cubrí varias for­mas de resolver este prob­le­ma, pero esta solu­ción me pare­ció la mas intere­sante porque no requería de pro­gra­mación para funcionar.

Podemos resolver el prob­le­ma usan­do sólo lo que nos ofrece Uni­ty, pero para dar­le una for­ma cir­cu­lar por ejem­p­lo vamos a nece­si­tar una más­cara como la que viene en los archivos de descarga.

El com­po­nente Ren­der Tex­ture nos per­mite ren­derizar en tiem­po real lo que está vien­do una de las cámaras.

Podemos añadir ele­men­tos indica­tivos al mini mapa como tex­tos 3D e íconos y hac­er que sólo una de las cámaras pue­da ver­los, para esto uti­lizamos las Lay­ers o capas.

Depen­di­en­do de las necesi­dades de nue­stro proyec­to esta solu­ción nos puede servir o no, si nece­si­ta­mos mostrar infor­ma­ción más com­ple­ja en el mini mapa como rutas o la posi­bil­i­dad de hac­er zoom, vamos a ten­er que crear un Script y pro­gra­mar una solu­ción a medida.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Scroll al inicio
Secured By miniOrange