2. Adicionando uma Barra de Energia

Agora que temos as tentativas restantes funcionando adequadamente, conheceremos um novo componente para adicionar à nossa UI, como a barra de energia restante ao nosso robô – o componente Slider, visto na Figura 6.

Esse componente pode ser utilizado em diferentes locais de um jogo, principalmente quando colocado de modo interativo. Ele pode representar o volume em um jogo, a qualidade gráfica, o brilho, etc. Assim, tudo que possuir um valor mínimo, um máximo e precisar ser alterado gradativamente pode ser representado por esse componente. Basta adicioná-lo, permitir que o usuário o altere clicando na bolinha e então, ao concluir a alteração de valor, uma função será chamada automaticamente para que algo seja feito com o novo valor. Bem interessante!

Mas não é dessa maneira que utilizaremos um Slider em nosso jogo, por agora. Adicionaremos um Slider não interativo, sem a bolinha de clique, para ser utilizado como maneira de representar a energia restante de nosso robozinho, afinal, essa é uma grandeza que possui um valor mínimo e um valor máximo, correto? E aí, após algumas alterações, o nosso componente ficará como visto na Figura 7.

Legal, não? Pois vamos adiante, conhecer melhor esse componente e alterá-lo para que fique como o demonstrado na Figura 7!

2.1 Criando o Espaço para os Elementos de Energia

Como vocês observaram, na Figura 7 a barra de energia não foi incluída unicamente. Como todos os elementos de um HUD (sigla de Heads-Up Display, que representa os elementos como energia, tentativas, etc., compondo a tela de um jogo) bem elaborado, o componente que representa algo vem posicionado com uma imagem ou um componente identificador qualquer, o qual permite ao usuário perceber o que é aquele elemento que está ali, na interface. Em nosso caso, adicionamos uma imagem junto ao Slider indicando que aquela barra mede a energia.

Uma prática comum no desenvolvimento de interfaces é criar um elemento pai que possa guardar e servir como referência para todos esses elementos filhos, parte de uma pequena interface. Já fizemos algo similar em aulas anteriores, quando criamos componentes vazios para guardar todas as plataformas, ou todos os backgrounds, por exemplo. Agora, no entanto, faremos isso para um conjunto de elementos de HUD.

Para que possamos criar esses componentes novos, criaremos, primeiramente, um objeto filho vazio em nosso Canvas. Para isso, como já fizemos antes, clique com o botão direito no Canvas, na aba Hierarchy, e selecione a opção Create Empty. Ao fazer isso, um novo objeto denominado GameObject surgirá como filho do Canvas, como já estamos acostumados. Ao clicar nele, no entanto, você poderá notar uma diferença. Ele foi criado com um Rect Transform e não com um Transform padrão!