UI Essencial na Unity: Criando uma Barra de Vida em 5 Passos Práticos

Introdução

Você já está jogando seu protótipo, o personagem se move, o pulo está decente, mas a vida do jogador só existe em um número que você vê no Console do Unity, certo?

Você sabe que, para o seu jogo parecer minimamente lançável, o jogador precisa de feedback visual. E a barra de vida é o feedback mais básico e importante.

Se isso te soa familiar, você está preso na fase onde a mecânica funciona, mas o processo de transformar isso em game feel ainda é um mistério.

A PERAI DEV é sobre processo. Este post vai te mostrar como montar a estrutura do Canvas e conectar a Health Bar (barra de vida) ao seu código de forma simples e direta. Sem essa etapa, seu projeto vira mais um item na lista de M.U.P.

Passo 1: O Canvas (O Palco da Interface)

O Canvas é o elemento-mãe de toda a sua UI.

1. Crie o Canvas: Na hierarquia, clique com o botão direito e vá em UI -> Canvas.
2. Ajuste o Scale: Selecione o Canvas. O segredo para uma UI que funciona em todas as telas está no componente Canvas Scaler.
3. Configuração MVP do Canvas Scaler: Altere UI Scale Mode para Scale With Screen Size. Coloque uma Reference Resolution realista (ex: 1920×1080) e ajuste o Match para 0.5 (equilibra largura e altura). Isso garante que sua barra não fique minúscula em telas grandes.

Passo 2: Criando a Barra de Vida Visual

Uma barra de vida simples é feita de dois objetos Image dentro de um pai.

1. O Contorno (Background): Dentro do Canvas, clique direito e vá em UI -> Image. Renomeie para HealthBarBG.
   • Defina uma cor escura ou adicione um sprite de contorno.
2. O Preenchimento (Fill): Dentro do HealthBarBG (como objeto filho), clique direito e vá em UI -> Image. Renomeie para HealthBarFill.
   • Defina a cor do preenchimento (ex: verde ou vermelho).

O Segredo: No componente Image do HealthBarFill, altere o Image Type para Filled e o Fill Method para Horizontal. Isso permite que você controle a vida apenas alterando o valor Fill Amount (de 0 a 1). Simples assim.

Passo 3: O Script Mestre da UI (E a Conexão)

Precisamos de um script que pegue o valor de vida do seu personagem e o passe para o HealthBarFill.

Crie um novo script C# (ex: HealthBarUI) e anexe-o ao seu objeto HealthBarBG (o pai):

using UnityEngine;
using UnityEngine.UI; // Importante para usar o componente Image

public class HealthBarUI : MonoBehaviour
{
    // A referência para o componente Image do preenchimento.
    // Arraste o HealthBarFill aqui na Inspector.
    public Image fillImage; 
    
    // Referência do jogador (onde a vida real está armazenada)
    // No seu código de personagem, você deve ter uma variável pública `currentHealth`.
    public PlayerHealth playerHealth; // Crie um script chamado PlayerHealth para testar

    void Start()
    {
        // Se a referência estiver vazia, tente encontrar no objeto pai.
        if (playerHealth == null)
        {
            playerHealth = FindObjectOfType<PlayerHealth>();
        }
    }

    // Método que será chamado pelo script PlayerHealth toda vez que a vida mudar
    public void UpdateHealthBar(float currentHealth, float maxHealth)
    {
        // O cálculo pragmático: Vida Atual / Vida Máxima.
        // O Fill Amount aceita apenas valores entre 0 e 1.
        float fillAmount = currentHealth / maxHealth;
        
        // Atualiza a barra visualmente
        fillImage.fillAmount = fillAmount;
    }
}

Passo 4: Chamando a UI (A Interligação)

Agora, vamos simular o script de vida do jogador (PlayerHealth) para ver a conexão.

Crie um novo script PlayerHealth (e anexe-o ao seu personagem). Ele deve ter a lógica real de dano:

using UnityEngine;

public class PlayerHealth : MonoBehaviour
{
    public float maxHealth = 100f;
    public float currentHealth;

    // Referência para o script da UI que criamos
    public HealthBarUI healthBar; 

    void Awake()
    {
        currentHealth = maxHealth;

        // Tente encontrar a HealthBar automaticamente (ou peça para o dev arrastar na Inspector)
        if (healthBar == null)
        {
            healthBar = FindObjectOfType<HealthBarUI>();
        }

        // Garante que a barra comece cheia
        if (healthBar != null)
        {
            healthBar.UpdateHealthBar(currentHealth, maxHealth);
        }
    }

    // Método que é chamado quando o jogador toma um hit
    public void TakeDamage(float damage)
    {
        currentHealth -= damage;
        
        // **A CHAMADA CRÍTICA:**
        // Sempre que a vida mudar, atualizamos a barra!
        if (healthBar != null)
        {
            healthBar.UpdateHealthBar(currentHealth, maxHealth);
        }

        if (currentHealth <= 0)
        {
            Die(); // Simplesmente morre
        }
    }

    void Die()
    {
        Debug.Log("Morreu! Game Over.");
        // Implementar lógica de Game Over aqui (reiniciar cena, etc.)
    }
}

Passo 5: Ajustando e Testando

1. Ligue as Peças: Volte para a Inspector do seu personagem (com o script PlayerHealth) e arraste o objeto HealthBarBG para o campo Health Bar no script.
2. Ligue o Preenchimento: Volte para o objeto HealthBarBG (com o script HealthBarUI) e arraste o objeto HealthBarFill para o campo Fill Image.
3. Teste o Dano: Para testar, adicione um botão temporário ou uma tecla (ex: Input.GetKeyDown(KeyCode.H)) no Update() do seu PlayerHealth que chame TakeDamage(10).

Seu protótipo agora tem uma UI funcional. Ela não é bonita, mas é FEITA. E feito é melhor que perfeito. O design vem depois.

Conclusão

Parabéns! Você tirou a vida do seu personagem do console e a colocou na tela. Isso não é só cosmético; é engajamento. O jogador precisa entender o que está acontecendo.

Dominar o Canvas é o primeiro passo para transformar seu código funcional em uma experiência jogável. Você usou apenas três componentes e um cálculo básico. É a prova de que a complexidade é inimiga do lançamento.

O que fazer agora: Você conseguiu fazer a barra funcionar? Compartilhe este post com aquele amigo que ainda usa Debug.Log para testar a vida.

No nosso próximo encontro, vamos resolver o problema de como o jogador interage com o perigo, cobrindo colisões e dano.