0:00:02.441,0:00:04.767
Nesse vídeo vamos adicionar alguns

0:00:04.767,0:00:07.723
elementos de interface de usuário ao nosso jogo

0:00:07.723,0:00:11.936
incluindo títulos para quando começamos o jogo e mudamos de fase

0:00:11.936,0:00:14.765
e text para mostrar o placar do jogador.

0:00:15.916,0:00:18.572
Para fazer isso vamos usar o sistema de UI da Unity.

0:00:19.265,0:00:24.699
Vamos clicar em Game Object - UI - Canvas.

0:00:27.639,0:00:29.639
O canvas vai conter todos

0:00:29.639,0:00:31.639
os elementos de interface.

0:00:33.054,0:00:35.054
O primeiro elemento que iremos criar será

0:00:35.054,0:00:37.054
uma imagem que utilizaremos

0:00:37.054,0:00:39.702
como fundo para nossos títulos.

0:00:40.312,0:00:43.974
Vamos clicar em Game Object - UI - Image.

0:00:46.082,0:00:48.805
Perceba que esse objeto é criado como filho de Canvas

0:00:49.346,0:00:51.346
e a primeira coisa que faremos

0:00:51.346,0:00:53.737
e mudar para a nossa scene view e afastar o zoom.

0:00:56.439,0:00:58.439
E vamos usar os anchors pre-configurados

0:00:58.439,0:01:02.191
para esticar essa imagem fazendo ctrl+click (option-click no MacOS).

0:01:07.060,0:01:09.734
Vamos configurar a cor para preto.

0:01:15.829,0:01:18.122
E chamar de Level Image.

0:01:21.324,0:01:23.725
Em seguida vamos criar um objeto de texto

0:01:23.725,0:01:25.725
que irá mostrar qual a fase

0:01:25.725,0:01:27.725
em que o jogador está

0:01:27.725,0:01:29.725
quando começamos o jogo ou mudamos de fase.

0:01:30.016,0:01:32.016
Vamos selecionar a imagem

0:01:32.599,0:01:37.105
Clicar em Game Object - UI - Text.

0:01:37.105,0:01:38.760
Vamos chamar de Level Text.

0:01:38.760,0:01:40.760
A primeira coisa que vamos fazer é ancorar a imagem

0:01:40.760,0:01:43.832
ao centro da tela, vamos clicar nos anchor presets

0:01:44.304,0:01:47.007
e fazer alt-click (option click no MacOS) no preset do centro.

0:01:50.656,0:01:52.656
Agora vamos configurar a cor do texto

0:01:52.656,0:01:54.656
para branco clicando em Colour

0:01:55.502,0:01:57.502
e arrastando até branco.

0:01:58.903,0:02:01.277
Vamos configurar o tamanho da fonte para 32.

0:02:02.969,0:02:06.045
Perceba que quando fazemos isso o texto desaparece.

0:02:06.045,0:02:08.045
Isso acontece porque o texto ficou

0:02:08.045,0:02:10.045
muito grande para encaixar na largura

0:02:10.045,0:02:12.558
e altura especificadas no rect transform.

0:02:13.141,0:02:15.141
Como vamos ter um texto que vai variar

0:02:15.141,0:02:19.170
de tamanho mostrando tanto o número da fase e nossa mensagem de fim de jogo

0:02:19.170,0:02:21.170
vamos usar a configuração de overflow

0:02:21.170,0:02:24.219
horizontal e vertical para permitir que o texto "vaze".

0:02:24.823,0:02:28.320
Vamos configurar o overflow horizontal para overflow

0:02:28.320,0:02:31.459
e o overflow vertical para overflow também.

0:02:31.459,0:02:35.007
Agora nosso texto aparece de novo, vamos também centralizá-lo

0:02:35.735,0:02:37.735
na horizontal e na vertical.

0:02:40.026,0:02:43.233
Vamos configurar a fonte clicando no asset picker.

0:02:44.224,0:02:46.224
E selecionar Press Start.

0:02:46.224,0:02:47.723


0:02:47.723,0:02:49.723
Essa fonte vem com o projeto.

0:02:52.122,0:02:55.404
Finalmente vamos configurar o texto padrão, que vai ser "Day 1".

0:02:56.163,0:02:58.430
E isso é suficiente para o texto da fase.

0:02:58.430,0:03:01.069
Agora vamos transformar o Level Text num filho de Level Image

0:03:01.069,0:03:03.069
dessa maneira quando desativamos Level Image

0:03:03.069,0:03:05.649
Level Text também será desativado.

0:03:08.437,0:03:11.450
Agora vamos criar o texto para a pontuação.

0:03:13.822,0:03:15.430
Selecione o Canvas,

0:03:15.430,0:03:18.515
clique em Game Object - UI - text.

0:03:18.956,0:03:20.956
Este text nós vamos alinhar com o fundo

0:03:20.956,0:03:22.610
da tela no centro.

0:03:23.095,0:03:25.012
Vamos clicar no anchor presets

0:03:25.414,0:03:28.101
e clicar no preset bottom center

0:03:28.101,0:03:30.478
pressionando o botão alt (ou option no MacOS).

0:03:35.538,0:03:37.202
Mais uma vez vamos configurar a cor para branco.

0:03:37.663,0:03:40.195
Clique em Colour, arraste para white.

0:03:42.012,0:03:44.012
Vamos configurar o tamanho da fonte para 24.

0:03:49.241,0:03:51.241
Alinha no centro na horizontal e vertical

0:03:52.253,0:03:55.421
e configurar o texto default para Food 100.

0:04:01.871,0:04:03.871
Vamos configurar a fonte

0:04:04.953,0:04:06.953
para PressStart2P-Regular

0:04:07.480,0:04:09.869
Perceba que novamente o texto foi cortado.

0:04:10.465,0:04:12.072
Vamos configurar os overflows horizontal

0:04:12.853,0:04:15.308
e vertical para Overflow.

0:04:16.917,0:04:19.234
Vamos chamar o texto de FoodText

0:04:19.234,0:04:21.712
e o que nós podemos ver aqui é que o objeto FoodText

0:04:21.712,0:04:25.577
está sendo exibido na frente da imagem de título da fase.

0:04:26.049,0:04:27.983
Não queremos que isto ocorra então o que vamos fazer

0:04:27.983,0:04:30.347
é mover FoodText para mais alto na hierarquia

0:04:30.347,0:04:32.347
para que ele fique diretamente embaixo de Canvas.

0:04:32.819,0:04:35.278
Isso significa que ele será renderizado atrás

0:04:35.278,0:04:38.173
de LevelImage e seu filho LevelText.

0:04:38.589,0:04:40.825
A última coisa que vamos fazer é

0:04:41.338,0:04:43.683
desativar temporariamente LevelImage

0:04:44.071,0:04:46.071
e mover FoodText para cima

0:04:46.071,0:04:47.850
só um pouco do fundo da tela.

0:04:47.850,0:04:50.112
Vamos fazer isso configurando os anchors.

0:04:50.570,0:04:54.729
Vamos configurar Y anchor para 0.05.

0:04:55.381,0:04:57.937
Podemos ver que o texto se move na interface

0:04:57.937,0:05:01.120
e vamos configurar Max para 0.05 também.

0:05:01.689,0:05:04.312
Perca que o texto não se moveu quando fizemos isso.

0:05:04.700,0:05:09.115
mas ocorreu um offset de -13 pixels no rect transform.

0:05:09.392,0:05:12.485
Vamos configurar a posição Y para 0

0:05:12.485,0:05:14.485
e veremos o texto se mover para cima.

0:05:16.052,0:05:18.551
Vamos reativar LevelImage

0:05:18.551,0:05:20.551
e agora podemos criar o script

0:05:20.551,0:05:22.551
para controlar os elementos de interface.

0:05:28.903,0:05:30.693
Vamos para o folder Scripts

0:05:31.567,0:05:33.567
e abrir o script Game Manager no Monodevelop.

0:05:35.398,0:05:37.398
Em seguida vamos adicionar o código que precisamos

0:05:37.398,0:05:39.923
no Game Manager para gerenciar a interface

0:05:39.923,0:05:42.578
e também para gerenciar a transição entre níveis.

0:05:42.578,0:05:45.563
Vamos reiniciar o variável level para 1

0:05:45.563,0:05:47.563
para que agora o jogo inicie na fase 1.

0:05:47.563,0:05:50.033
A primeira coisa que vamos fazer é adicionar ao script Game Manager

0:05:50.033,0:05:53.567
é a declaração de namespace using UnityEngine.UI.

0:05:53.872,0:05:56.162
Em seguida vamos adicionar uma variável public float

0:05:56.162,0:05:58.412
chamada levelStartDelay.

0:05:58.911,0:06:00.911
Esse é o tempo que vamos esperar antes

0:06:00.911,0:06:03.399
de mudar de fase, em segundos.

0:06:03.399,0:06:05.833
Agora vamos adicionar uma variável private

0:06:05.833,0:06:08.448
do tipo Text chamada levelText.

0:06:08.920,0:06:11.309
Este será o texto que será exibirá

0:06:11.309,0:06:14.227
o número da fase atual que acabamos de configurar

0:06:14.227,0:06:16.227
para "Day 1" no editor.

0:06:16.601,0:06:18.601
Vamos também declarar uma variável private

0:06:18.601,0:06:21.513
do tipo GameObject chamada levelImage.

0:06:22.276,0:06:25.002
Vamos usar essa variável para armazenar a imagem LevelImage

0:06:25.002,0:06:27.710
para que possamos ativar e desativar a imagem

0:06:27.710,0:06:29.710
conforme necessário.

0:06:29.710,0:06:31.710
Vamos também adicionar uma variável private boolean

0:06:31.710,0:06:35.113
chamada doingSetup que vamos usar para

0:06:35.113,0:06:37.604
verificar se estamos criando a fase e evitar

0:06:37.604,0:06:39.785
que o jogador se mova durante a criação.

0:06:39.785,0:06:41.785
Depois da função Awake vamos adicionar

0:06:41.785,0:06:44.408
uma nova função private que retorna void

0:06:44.408,0:06:47.465
chamada OnLevelWasLoaded que recebe um parâmetro integer

0:06:47.465,0:06:49.858
chamado index.

0:06:49.858,0:06:52.598
OnLevelWasLoaded é parte da API da Unity

0:06:53.167,0:06:56.210
e é chamada toda vez que uma cena é carregada.

0:06:56.765,0:06:59.470
Vamos utilizar essa função para incrementar o número da fase

0:06:59.470,0:07:01.470
e chamar a função InitGame

0:07:01.470,0:07:03.470
depois que uma fase é carregada.

0:07:04.080,0:07:06.663
Vamos usar InitGame para gerenciar

0:07:06.663,0:07:09.657
os elementos de UI e configurar cada fase.

0:07:10.101,0:07:12.970
Vamos começar configurando a variável doingSetup para true.

0:07:13.677,0:07:15.677
Isso significa que o jogador não poderá se mover enquanto

0:07:15.677,0:07:17.329
o título da fase é exibido.

0:07:17.329,0:07:19.329
Agora vamos obter uma referência

0:07:19.329,0:07:21.329
para o objeto LevelImage

0:07:21.329,0:07:23.329
usando GameObject.Find.

0:07:23.329,0:07:25.329
Aqui vamos procurar por nome, portanto

0:07:25.329,0:07:27.329
certifique-se que o nome do seu game object

0:07:27.329,0:07:29.844
no editor é exatamente igual ao nome que é passado

0:07:29.844,0:07:31.678
a função GameObject.Find.

0:07:31.678,0:07:33.678
Vamos fazer o mesmo para LevelText

0:07:33.678,0:07:35.678
mas vamos também obter uma referência ao

0:07:35.678,0:07:37.414
componente Text.

0:07:37.414,0:07:39.414
Em seguida vamos configurar o texto

0:07:39.414,0:07:41.844
do objeto LevelText para o número da fase atual.

0:07:42.856,0:07:44.856
O texto que estamos configurando será uma string portanto

0:07:44.856,0:07:46.856
temos que fornecer a variável "Day " com um

0:07:46.856,0:07:48.856
espaço no final e vamos adicionar

0:07:49.439,0:07:52.357
o número da fase no final da string,

0:07:52.357,0:07:55.737
nesse caso o texto será "Day 1".

0:07:56.625,0:07:58.818
Vamos ativar o objeto LevelImage

0:07:58.818,0:08:01.221
usando SetActive.

0:08:01.776,0:08:03.776
Em seguida vamos declarar uma função private

0:08:03.776,0:08:06.614
que retorna void chamada HideLevelImage.

0:08:07.044,0:08:09.279
Vamos usar essa função para desativar LevelImage

0:08:09.279,0:08:11.279
quando estivermos prontos para iniciar a fase, e vamos chamar

0:08:11.279,0:08:13.279
essa função de dentro de InitGame.

0:08:14.070,0:08:16.680
Dentro de HideLevelImage vamos desativar

0:08:16.680,0:08:18.080
o objeto LevelImage.

0:08:18.791,0:08:21.356
E vamos também configurar DoingSetup

0:08:21.356,0:08:23.817
para false para que o jogador possa agora se mover.

0:08:23.817,0:08:25.817
De volta a InitGame vamos

0:08:25.817,0:08:27.817
chamar HideLevelImage

0:08:28.178,0:08:31.503
passando LevelStartDelay como o tempo de espera.

0:08:32.955,0:08:35.431
Isso significa que enquanto exibimos o título da fase

0:08:35.431,0:08:38.240
vamos esperar 2 segundos antes de desligá-lo.

0:08:38.712,0:08:40.712
Em Update vamos adicionar uma

0:08:40.712,0:08:44.435
verificação de DoingSetup ao if.

0:08:44.990,0:08:46.990
É isso que irá evitar que o jogador se mova

0:08:46.990,0:08:48.990
caso DoingSetup seja verdade.

0:08:49.295,0:08:52.023
Em GameOver vamos mostrar a mensagem para o jogador

0:08:52.023,0:08:54.023
dizendo quantos dias ele sobreviveu.

0:08:54.883,0:08:56.757
A mensagem vai ser

0:08:56.757,0:09:00.747
"After level number of days you starved".

0:09:01.552,0:09:04.316
Vamos também ativar nosso fundo preto.

0:09:07.559,0:09:10.113
Vamos salvar o script e retornar ao editor.

0:09:12.693,0:09:14.693
Em seguida vamos adicionar algumas

0:09:14.693,0:09:16.693
linhas de código ao script Player

0:09:16.693,0:09:19.082
para que a classe Player possa atualizar o objeto FoodText

0:09:19.082,0:09:20.594
conforme o valor muda.

0:09:20.594,0:09:22.594
Vamos abrir o script Player no Monodevelop

0:09:23.731,0:09:26.233
Em Player vamos também adicionar a declaração de namespace

0:09:26.233,0:09:29.205
using UnityEngine.UI.

0:09:29.205,0:09:32.748
Em seguida vamos adicionar a variável public

0:09:32.748,0:09:34.748
do tipo Text chamada foodText.

0:09:35.261,0:09:37.261
Na função Start vamos configurar o valor

0:09:37.261,0:09:40.015
de foodText para o valor atual de Food.

0:09:41.984,0:09:43.984
Em AttemptMove vamos fazer o mesmo

0:09:43.984,0:09:47.078
depois de subtrairmos do placar do jogador.

0:09:47.855,0:09:49.855
Vamos também mostrar uma mensagem

0:09:49.855,0:09:52.370
quando o jogador pega uma comida

0:09:52.370,0:09:54.370
ou soda.

0:10:00.875,0:10:03.651
Quando o jogador pega um objeto de comida

0:10:03.651,0:10:06.664
vamos mostrar "+ pointsPerFood"

0:10:07.399,0:10:09.343
junto com o valor atual do placar.

0:10:09.343,0:10:11.343
Vamos fazer o mesmo para soda.

0:10:12.813,0:10:14.813
Em loseFood vamos exibir uma mensagem

0:10:14.813,0:10:16.813
similar mostrando quantos pontos

0:10:16.813,0:10:19.242
o jogador perdeu quando foi atacado.

0:10:23.750,0:10:26.152
Vamos salvar o script e retornar ao editor.

0:10:29.134,0:10:31.134
No editor vamos configurar uma referência

0:10:31.134,0:10:33.584
para o objeto FoodText ao nosso jogador.

0:10:35.207,0:10:37.207
Vamos escolher Player

0:10:37.207,0:10:39.207
e em seguida vamos arrastar FoodText

0:10:41.565,0:10:43.565
para a variável FoodText.

0:10:45.534,0:10:47.534
Vamos executar nossa cena e testar.

0:10:48.727,0:10:50.937
Podemos ver o título da fase, isso está funcionando.

0:10:51.450,0:10:53.885
Quando movemos o jogador o texto com o placar do jogador é atualizado.

0:10:56.853,0:10:59.147
Há a espera quando mudamos para uma nova fase.

0:10:59.147,0:11:01.329
O título é exibido com o número da nova fase.

0:11:01.898,0:11:03.331
Quando o inimigo nos ataca

0:11:03.331,0:11:05.331
Nós vemos a mensagem "-10".

0:11:06.813,0:11:08.813
Então parece que está tudo funcionando.

0:11:09.687,0:11:12.311
Agora que os elementos de UI estão funcionando

0:11:12.311,0:11:14.311
no próximo vídeo vamos adicionar

0:11:14.311,0:11:17.193
efeitos sonoros e música

0:11:17.193,0:11:19.703
e os scripts necessários para o controle dos mesmos.