2. Adicionando uma Barra de Energia

2.3 Adicionando o Slider como Barra de Energia

O último objeto que adicionaremos à nossa interface de EnergyLeft é o Slider de energia restante. Para adicioná-lo clique com o botão direito sobre o EnergyLeft e selecione a opção UI -> Slider. Isso criará um novo Slider, como visto na Figura 6. Precisamos, no entanto, alterar um pouco esse componente para utilizá-lo em nosso projeto. Vejamos, na Figura 10, a estrutura de um Slider quando é criado.

O Slider, como vemos na Figura 10, ao ser criado, traz três elementos filhos. Esses elementos representam as partes do Slider. O background representa o fundo do elemento. O Fill Area representa o que vai cobrir o fundo à medida que o Slider altera o seu valor. Já o Handle Slide Area é o objeto que representa o Handler, a bolinha a qual permite ao usuário interagir com o Slider.

A primeira coisa que precisamos modificar no Slider é a propriedade Interactable. Essa propriedade define se é possível interagir com o objeto ou não. Como não queremos isso, devemos desmarcar essa propriedade, tornando essa barra não interativa. Em seguida, temos a propriedade Transition, a qual indica como será a transição entre os estados da bolinha de movimentação da barra. Como não temos a bolinha e não utilizaremos isso para nada, podemos remover qualquer transição, alterando o valor dessa propriedade para None. Assim, todos os valores relacionados a ela desaparecem de nosso editor.

Ainda temos algumas propriedades a mais para alterar. A propriedade Direction indica a direção que a barra aumenta. Manteremos o padrão de Left to Right (da esquerda para a direita). Mas, logo abaixo, alteraremos o valor máximo da barra. Como trabalharemos com uma energia variável entre 0 e 100, alteraremos o Max Value (indica o valor máximo da barrinha) para 100. A propriedade Whole Numbers indica se a barra trabalhará com números inteiros ou ponto flutuante. Para termos uma maior flexibilidade, utilizaremos o ponto flutuante, deixando a opção desmarcada. Por fim, a propriedade Value indica o valor atual da barra. Como começamos com a energia cheia, podemos alterar esse valor para 100. Perceba que essa propriedade é um Slider para alterar o valor do Slider! :P

Alteradas todas as propriedades do Slider (script), precisamos alterar as propriedades do Rect Transform do Slider para posicioná-lo adequadamente em nosso container. Utilizamos a âncora oposta da imagem, a middle – right, alterando também a posição e o pivô para esses valores (alt e shift!). Por fim, para facilitar a visualização, alteramos a Width para 200 e a Height para 40. As propriedades finais do Slider podem ser vistas na Figura 11.