2. Adicionando uma Barra de Energia

2.1 Criando o Espaço para os Elementos de Energia

Isso é uma modificação interessante em relação ao que estávamos acostumados. Esse componente, ao ser criado como um Rect Transform, nos permite modificá-lo como um elemento da UI, mesmo sendo apenas um elemento vazio. Esse tipo de elemento é conhecido como container e é bastante utilizado! Agora vocês já o conhecem! :D

Vamos logo posicioná-lo em seu canto para que possamos, em seguida, adicionar os elementos de interface a ele. Como já utilizamos o canto superior esquerdo para a contagem de tentativas restantes, vamos utilizar o canto superior direito para a nossa barra de energia. Selecione o componente novo criado, altere o nome dele para EnergyLeft e então, na aba Inspector, selecione a posição e a âncora Top Right para ele. Em seguida, altere a Pos X = -125 e o Pos Y = -50. O Width utilizado foi 250 e o Height 50. O componente, após todas as alterações, deve ficar como visto na Figura 8.

Com o elemento já criado e posicionado, podemos passar aos elementos de interface em si. Começaremos pela imagem, que já conhecemos, e passaremos ao Slider na sequência.

2.2 Adicionando a Imagem de Referência à Barra de Energia

Após construirmos o container necessário, vamos adicionar a imagem que indica a utilidade daquela barra verde, a qual posicionaremos em nossa cena. Se você quiser usar a imagem utilizada, você pode encontrá-la aqui.

Para adicionarmos a imagem, não há muita novidade. Apenas atentaremos para adicioná-la como filha do objeto EnergyLeft! Para isso, clique com o botão direito nesse objeto e selecione a opção UI -> Image. Em seguida, altere a imagem utilizada para o ícone desejado, arrastando a imagem até o objeto ou selecionando a propriedade Source Image dele para ser a imagem escolhida. Feito isso, o ícone de raio, ou qualquer outro que você tenha escolhido, já deverá estar aparecendo em nosso componente.

O próximo passo é alterar o tamanho e o posicionamento desse componente, através da âncora e das propriedades Width e Height. Para o nosso ícone, o tamanho 50x50 já é bom o bastante, então, selecione esses valores para as propriedades Width e Height. Em seguida, devemos movê-lo para o canto esquerdo horizontalmente, enquanto o mantemos centralizado verticalmente. Isso representa a âncora middle – left. Lembre-se de utilizar a tecla Alt para também mover a referência de posição do objeto. Feito isso, ele estará posicionado centralizado na borda de nosso container. Como não é esse o objetivo, altere a Pos X para 25. Isso o colocará no lugar correto, como visto na Figura 7. Os valores alterados do objeto Image podem ser vistos na Figura 9.

Com a imagem configurada, precisamos agora adicionar o nosso Slider à cena. Lembre-se que esse Slider não é interativo e vai representar a energia restante do personagem, de 0 a 100, a partir de uma variável do próprio Player. Não é objetivo dessa aula, no entanto, alterar o valor desse slider, uma vez que os elementos com dano só serão adicionados na aula que vem, mas já vamos preparar tudo de interface, certo?