Unity Drop: Barra de vida

Vida… Essa coisa complexa e sem sentido é comumente representada em jogos como uma barra.

Primeiramente, existem dois tipos de barras de vida nos jogos, a barra de vida pertencente ao espaço de jogo, que normalmente se localiza em cima ou em baixo do personagem o qual representa e o segue pelo espaço, e a barra de vida pertencente ao HUD, que fica fixa em uma área da tela, normalmente representando a vida do personagem que está sendo controlado, ou o chefe de alguma fase.

age darksouls

Exemplo de barra de vida pertencente ao mundo (esquerda) e pertencente ao HUD (direita).

Neste primeiro Unity Drops, ensinarei uma das formas de se implementar o primeiro exemplo, a barra de vida pertencente ao mundo, em Unity.


Para começar, precisamos criar um objeto vazio, o qual daremos o nome de Lifebar. Dentro de Lifebar, criaremos dois objetos do tipo Sprite, chamados Fill e Empty.

lifebar01 lifebar2 lifebar3

Então, definiremos uma imagem para o campo Sprite do componente Sprite Renderer dos objetos Fill e Empty, neste exemplo utilizei uma imagem branca de 8×8 pixels. Definiremos também a cor que queremos para nossa barra de vida, como por exemplo, um verde no campo Color do objeto Fill, que representa a barra cheia, e um cinza para o objeto Empty, que representa a barra vazia. Para com que a barra funcione corretamente desta forma, é necessário que o pivô da imagem escolhida esteja como Left, pois a barra começará da esquerda.

lifebar4 lifebar5 lifebar6

A seguir, precisamos definir que a parte preenchida da barra fique por cima da parte vazia, fazemos isso definindo o campo Order in Layer do objeto Fill como sendo maior que o do objeto Empty. E para centralizar o pivô da barra de vida, definiremos a posição X dos objetos Fill e Empty como -0.5, já que o pivô da imagem está definido para ser à esquerda.

lifebar7 lifebar8 lifebar9

Agora com a parte gráfica da barra de vida já pronta, é necessário criar um script que irá controlar o funcionamento da barra de vida. Para isso, precisamos criar uma referência pública para o objeto Fill do tipo Transform e criar uma função UpdateBar(float life), na qual iremos alterar a escala X do objeto Fill com base no parâmetro life passado, como na imagem abaixo.

lifebar10 lifebar11

Para o funcionamento desse script, é necessário que, no editor, defina-se o campo Fill do nosso script com o objeto Fill criado anteriormente. Desta forma, com a nossa barra de vida pronta, podemos defini-la como filha do personagem a qual queremos que ela pertença.

lifebar12 lifebar13

Assim, com uma referência para a barra de vida no script do personagem, podemos chamar a nossa função UpdateBar(float life) toda vez que o personagem sofrer dano, passando como parâmetro a vida atual do personagem dividida pela vida máxima do mesmo. Da forma que a nossa barra de vida foi implementada, alterando-se a escala do objeto Lifebar, pode-se criar barras de vidas de diversos tamanhos. No exemplo abaixo, alterei-a da forma que achei mais proporcional ao personagem.

lifebar14

Vale lembrar que podemos além de alterar a escala da barra de vida, também podemos alterar a cor de seu preenchimento, criando assim uma distinção entre a vida do personagem e a vida dos inimigos.

lifebar15

Espero que tenham gostado desse primeiro Unity Drops e até mais… (:

(Créditos a Calciumtrice pela arte utilizada neste tutorial).

  • Eduardo Faraco

    Excelente iniciativa! Contudo, como opinião, este tipo de implementação acarreta um problema de dependência de entidades (que dificulta muito a vida conforme o projeto avança). A classe do personagem recebendo dano não deveria conhecer diretamente a barra de vida. O ideal seria a barra (e outros controles de UI) registrar (por interface ou evento) interesse no estado de vida do personagem. O desacoplamento é fundamental para garantir reusabilidade de código em diversos cenários (por exemplo, para adaptar este jogo para multiplayer, nem existia uma barra de vida na instância rodando em um servidor)

    • Patrick Clemer Alfarth

      Ótimo ponto a ser levantado, em um projeto de maior extensão, ou até mesmo no caso de um jogo online como você disse, o controle da barra de vida poderia ser prejudicado por não fazer parte do UI ou não ser controlada por eventos. No caso do jogo do tutorial, o que está sendo utilizado dá conta do recado e acaba sendo uma solução mais rápida, pois se trata de um jogo de turno, onde no máximo existirá de uma a três barras de vida em cena, e como eu disse, esse é um dos modos de se fazer a barra de vida, que acaba por não ser o melhor ^^. Obrigado pelo seu comentário, pois ele me ajudou a entender a falha e ajudou o blog a crescer!