2D Roguelike 12 of 14 : UI & Levels

Nesse vídeo vamos adicionar alguns

elementos de interface de usuário ao nosso jogo

incluindo títulos para quando começamos o jogo e mudamos de fase

e text para mostrar o placar do jogador.

Para fazer isso vamos usar o sistema de UI da Unity.

Vamos clicar em Game Object - UI - Canvas.

O canvas vai conter todos

os elementos de interface.

O primeiro elemento que iremos criar será

uma imagem que utilizaremos

como fundo para nossos títulos.

Vamos clicar em Game Object - UI - Image.

Perceba que esse objeto é criado como filho de Canvas

e a primeira coisa que faremos

e mudar para a nossa scene view e afastar o zoom.

E vamos usar os anchors pre-configurados

para esticar essa imagem fazendo ctrl+click (option-click no MacOS).

Vamos configurar a cor para preto.

E chamar de Level Image.

Em seguida vamos criar um objeto de texto

que irá mostrar qual a fase

em que o jogador está

quando começamos o jogo ou mudamos de fase.

Vamos selecionar a imagem

Clicar em Game Object - UI - Text.

Vamos chamar de Level Text.

A primeira coisa que vamos fazer é ancorar a imagem

ao centro da tela, vamos clicar nos anchor presets

e fazer alt-click (option click no MacOS) no preset do centro.

Agora vamos configurar a cor do texto

para branco clicando em Colour

e arrastando até branco.

Vamos configurar o tamanho da fonte para 32.

Perceba que quando fazemos isso o texto desaparece.

Isso acontece porque o texto ficou

muito grande para encaixar na largura

e altura especificadas no rect transform.

Como vamos ter um texto que vai variar

de tamanho mostrando tanto o número da fase e nossa mensagem de fim de jogo

vamos usar a configuração de overflow

horizontal e vertical para permitir que o texto "vaze".

Vamos configurar o overflow horizontal para overflow

e o overflow vertical para overflow também.

Agora nosso texto aparece de novo, vamos também centralizá-lo

na horizontal e na vertical.

Vamos configurar a fonte clicando no asset picker.

E selecionar Press Start.

Essa fonte vem com o projeto.

Finalmente vamos configurar o texto padrão, que vai ser "Day 1".

E isso é suficiente para o texto da fase.

Agora vamos transformar o Level Text num filho de Level Image

dessa maneira quando desativamos Level Image

Level Text também será desativado.

Agora vamos criar o texto para a pontuação.

Selecione o Canvas,

clique em Game Object - UI - text.

Este text nós vamos alinhar com o fundo

da tela no centro.

Vamos clicar no anchor presets

e clicar no preset bottom center

pressionando o botão alt (ou option no MacOS).

Mais uma vez vamos configurar a cor para branco.

Clique em Colour, arraste para white.

Vamos configurar o tamanho da fonte para 24.

Alinha no centro na horizontal e vertical

e configurar o texto default para Food 100.

Vamos configurar a fonte

para PressStart2P-Regular

Perceba que novamente o texto foi cortado.

Vamos configurar os overflows horizontal

e vertical para Overflow.

Vamos chamar o texto de FoodText

e o que nós podemos ver aqui é que o objeto FoodText

está sendo exibido na frente da imagem de título da fase.

Não queremos que isto ocorra então o que vamos fazer

é mover FoodText para mais alto na hierarquia

para que ele fique diretamente embaixo de Canvas.

Isso significa que ele será renderizado atrás

de LevelImage e seu filho LevelText.

A última coisa que vamos fazer é

desativar temporariamente LevelImage

e mover FoodText para cima

só um pouco do fundo da tela.

Vamos fazer isso configurando os anchors.

Vamos configurar Y anchor para 0.05.

Podemos ver que o texto se move na interface

e vamos configurar Max para 0.05 também.

Perca que o texto não se moveu quando fizemos isso.

mas ocorreu um offset de -13 pixels no rect transform.

Vamos configurar a posição Y para 0

e veremos o texto se mover para cima.

Vamos reativar LevelImage

e agora podemos criar o script

para controlar os elementos de interface.

Vamos para o folder Scripts

e abrir o script Game Manager no Monodevelop.

Em seguida vamos adicionar o código que precisamos

no Game Manager para gerenciar a interface

e também para gerenciar a transição entre níveis.

Vamos reiniciar o variável level para 1

para que agora o jogo inicie na fase 1.

A primeira coisa que vamos fazer é adicionar ao script Game Manager

é a declaração de namespace using UnityEngine.UI.

Em seguida vamos adicionar uma variável public float

chamada levelStartDelay.

Esse é o tempo que vamos esperar antes

de mudar de fase, em segundos.

Agora vamos adicionar uma variável private

do tipo Text chamada levelText.

Este será o texto que será exibirá

o número da fase atual que acabamos de configurar

para "Day 1" no editor.

Vamos também declarar uma variável private

do tipo GameObject chamada levelImage.

Vamos usar essa variável para armazenar a imagem LevelImage

para que possamos ativar e desativar a imagem

conforme necessário.

Vamos também adicionar uma variável private boolean

chamada doingSetup que vamos usar para

verificar se estamos criando a fase e evitar

que o jogador se mova durante a criação.

Depois da função Awake vamos adicionar

uma nova função private que retorna void

chamada OnLevelWasLoaded que recebe um parâmetro integer

chamado index.

OnLevelWasLoaded é parte da API da Unity

e é chamada toda vez que uma cena é carregada.

Vamos utilizar essa função para incrementar o número da fase

e chamar a função InitGame

depois que uma fase é carregada.

Vamos usar InitGame para gerenciar

os elementos de UI e configurar cada fase.

Vamos começar configurando a variável doingSetup para true.

Isso significa que o jogador não poderá se mover enquanto

o título da fase é exibido.

Agora vamos obter uma referência

para o objeto LevelImage

usando GameObject.Find.

Aqui vamos procurar por nome, portanto

certifique-se que o nome do seu game object

no editor é exatamente igual ao nome que é passado

a função GameObject.Find.

Vamos fazer o mesmo para LevelText

mas vamos também obter uma referência ao

componente Text.

Em seguida vamos configurar o texto

do objeto LevelText para o número da fase atual.

O texto que estamos configurando será uma string portanto

temos que fornecer a variável "Day " com um

espaço no final e vamos adicionar

o número da fase no final da string,

nesse caso o texto será "Day 1".

Vamos ativar o objeto LevelImage

usando SetActive.

Em seguida vamos declarar uma função private

que retorna void chamada HideLevelImage.

Vamos usar essa função para desativar LevelImage

quando estivermos prontos para iniciar a fase, e vamos chamar

essa função de dentro de InitGame.

Dentro de HideLevelImage vamos desativar

o objeto LevelImage.

E vamos também configurar DoingSetup

para false para que o jogador possa agora se mover.

De volta a InitGame vamos

chamar HideLevelImage

passando LevelStartDelay como o tempo de espera.

Isso significa que enquanto exibimos o título da fase

vamos esperar 2 segundos antes de desligá-lo.

Em Update vamos adicionar uma

verificação de DoingSetup ao if.

É isso que irá evitar que o jogador se mova

caso DoingSetup seja verdade.

Em GameOver vamos mostrar a mensagem para o jogador

dizendo quantos dias ele sobreviveu.

A mensagem vai ser

"After level number of days you starved".

Vamos também ativar nosso fundo preto.

Vamos salvar o script e retornar ao editor.

Em seguida vamos adicionar algumas

linhas de código ao script Player

para que a classe Player possa atualizar o objeto FoodText

conforme o valor muda.

Vamos abrir o script Player no Monodevelop

Em Player vamos também adicionar a declaração de namespace

using UnityEngine.UI.

Em seguida vamos adicionar a variável public

do tipo Text chamada foodText.

Na função Start vamos configurar o valor

de foodText para o valor atual de Food.

Em AttemptMove vamos fazer o mesmo

depois de subtrairmos do placar do jogador.

Vamos também mostrar uma mensagem

quando o jogador pega uma comida

ou soda.

Quando o jogador pega um objeto de comida

vamos mostrar "+ pointsPerFood"

junto com o valor atual do placar.

Vamos fazer o mesmo para soda.

Em loseFood vamos exibir uma mensagem

similar mostrando quantos pontos

o jogador perdeu quando foi atacado.

Vamos salvar o script e retornar ao editor.

No editor vamos configurar uma referência

para o objeto FoodText ao nosso jogador.

Vamos escolher Player

e em seguida vamos arrastar FoodText

para a variável FoodText.

Vamos executar nossa cena e testar.

Podemos ver o título da fase, isso está funcionando.

Quando movemos o jogador o texto com o placar do jogador é atualizado.

Há a espera quando mudamos para uma nova fase.

O título é exibido com o número da nova fase.

Quando o inimigo nos ataca

Nós vemos a mensagem "-10".

Então parece que está tudo funcionando.

Agora que os elementos de UI estão funcionando

no próximo vídeo vamos adicionar

efeitos sonoros e música

e os scripts necessários para o controle dos mesmos.