Barra Indicadora para Unity – Asset para Descargar

Introducción

He creado un nuevo Asset para Unity, se trata de una barra indicadora para el Canvas. Este Asset te servirá para mostrar valores en relación a un valor mínimo y máximo, por ejemplo puedes hacer una barra indicadora de vida, fuerza y magia, una barra de progreso, etc. He añadido varios parámetros y funcionalidades para que se pueda personalizar bastante, en este artículo veremos el contenido del paquete y un ejemplo de cómo hacer una barra indicadora de vida en Unity.

En el siguiente vídeo muestro cómo está compuesta la barra indicadora, los parámetros configurables en el inspector y cómo modificar su valor desde un Script:


Descargar Asset – Barra indicadora lineal para Unity

A continuación puedes descargar el paquete de Unity para importar en tu proyecto, el paquete contiene los Assets de la barra indicadora. En la figura 1 se muestran los archivos que tiene el paquete al importarlo.

assets para hacer una barra de vida en unity
Fig. 1: Archivos que contiene el paquete.

En la escena «Indicators» ya viene montada la barra indicadora junto con un ejemplo de cómo utilizarla. En la figura 2.a vemos la jerarquía de la escena, el prefab de la barra indicadora (tercer elemento de la figura 1) debe ser añadido como hijo de un objeto Canvas, sino no se puede visualizar en pantalla.

El tamaño de la barra indicadora se puede ajustar seleccionando el GameObject que está resaltado en la figura 2.a y modificando los valores «Width» y «Height» en el inspector (figura 2.b). No es necesario modificar la escala.

jerarquia de una barra de vida en unity
Fig. 2.a: El prefabricado debe colocarse como hijo de un objeto Canvas.
jerarquia de una barra de vida en unity
Fig. 2.b: Para ajustar el tamaño de la barra indicadora utilizar los campos Width y Height.

En la figura 3 se ve la barra indicadora, al entrar en el modo juego y presionar las teclas A y D, debería verse cómo la barra disminuye e incrementa su valor respectivamente.

barra de vida en unity para descargar
Fig. 3: En la escena se encuentra montado el indicador para testear.

Parámetros de personalización de la barra de vida para Unity

En el inspector del prefabricado de la barra indicadora se pueden ver algunos parámetros para personalizar su funcionamiento. Todos estos valores pueden ser configurados a través de Script, eso lo veremos en el ejemplo de más adelante. Por ahora vamos a ver qué función cumple cada uno de los parámetros.

El parámetro «Orientation» determina si la barra indicadora se va a rellenar horizontal o verticalmente. La variable booleana «reverse» permite invertir el sentido de llenado, izquierda a derecha o derecha a izquierda si la orientación es horizontal y de abajo a ariba o de arriba a abajo si la orientación es vertical.

El color «FillColor» es el color del relleno de la barra indicadora y es el único color que se mostrará, a menos que se marque la casilla «Use Two Colors», si esa casilla está marcada, la barra mostrará el «FillColor» cuando esté al máximo y el «EmptyColor» cuando esté al mínimo, interpolando el color para todos los valores intermedios.

Los valores «minValue» y «maxValue» determinan el rango de valores que indica la barra, esto dependerá de para qué la vayamos a utilizar.

parámetros de una barra de vida en unity
Fig. 4: En el inspector se puede preconfigurar la barra indicadora.

El objeto «ValueIndicator» es la referencia de la imagen del relleno, no es necesario modificarlo, pero en caso de que te interese, el Script «LinearIndicator», teniendo en cuenta el valor que tiene que mostrar y el porcentaje que eso representa en función de los valores mínimo y máximo, modificará la escala del objeto «ValueIndicator» entre 0 y 1 para X si la orientación es horizontal y para Y si la orientación es vertical.

Cómo implementar una barra de vida en Unity

Para hacer una barra de vida utilizando este Asset, hay que entender cómo utilizarlo a través de código. La parte visual la configuramos desde el inspector, ahí podemos modificar colores, tamaños y demás, pero para usar esta barra indicadora vamos a necesitar un Script de Control.

Asumiendo que que se dispone de un Script que controla la vida del jugador, es decir que cuando le hacen daño disminuye su vida, cuando se cura su vida aumenta, vamos a ver cómo usar este Asset para indicar el nivel de salud.

Paso 1: Personalizar la apariencia de la barra de vida.

En este primer paso lo que hacemos es trabajar en la parte visual, es decir estando en Unity le damos el tamaño a la barra de vida, la posición, los colores, podemos cambiar el color de fondo, etc.

Paso 2: Declaración del objeto indicador para la barra de vida.

Dentro del Script donde vamos a utilizar la barra indicadora como barra de vida, lo primero que necesitamos es definir una referencia pública para el objeto «LinearIndicator», esto se hace en la línea 9 de la figura 5. En caso de necesitar más de una barra indicadora, por ejemplo para hacer una barra de vida y una barra de armadura, habrá que definir dos de estas referencias.

script de control de una barra de vida en unity variables necesarias
Fig. 5: Definición de un objeto tipo LinearIndicator para poder utilizar el indicador lineal.

Al definir la referencia como pública podremos verla en el inspector y asignar manualmente en ese espacio, el GameObject de la barra indicadora (en nuestro caso el que está resaltado en la figura 2.a), como vemos en el campo aparece la referencia del Script «LinearIndicator».

inspector de una barra de vida en unity
Fig. 6: Asignar el objeto con el Script LinearIndicator en el espacio que aparece en el inspector.

Paso 3: Configuración inicial de la barra de vida.

El Script «LinearIndicator» tiene definido varios campos y funciones públicas para configurarlo a través de código. En la figura 7 vemos varias instrucciones que permiten configurar la barra indicador.

La función «SetupIndicator» por ejemplo (línea 17 de la figura 7) permite establecer el rango de valores de la barra indicador, por ejemplo si la salud del jugador está entre 0 y 500, esos deberían ser los valores que se pasan como parámetro, de esa forma cuando el jugador tenga su vida en 500, la barra estará llena al 100%.

En la línea 18 vemos cómo cambiar la orientación de la barra indicadora, en la línea siguiente como cambiar la variable «reverse» que modificaba el sentido de llenado.

script de control de una barra de vida en unity configuración inicial
Fig. 7: Ejemplo de configuración del indicador lineal por código.

La línea 20 no es una instrucción de configuración sino es la instrucción para utilizar la barra indicador, esto lo vemos en el siguiente paso.

Paso 4: Utilización de la barra de vida.

Para escribir una valor en la barra de vida utilizamos la referencia que definimos y llamamos a la función «SetValue», pasando como parámetro el valor que queremos indicar. Podemos ver ejemplos de esto en la línea 20 de la figura 7 y en las líneas 32 y 40 de la figura 8.

Esta función se puede llamar en el momento en el que ocurre un evento que modifica el valor, por ejemplo cuando el jugador recibe daño, en ese momento refrescamos el valor de la barra de salud, o sino también se puede actualizar constantemente el valor. Dependiendo de cómo funcione nuestro juego.

script de control de una barra de vida en unity utilización de la barra de vida por código
Fig. 8: Ejemplo de utilización del indicador lineal por código.

Scroll al inicio
Secured By miniOrange