2. Adicionando uma Barra de Energia

2.3 Adicionando o Slider como Barra de Energia

Agora, aos filhos! O primeiro deles, Background, é um elemento do tipo Image o qual indica as propriedades do Background da barra, a ser exibido quando a barra estiver vazia. Como, usualmente, utilizamos a cor vermelha para indicar falta de energia e a verde para indicar que temos, vamos alterar o Background para vermelho, pois isso deve aparecer sempre que a energia estiver faltando. Então, selecione o elemento Background e altere a sua cor para vermelho (#FF0000FF). As outras propriedades podem ser mantidas como estão.

Já o segundo filho, Fill Area, é um elemento do tipo container, contendo um elemento do tipo Image que representa a parte preenchida da barra em si. O único detalhe que precisa ser alterado no Fill Area é que ele não representa a área da barra toda, uma vez que deixa o espaço da bolinha que nós deletamos. Como não temos mais o botão de interação, podemos alterar a Fill Area para preencher todo o espaço, em vez de deixar uma pequena sobra. Para isso, alteramos o valor de Right no Rect Transform dela para 5, indicando que deve haver um espaçamento menor em relação ao fim do objeto.

Para o elemento Fill, filho de Fill Area, precisamos apenas mudar a sua cor para verde, uma vez que esse componente representa a barra quando estiver cheia. Utilizamos a cor #22BA43FF para esse elemento.

Após configurar o Slider e seus filhos, a barra de vida estará criada! Para ver suas alterações, basta selecionar o objeto Slider na aba Hierarchy e então, no Inspector, alterar o seu valor entre 0 e 100 e observar como a barra irá revelar a sua parte vermelha e se encher de verde novamente, quando voltar a 100. Muito legal, não acha?

Com isso, encerramos a nossa aula de hoje! Como já dissemos, a utilização dessa barra, com dano sendo causado e recuperado, será uma das cenas dos próximos capítulos. Fique ligado! Não perca! :D

Até mais, pessoal!! o/