WEBVTT 00:00:02.441 --> 00:00:04.767 Nesse vídeo vamos adicionar alguns 00:00:04.767 --> 00:00:07.723 elementos de interface de usuário ao nosso jogo 00:00:07.723 --> 00:00:11.936 incluindo títulos para quando começamos o jogo e mudamos de fase 00:00:11.936 --> 00:00:14.765 e text para mostrar o placar do jogador. 00:00:15.916 --> 00:00:18.572 Para fazer isso vamos usar o sistema de UI da Unity. 00:00:19.265 --> 00:00:24.699 Vamos clicar em Game Object - UI - Canvas. 00:00:27.639 --> 00:00:29.639 O canvas vai conter todos 00:00:29.639 --> 00:00:31.639 os elementos de interface. 00:00:33.054 --> 00:00:35.054 O primeiro elemento que iremos criar será 00:00:35.054 --> 00:00:37.054 uma imagem que utilizaremos 00:00:37.054 --> 00:00:39.702 como fundo para nossos títulos. 00:00:40.312 --> 00:00:43.974 Vamos clicar em Game Object - UI - Image. 00:00:46.082 --> 00:00:48.805 Perceba que esse objeto é criado como filho de Canvas 00:00:49.346 --> 00:00:51.346 e a primeira coisa que faremos 00:00:51.346 --> 00:00:53.737 e mudar para a nossa scene view e afastar o zoom. 00:00:56.439 --> 00:00:58.439 E vamos usar os anchors pre-configurados 00:00:58.439 --> 00:01:02.191 para esticar essa imagem fazendo ctrl+click (option-click no MacOS). 00:01:07.060 --> 00:01:09.734 Vamos configurar a cor para preto. 00:01:15.829 --> 00:01:18.122 E chamar de Level Image. 00:01:21.324 --> 00:01:23.725 Em seguida vamos criar um objeto de texto 00:01:23.725 --> 00:01:25.725 que irá mostrar qual a fase 00:01:25.725 --> 00:01:27.725 em que o jogador está 00:01:27.725 --> 00:01:29.725 quando começamos o jogo ou mudamos de fase. 00:01:30.016 --> 00:01:32.016 Vamos selecionar a imagem 00:01:32.599 --> 00:01:37.105 Clicar em Game Object - UI - Text. 00:01:37.105 --> 00:01:38.760 Vamos chamar de Level Text. 00:01:38.760 --> 00:01:40.760 A primeira coisa que vamos fazer é ancorar a imagem 00:01:40.760 --> 00:01:43.832 ao centro da tela, vamos clicar nos anchor presets 00:01:44.304 --> 00:01:47.007 e fazer alt-click (option click no MacOS) no preset do centro. 00:01:50.656 --> 00:01:52.656 Agora vamos configurar a cor do texto 00:01:52.656 --> 00:01:54.656 para branco clicando em Colour 00:01:55.502 --> 00:01:57.502 e arrastando até branco. 00:01:58.903 --> 00:02:01.277 Vamos configurar o tamanho da fonte para 32. 00:02:02.969 --> 00:02:06.045 Perceba que quando fazemos isso o texto desaparece. 00:02:06.045 --> 00:02:08.045 Isso acontece porque o texto ficou 00:02:08.045 --> 00:02:10.045 muito grande para encaixar na largura 00:02:10.045 --> 00:02:12.558 e altura especificadas no rect transform. 00:02:13.141 --> 00:02:15.141 Como vamos ter um texto que vai variar 00:02:15.141 --> 00:02:19.170 de tamanho mostrando tanto o número da fase e nossa mensagem de fim de jogo 00:02:19.170 --> 00:02:21.170 vamos usar a configuração de overflow 00:02:21.170 --> 00:02:24.219 horizontal e vertical para permitir que o texto "vaze". 00:02:24.823 --> 00:02:28.320 Vamos configurar o overflow horizontal para overflow 00:02:28.320 --> 00:02:31.459 e o overflow vertical para overflow também. 00:02:31.459 --> 00:02:35.007 Agora nosso texto aparece de novo, vamos também centralizá-lo 00:02:35.735 --> 00:02:37.735 na horizontal e na vertical. 00:02:40.026 --> 00:02:43.233 Vamos configurar a fonte clicando no asset picker. 00:02:44.224 --> 00:02:46.224 E selecionar Press Start. 00:02:46.224 --> 00:02:47.723 00:02:47.723 --> 00:02:49.723 Essa fonte vem com o projeto. 00:02:52.122 --> 00:02:55.404 Finalmente vamos configurar o texto padrão, que vai ser "Day 1". 00:02:56.163 --> 00:02:58.430 E isso é suficiente para o texto da fase. 00:02:58.430 --> 00:03:01.069 Agora vamos transformar o Level Text num filho de Level Image 00:03:01.069 --> 00:03:03.069 dessa maneira quando desativamos Level Image 00:03:03.069 --> 00:03:05.649 Level Text também será desativado. 00:03:08.437 --> 00:03:11.450 Agora vamos criar o texto para a pontuação. 00:03:13.822 --> 00:03:15.430 Selecione o Canvas, 00:03:15.430 --> 00:03:18.515 clique em Game Object - UI - text. 00:03:18.956 --> 00:03:20.956 Este text nós vamos alinhar com o fundo 00:03:20.956 --> 00:03:22.610 da tela no centro. 00:03:23.095 --> 00:03:25.012 Vamos clicar no anchor presets 00:03:25.414 --> 00:03:28.101 e clicar no preset bottom center 00:03:28.101 --> 00:03:30.478 pressionando o botão alt (ou option no MacOS). 00:03:35.538 --> 00:03:37.202 Mais uma vez vamos configurar a cor para branco. 00:03:37.663 --> 00:03:40.195 Clique em Colour, arraste para white. 00:03:42.012 --> 00:03:44.012 Vamos configurar o tamanho da fonte para 24. 00:03:49.241 --> 00:03:51.241 Alinha no centro na horizontal e vertical 00:03:52.253 --> 00:03:55.421 e configurar o texto default para Food 100. 00:04:01.871 --> 00:04:03.871 Vamos configurar a fonte 00:04:04.953 --> 00:04:06.953 para PressStart2P-Regular 00:04:07.480 --> 00:04:09.869 Perceba que novamente o texto foi cortado. 00:04:10.465 --> 00:04:12.072 Vamos configurar os overflows horizontal 00:04:12.853 --> 00:04:15.308 e vertical para Overflow. 00:04:16.917 --> 00:04:19.234 Vamos chamar o texto de FoodText 00:04:19.234 --> 00:04:21.712 e o que nós podemos ver aqui é que o objeto FoodText 00:04:21.712 --> 00:04:25.577 está sendo exibido na frente da imagem de título da fase. 00:04:26.049 --> 00:04:27.983 Não queremos que isto ocorra então o que vamos fazer 00:04:27.983 --> 00:04:30.347 é mover FoodText para mais alto na hierarquia 00:04:30.347 --> 00:04:32.347 para que ele fique diretamente embaixo de Canvas. 00:04:32.819 --> 00:04:35.278 Isso significa que ele será renderizado atrás 00:04:35.278 --> 00:04:38.173 de LevelImage e seu filho LevelText. 00:04:38.589 --> 00:04:40.825 A última coisa que vamos fazer é 00:04:41.338 --> 00:04:43.683 desativar temporariamente LevelImage 00:04:44.071 --> 00:04:46.071 e mover FoodText para cima 00:04:46.071 --> 00:04:47.850 só um pouco do fundo da tela. 00:04:47.850 --> 00:04:50.112 Vamos fazer isso configurando os anchors. 00:04:50.570 --> 00:04:54.729 Vamos configurar Y anchor para 0.05. 00:04:55.381 --> 00:04:57.937 Podemos ver que o texto se move na interface 00:04:57.937 --> 00:05:01.120 e vamos configurar Max para 0.05 também. 00:05:01.689 --> 00:05:04.312 Perca que o texto não se moveu quando fizemos isso. 00:05:04.700 --> 00:05:09.115 mas ocorreu um offset de -13 pixels no rect transform. 00:05:09.392 --> 00:05:12.485 Vamos configurar a posição Y para 0 00:05:12.485 --> 00:05:14.485 e veremos o texto se mover para cima. 00:05:16.052 --> 00:05:18.551 Vamos reativar LevelImage 00:05:18.551 --> 00:05:20.551 e agora podemos criar o script 00:05:20.551 --> 00:05:22.551 para controlar os elementos de interface. 00:05:28.903 --> 00:05:30.693 Vamos para o folder Scripts 00:05:31.567 --> 00:05:33.567 e abrir o script Game Manager no Monodevelop. 00:05:35.398 --> 00:05:37.398 Em seguida vamos adicionar o código que precisamos 00:05:37.398 --> 00:05:39.923 no Game Manager para gerenciar a interface 00:05:39.923 --> 00:05:42.578 e também para gerenciar a transição entre níveis. 00:05:42.578 --> 00:05:45.563 Vamos reiniciar o variável level para 1 00:05:45.563 --> 00:05:47.563 para que agora o jogo inicie na fase 1. 00:05:47.563 --> 00:05:50.033 A primeira coisa que vamos fazer é adicionar ao script Game Manager 00:05:50.033 --> 00:05:53.567 é a declaração de namespace using UnityEngine.UI. 00:05:53.872 --> 00:05:56.162 Em seguida vamos adicionar uma variável public float 00:05:56.162 --> 00:05:58.412 chamada levelStartDelay. 00:05:58.911 --> 00:06:00.911 Esse é o tempo que vamos esperar antes 00:06:00.911 --> 00:06:03.399 de mudar de fase, em segundos. 00:06:03.399 --> 00:06:05.833 Agora vamos adicionar uma variável private 00:06:05.833 --> 00:06:08.448 do tipo Text chamada levelText. 00:06:08.920 --> 00:06:11.309 Este será o texto que será exibirá 00:06:11.309 --> 00:06:14.227 o número da fase atual que acabamos de configurar 00:06:14.227 --> 00:06:16.227 para "Day 1" no editor. 00:06:16.601 --> 00:06:18.601 Vamos também declarar uma variável private 00:06:18.601 --> 00:06:21.513 do tipo GameObject chamada levelImage. 00:06:22.276 --> 00:06:25.002 Vamos usar essa variável para armazenar a imagem LevelImage 00:06:25.002 --> 00:06:27.710 para que possamos ativar e desativar a imagem 00:06:27.710 --> 00:06:29.710 conforme necessário. 00:06:29.710 --> 00:06:31.710 Vamos também adicionar uma variável private boolean 00:06:31.710 --> 00:06:35.113 chamada doingSetup que vamos usar para 00:06:35.113 --> 00:06:37.604 verificar se estamos criando a fase e evitar 00:06:37.604 --> 00:06:39.785 que o jogador se mova durante a criação. 00:06:39.785 --> 00:06:41.785 Depois da função Awake vamos adicionar 00:06:41.785 --> 00:06:44.408 uma nova função private que retorna void 00:06:44.408 --> 00:06:47.465 chamada OnLevelWasLoaded que recebe um parâmetro integer 00:06:47.465 --> 00:06:49.858 chamado index. 00:06:49.858 --> 00:06:52.598 OnLevelWasLoaded é parte da API da Unity 00:06:53.167 --> 00:06:56.210 e é chamada toda vez que uma cena é carregada. 00:06:56.765 --> 00:06:59.470 Vamos utilizar essa função para incrementar o número da fase 00:06:59.470 --> 00:07:01.470 e chamar a função InitGame 00:07:01.470 --> 00:07:03.470 depois que uma fase é carregada. 00:07:04.080 --> 00:07:06.663 Vamos usar InitGame para gerenciar 00:07:06.663 --> 00:07:09.657 os elementos de UI e configurar cada fase. 00:07:10.101 --> 00:07:12.970 Vamos começar configurando a variável doingSetup para true. 00:07:13.677 --> 00:07:15.677 Isso significa que o jogador não poderá se mover enquanto 00:07:15.677 --> 00:07:17.329 o título da fase é exibido. 00:07:17.329 --> 00:07:19.329 Agora vamos obter uma referência 00:07:19.329 --> 00:07:21.329 para o objeto LevelImage 00:07:21.329 --> 00:07:23.329 usando GameObject.Find. 00:07:23.329 --> 00:07:25.329 Aqui vamos procurar por nome, portanto 00:07:25.329 --> 00:07:27.329 certifique-se que o nome do seu game object 00:07:27.329 --> 00:07:29.844 no editor é exatamente igual ao nome que é passado 00:07:29.844 --> 00:07:31.678 a função GameObject.Find. 00:07:31.678 --> 00:07:33.678 Vamos fazer o mesmo para LevelText 00:07:33.678 --> 00:07:35.678 mas vamos também obter uma referência ao 00:07:35.678 --> 00:07:37.414 componente Text. 00:07:37.414 --> 00:07:39.414 Em seguida vamos configurar o texto 00:07:39.414 --> 00:07:41.844 do objeto LevelText para o número da fase atual. 00:07:42.856 --> 00:07:44.856 O texto que estamos configurando será uma string portanto 00:07:44.856 --> 00:07:46.856 temos que fornecer a variável "Day " com um 00:07:46.856 --> 00:07:48.856 espaço no final e vamos adicionar 00:07:49.439 --> 00:07:52.357 o número da fase no final da string, 00:07:52.357 --> 00:07:55.737 nesse caso o texto será "Day 1". 00:07:56.625 --> 00:07:58.818 Vamos ativar o objeto LevelImage 00:07:58.818 --> 00:08:01.221 usando SetActive. 00:08:01.776 --> 00:08:03.776 Em seguida vamos declarar uma função private 00:08:03.776 --> 00:08:06.614 que retorna void chamada HideLevelImage. 00:08:07.044 --> 00:08:09.279 Vamos usar essa função para desativar LevelImage 00:08:09.279 --> 00:08:11.279 quando estivermos prontos para iniciar a fase, e vamos chamar 00:08:11.279 --> 00:08:13.279 essa função de dentro de InitGame. 00:08:14.070 --> 00:08:16.680 Dentro de HideLevelImage vamos desativar 00:08:16.680 --> 00:08:18.080 o objeto LevelImage. 00:08:18.791 --> 00:08:21.356 E vamos também configurar DoingSetup 00:08:21.356 --> 00:08:23.817 para false para que o jogador possa agora se mover. 00:08:23.817 --> 00:08:25.817 De volta a InitGame vamos 00:08:25.817 --> 00:08:27.817 chamar HideLevelImage 00:08:28.178 --> 00:08:31.503 passando LevelStartDelay como o tempo de espera. 00:08:32.955 --> 00:08:35.431 Isso significa que enquanto exibimos o título da fase 00:08:35.431 --> 00:08:38.240 vamos esperar 2 segundos antes de desligá-lo. 00:08:38.712 --> 00:08:40.712 Em Update vamos adicionar uma 00:08:40.712 --> 00:08:44.435 verificação de DoingSetup ao if. 00:08:44.990 --> 00:08:46.990 É isso que irá evitar que o jogador se mova 00:08:46.990 --> 00:08:48.990 caso DoingSetup seja verdade. 00:08:49.295 --> 00:08:52.023 Em GameOver vamos mostrar a mensagem para o jogador 00:08:52.023 --> 00:08:54.023 dizendo quantos dias ele sobreviveu. 00:08:54.883 --> 00:08:56.757 A mensagem vai ser 00:08:56.757 --> 00:09:00.747 "After level number of days you starved". 00:09:01.552 --> 00:09:04.316 Vamos também ativar nosso fundo preto. 00:09:07.559 --> 00:09:10.113 Vamos salvar o script e retornar ao editor. 00:09:12.693 --> 00:09:14.693 Em seguida vamos adicionar algumas 00:09:14.693 --> 00:09:16.693 linhas de código ao script Player 00:09:16.693 --> 00:09:19.082 para que a classe Player possa atualizar o objeto FoodText 00:09:19.082 --> 00:09:20.594 conforme o valor muda. 00:09:20.594 --> 00:09:22.594 Vamos abrir o script Player no Monodevelop 00:09:23.731 --> 00:09:26.233 Em Player vamos também adicionar a declaração de namespace 00:09:26.233 --> 00:09:29.205 using UnityEngine.UI. 00:09:29.205 --> 00:09:32.748 Em seguida vamos adicionar a variável public 00:09:32.748 --> 00:09:34.748 do tipo Text chamada foodText. 00:09:35.261 --> 00:09:37.261 Na função Start vamos configurar o valor 00:09:37.261 --> 00:09:40.015 de foodText para o valor atual de Food. 00:09:41.984 --> 00:09:43.984 Em AttemptMove vamos fazer o mesmo 00:09:43.984 --> 00:09:47.078 depois de subtrairmos do placar do jogador. 00:09:47.855 --> 00:09:49.855 Vamos também mostrar uma mensagem 00:09:49.855 --> 00:09:52.370 quando o jogador pega uma comida 00:09:52.370 --> 00:09:54.370 ou soda. 00:10:00.875 --> 00:10:03.651 Quando o jogador pega um objeto de comida 00:10:03.651 --> 00:10:06.664 vamos mostrar "+ pointsPerFood" 00:10:07.399 --> 00:10:09.343 junto com o valor atual do placar. 00:10:09.343 --> 00:10:11.343 Vamos fazer o mesmo para soda. 00:10:12.813 --> 00:10:14.813 Em loseFood vamos exibir uma mensagem 00:10:14.813 --> 00:10:16.813 similar mostrando quantos pontos 00:10:16.813 --> 00:10:19.242 o jogador perdeu quando foi atacado. 00:10:23.750 --> 00:10:26.152 Vamos salvar o script e retornar ao editor. 00:10:29.134 --> 00:10:31.134 No editor vamos configurar uma referência 00:10:31.134 --> 00:10:33.584 para o objeto FoodText ao nosso jogador. 00:10:35.207 --> 00:10:37.207 Vamos escolher Player 00:10:37.207 --> 00:10:39.207 e em seguida vamos arrastar FoodText 00:10:41.565 --> 00:10:43.565 para a variável FoodText. 00:10:45.534 --> 00:10:47.534 Vamos executar nossa cena e testar. 00:10:48.727 --> 00:10:50.937 Podemos ver o título da fase, isso está funcionando. 00:10:51.450 --> 00:10:53.885 Quando movemos o jogador o texto com o placar do jogador é atualizado. 00:10:56.853 --> 00:10:59.147 Há a espera quando mudamos para uma nova fase. 00:10:59.147 --> 00:11:01.329 O título é exibido com o número da nova fase. 00:11:01.898 --> 00:11:03.331 Quando o inimigo nos ataca 00:11:03.331 --> 00:11:05.331 Nós vemos a mensagem "-10". 00:11:06.813 --> 00:11:08.813 Então parece que está tudo funcionando. 00:11:09.687 --> 00:11:12.311 Agora que os elementos de UI estão funcionando 00:11:12.311 --> 00:11:14.311 no próximo vídeo vamos adicionar 00:11:14.311 --> 00:11:17.193 efeitos sonoros e música 00:11:17.193 --> 00:11:19.703 e os scripts necessários para o controle dos mesmos.