1. Contando as Tentativas Restantes

A primeira nova interface a ser desenvolvida em nossa aula é a contagem de tentativas que o jogador possui, representada pela quantidade de robôs restantes e determinada na variável robotsLeft, em nosso script do Game Controller. Para começar, disponibilizamos o projeto até onde desenvolvemos na aula passada, aqui.

Antes de alterarmos qualquer script, no entanto, precisamos começar adicionando a nova interface à nossa cena. Faremos isso da mesma maneira como vimos na aula passada, pelo menu GameObject -> UI -> Text e GameObject -> UI -> Image. Utilizaremos uma combinação desses dois componentes para exibir a quantidade de tentativas restantes.

Ao criarmos os novos elementos, como vimos na aula anterior, serão criados dois outros objetos em nossa hierarquia, o Canvas e o EventSystem. Os nossos objetos serão colocados, por padrão, como filhos do Canvas. Alteraremos, porém, essa hierarquia. Para a nossa primeira interface ficar parecida com a vista na Figura 1, adicionaremos o texto como filho do objeto Image. Isso facilitará o posicionamento, na sequência.

Essa interface será posicionada no canto superior esquerdo da tela e lá permanecerá a todo momento, uma vez que essa informação é relevante durante toda a execução do jogo. Para obter essa imagem utilizada, é só clicar aqui. Objetivando que essa interface seja exibida sempre no mesmo local, podemos utilizar o Canvas com duas configurações diferentes.

De acordo com o que vimos na aula passada, utilizando o modo de Screen Space – Overlay, podemos posicionar a interface por último, mantendo-a sempre no local determinado em relação à tela. Já se escolhermos o método Screen Space – Camera e colocarmos a câmera padrão, a única disponível em nosso jogo, podemos reproduzir o mesmo comportamento, pois o desenho da câmera será sempre feito só, na cena, portanto a UI será desenhada por último.

Escolha um desses modos e configure o seu Canvas para ocupar toda a tela, como visto na aula sobre introdução à UI. Nós utilizaremos, por ser mais simples, o modo Screen Space – Overlay, colocando essa interface diretamente na tela, após todas as modificações já terem ocorrido e o cenário ter sido desenhado. O nosso objeto Canvas ficará configurado como vemos na Figura 2.

Com o Canvas configurado, o próximo passo é configurarmos a imagem e o texto para que eles se relacionem adequadamente e sejam posicionados no local correto do Canvas. Como a imagem foi colocada como objeto pai em relação ao texto, conforme dissemos anteriormente, começaremos configurando a imagem.

Importe o asset disponibilizado anteriormente, com a cara de nosso robô, e, então, selecione esse asset como o Source Image de nossa imagem da GUI. Isso fará com que a cara dele já apareça em nossa tela, facilitando a nossa noção quando posicionarmos o elemento. Agora, para a âncora!

Lembra de conversarmos na aula passada sobre âncoras? Que poderíamos ancorar objetos em relação aos seus pais e, assim, lidar com o posicionamento? É exatamente dessa maneira que posicionaremos os nossos objetos. Selecione a imagem e, então, escolha a âncora Top/Left para ela, incluindo o posicionamento (segure a tecla alt ao selecionar). Isso fará a base do posicionamento da nossa imagem ser o canto superior esquerdo da tela, o qual corresponde justamente a onde gostaríamos de posicioná-la, como dito anteriormente.

No entanto, ela ficará bem próxima à borda, prejudicando um pouco a visualização. Para melhorar esse aspecto, configuraremos a posição de nosso elemento. Com a âncora posicionada, ao utilizar o valor Pos X = 87.5 e Pos Y = -57.5, estaremos colocando o objeto para a direita e para baixo em relação ao canto superior da tela, chegando à configuração desejada. Por fim, eu gostei de utilizar o tamanho 75 x 75, em Width e Height. Fica a seu critério, porém, o quão grande você gostaria que sua interface fosse. Caso utilize um tamanho diferente, atente para reposicionar o texto, próximo elemento a ser alterado. As propriedades da imagem podem ser vistas na Figura 3.

O elemento texto foi colocado como filho da imagem por um só propósito: aproveitar o seu posicionamento. Como esses dois elementos estão ligados na interface, é interessante que eles estejam também ligados hierarquicamente, de modo a garantir que, mesmo ao movermos a tela e os objetos, os dois componentes continuarão ligados, como deveriam estar.