1 00:00:02,441 --> 00:00:04,767 Nesse vídeo vamos adicionar alguns 2 00:00:04,767 --> 00:00:07,723 elementos de interface de usuário ao nosso jogo 3 00:00:07,723 --> 00:00:11,936 incluindo títulos para quando começamos o jogo e mudamos de fase 4 00:00:11,936 --> 00:00:14,765 e text para mostrar o placar do jogador. 5 00:00:15,916 --> 00:00:18,572 Para fazer isso vamos usar o sistema de UI da Unity. 6 00:00:19,265 --> 00:00:24,699 Vamos clicar em Game Object - UI - Canvas. 7 00:00:27,639 --> 00:00:29,639 O canvas vai conter todos 8 00:00:29,639 --> 00:00:31,639 os elementos de interface. 9 00:00:33,054 --> 00:00:35,054 O primeiro elemento que iremos criar será 10 00:00:35,054 --> 00:00:37,054 uma imagem que utilizaremos 11 00:00:37,054 --> 00:00:39,702 como fundo para nossos títulos. 12 00:00:40,312 --> 00:00:43,974 Vamos clicar em Game Object - UI - Image. 13 00:00:46,082 --> 00:00:48,805 Perceba que esse objeto é criado como filho de Canvas 14 00:00:49,346 --> 00:00:51,346 e a primeira coisa que faremos 15 00:00:51,346 --> 00:00:53,737 e mudar para a nossa scene view e afastar o zoom. 16 00:00:56,439 --> 00:00:58,439 E vamos usar os anchors pre-configurados 17 00:00:58,439 --> 00:01:02,191 para esticar essa imagem fazendo ctrl+click (option-click no MacOS). 18 00:01:07,060 --> 00:01:09,734 Vamos configurar a cor para preto. 19 00:01:15,829 --> 00:01:18,122 E chamar de Level Image. 20 00:01:21,324 --> 00:01:23,725 Em seguida vamos criar um objeto de texto 21 00:01:23,725 --> 00:01:25,725 que irá mostrar qual a fase 22 00:01:25,725 --> 00:01:27,725 em que o jogador está 23 00:01:27,725 --> 00:01:29,725 quando começamos o jogo ou mudamos de fase. 24 00:01:30,016 --> 00:01:32,016 Vamos selecionar a imagem 25 00:01:32,599 --> 00:01:37,105 Clicar em Game Object - UI - Text. 26 00:01:37,105 --> 00:01:38,760 Vamos chamar de Level Text. 27 00:01:38,760 --> 00:01:40,760 A primeira coisa que vamos fazer é ancorar a imagem 28 00:01:40,760 --> 00:01:43,832 ao centro da tela, vamos clicar nos anchor presets 29 00:01:44,304 --> 00:01:47,007 e fazer alt-click (option click no MacOS) no preset do centro. 30 00:01:50,656 --> 00:01:52,656 Agora vamos configurar a cor do texto 31 00:01:52,656 --> 00:01:54,656 para branco clicando em Colour 32 00:01:55,502 --> 00:01:57,502 e arrastando até branco. 33 00:01:58,903 --> 00:02:01,277 Vamos configurar o tamanho da fonte para 32. 34 00:02:02,969 --> 00:02:06,045 Perceba que quando fazemos isso o texto desaparece. 35 00:02:06,045 --> 00:02:08,045 Isso acontece porque o texto ficou 36 00:02:08,045 --> 00:02:10,045 muito grande para encaixar na largura 37 00:02:10,045 --> 00:02:12,558 e altura especificadas no rect transform. 38 00:02:13,141 --> 00:02:15,141 Como vamos ter um texto que vai variar 39 00:02:15,141 --> 00:02:19,170 de tamanho mostrando tanto o número da fase e nossa mensagem de fim de jogo 40 00:02:19,170 --> 00:02:21,170 vamos usar a configuração de overflow 41 00:02:21,170 --> 00:02:24,219 horizontal e vertical para permitir que o texto "vaze". 42 00:02:24,823 --> 00:02:28,320 Vamos configurar o overflow horizontal para overflow 43 00:02:28,320 --> 00:02:31,459 e o overflow vertical para overflow também. 44 00:02:31,459 --> 00:02:35,007 Agora nosso texto aparece de novo, vamos também centralizá-lo 45 00:02:35,735 --> 00:02:37,735 na horizontal e na vertical. 46 00:02:40,026 --> 00:02:43,233 Vamos configurar a fonte clicando no asset picker. 47 00:02:44,224 --> 00:02:46,224 E selecionar Press Start. 48 00:02:46,224 --> 00:02:47,723 49 00:02:47,723 --> 00:02:49,723 Essa fonte vem com o projeto. 50 00:02:52,122 --> 00:02:55,404 Finalmente vamos configurar o texto padrão, que vai ser "Day 1". 51 00:02:56,163 --> 00:02:58,430 E isso é suficiente para o texto da fase. 52 00:02:58,430 --> 00:03:01,069 Agora vamos transformar o Level Text num filho de Level Image 53 00:03:01,069 --> 00:03:03,069 dessa maneira quando desativamos Level Image 54 00:03:03,069 --> 00:03:05,649 Level Text também será desativado. 55 00:03:08,437 --> 00:03:11,450 Agora vamos criar o texto para a pontuação. 56 00:03:13,822 --> 00:03:15,430 Selecione o Canvas, 57 00:03:15,430 --> 00:03:18,515 clique em Game Object - UI - text. 58 00:03:18,956 --> 00:03:20,956 Este text nós vamos alinhar com o fundo 59 00:03:20,956 --> 00:03:22,610 da tela no centro. 60 00:03:23,095 --> 00:03:25,012 Vamos clicar no anchor presets 61 00:03:25,414 --> 00:03:28,101 e clicar no preset bottom center 62 00:03:28,101 --> 00:03:30,478 pressionando o botão alt (ou option no MacOS). 63 00:03:35,538 --> 00:03:37,202 Mais uma vez vamos configurar a cor para branco. 64 00:03:37,663 --> 00:03:40,195 Clique em Colour, arraste para white. 65 00:03:42,012 --> 00:03:44,012 Vamos configurar o tamanho da fonte para 24. 66 00:03:49,241 --> 00:03:51,241 Alinha no centro na horizontal e vertical 67 00:03:52,253 --> 00:03:55,421 e configurar o texto default para Food 100. 68 00:04:01,871 --> 00:04:03,871 Vamos configurar a fonte 69 00:04:04,953 --> 00:04:06,953 para PressStart2P-Regular 70 00:04:07,480 --> 00:04:09,869 Perceba que novamente o texto foi cortado. 71 00:04:10,465 --> 00:04:12,072 Vamos configurar os overflows horizontal 72 00:04:12,853 --> 00:04:15,308 e vertical para Overflow. 73 00:04:16,917 --> 00:04:19,234 Vamos chamar o texto de FoodText 74 00:04:19,234 --> 00:04:21,712 e o que nós podemos ver aqui é que o objeto FoodText 75 00:04:21,712 --> 00:04:25,577 está sendo exibido na frente da imagem de título da fase. 76 00:04:26,049 --> 00:04:27,983 Não queremos que isto ocorra então o que vamos fazer 77 00:04:27,983 --> 00:04:30,347 é mover FoodText para mais alto na hierarquia 78 00:04:30,347 --> 00:04:32,347 para que ele fique diretamente embaixo de Canvas. 79 00:04:32,819 --> 00:04:35,278 Isso significa que ele será renderizado atrás 80 00:04:35,278 --> 00:04:38,173 de LevelImage e seu filho LevelText. 81 00:04:38,589 --> 00:04:40,825 A última coisa que vamos fazer é 82 00:04:41,338 --> 00:04:43,683 desativar temporariamente LevelImage 83 00:04:44,071 --> 00:04:46,071 e mover FoodText para cima 84 00:04:46,071 --> 00:04:47,850 só um pouco do fundo da tela. 85 00:04:47,850 --> 00:04:50,112 Vamos fazer isso configurando os anchors. 86 00:04:50,570 --> 00:04:54,729 Vamos configurar Y anchor para 0.05. 87 00:04:55,381 --> 00:04:57,937 Podemos ver que o texto se move na interface 88 00:04:57,937 --> 00:05:01,120 e vamos configurar Max para 0.05 também. 89 00:05:01,689 --> 00:05:04,312 Perca que o texto não se moveu quando fizemos isso. 90 00:05:04,700 --> 00:05:09,115 mas ocorreu um offset de -13 pixels no rect transform. 91 00:05:09,392 --> 00:05:12,485 Vamos configurar a posição Y para 0 92 00:05:12,485 --> 00:05:14,485 e veremos o texto se mover para cima. 93 00:05:16,052 --> 00:05:18,551 Vamos reativar LevelImage 94 00:05:18,551 --> 00:05:20,551 e agora podemos criar o script 95 00:05:20,551 --> 00:05:22,551 para controlar os elementos de interface. 96 00:05:28,903 --> 00:05:30,693 Vamos para o folder Scripts 97 00:05:31,567 --> 00:05:33,567 e abrir o script Game Manager no Monodevelop. 98 00:05:35,398 --> 00:05:37,398 Em seguida vamos adicionar o código que precisamos 99 00:05:37,398 --> 00:05:39,923 no Game Manager para gerenciar a interface 100 00:05:39,923 --> 00:05:42,578 e também para gerenciar a transição entre níveis. 101 00:05:42,578 --> 00:05:45,563 Vamos reiniciar o variável level para 1 102 00:05:45,563 --> 00:05:47,563 para que agora o jogo inicie na fase 1. 103 00:05:47,563 --> 00:05:50,033 A primeira coisa que vamos fazer é adicionar ao script Game Manager 104 00:05:50,033 --> 00:05:53,567 é a declaração de namespace using UnityEngine.UI. 105 00:05:53,872 --> 00:05:56,162 Em seguida vamos adicionar uma variável public float 106 00:05:56,162 --> 00:05:58,412 chamada levelStartDelay. 107 00:05:58,911 --> 00:06:00,911 Esse é o tempo que vamos esperar antes 108 00:06:00,911 --> 00:06:03,399 de mudar de fase, em segundos. 109 00:06:03,399 --> 00:06:05,833 Agora vamos adicionar uma variável private 110 00:06:05,833 --> 00:06:08,448 do tipo Text chamada levelText. 111 00:06:08,920 --> 00:06:11,309 Este será o texto que será exibirá 112 00:06:11,309 --> 00:06:14,227 o número da fase atual que acabamos de configurar 113 00:06:14,227 --> 00:06:16,227 para "Day 1" no editor. 114 00:06:16,601 --> 00:06:18,601 Vamos também declarar uma variável private 115 00:06:18,601 --> 00:06:21,513 do tipo GameObject chamada levelImage. 116 00:06:22,276 --> 00:06:25,002 Vamos usar essa variável para armazenar a imagem LevelImage 117 00:06:25,002 --> 00:06:27,710 para que possamos ativar e desativar a imagem 118 00:06:27,710 --> 00:06:29,710 conforme necessário. 119 00:06:29,710 --> 00:06:31,710 Vamos também adicionar uma variável private boolean 120 00:06:31,710 --> 00:06:35,113 chamada doingSetup que vamos usar para 121 00:06:35,113 --> 00:06:37,604 verificar se estamos criando a fase e evitar 122 00:06:37,604 --> 00:06:39,785 que o jogador se mova durante a criação. 123 00:06:39,785 --> 00:06:41,785 Depois da função Awake vamos adicionar 124 00:06:41,785 --> 00:06:44,408 uma nova função private que retorna void 125 00:06:44,408 --> 00:06:47,465 chamada OnLevelWasLoaded que recebe um parâmetro integer 126 00:06:47,465 --> 00:06:49,858 chamado index. 127 00:06:49,858 --> 00:06:52,598 OnLevelWasLoaded é parte da API da Unity 128 00:06:53,167 --> 00:06:56,210 e é chamada toda vez que uma cena é carregada. 129 00:06:56,765 --> 00:06:59,470 Vamos utilizar essa função para incrementar o número da fase 130 00:06:59,470 --> 00:07:01,470 e chamar a função InitGame 131 00:07:01,470 --> 00:07:03,470 depois que uma fase é carregada. 132 00:07:04,080 --> 00:07:06,663 Vamos usar InitGame para gerenciar 133 00:07:06,663 --> 00:07:09,657 os elementos de UI e configurar cada fase. 134 00:07:10,101 --> 00:07:12,970 Vamos começar configurando a variável doingSetup para true. 135 00:07:13,677 --> 00:07:15,677 Isso significa que o jogador não poderá se mover enquanto 136 00:07:15,677 --> 00:07:17,329 o título da fase é exibido. 137 00:07:17,329 --> 00:07:19,329 Agora vamos obter uma referência 138 00:07:19,329 --> 00:07:21,329 para o objeto LevelImage 139 00:07:21,329 --> 00:07:23,329 usando GameObject.Find. 140 00:07:23,329 --> 00:07:25,329 Aqui vamos procurar por nome, portanto 141 00:07:25,329 --> 00:07:27,329 certifique-se que o nome do seu game object 142 00:07:27,329 --> 00:07:29,844 no editor é exatamente igual ao nome que é passado 143 00:07:29,844 --> 00:07:31,678 a função GameObject.Find. 144 00:07:31,678 --> 00:07:33,678 Vamos fazer o mesmo para LevelText 145 00:07:33,678 --> 00:07:35,678 mas vamos também obter uma referência ao 146 00:07:35,678 --> 00:07:37,414 componente Text. 147 00:07:37,414 --> 00:07:39,414 Em seguida vamos configurar o texto 148 00:07:39,414 --> 00:07:41,844 do objeto LevelText para o número da fase atual. 149 00:07:42,856 --> 00:07:44,856 O texto que estamos configurando será uma string portanto 150 00:07:44,856 --> 00:07:46,856 temos que fornecer a variável "Day " com um 151 00:07:46,856 --> 00:07:48,856 espaço no final e vamos adicionar 152 00:07:49,439 --> 00:07:52,357 o número da fase no final da string, 153 00:07:52,357 --> 00:07:55,737 nesse caso o texto será "Day 1". 154 00:07:56,625 --> 00:07:58,818 Vamos ativar o objeto LevelImage 155 00:07:58,818 --> 00:08:01,221 usando SetActive. 156 00:08:01,776 --> 00:08:03,776 Em seguida vamos declarar uma função private 157 00:08:03,776 --> 00:08:06,614 que retorna void chamada HideLevelImage. 158 00:08:07,044 --> 00:08:09,279 Vamos usar essa função para desativar LevelImage 159 00:08:09,279 --> 00:08:11,279 quando estivermos prontos para iniciar a fase, e vamos chamar 160 00:08:11,279 --> 00:08:13,279 essa função de dentro de InitGame. 161 00:08:14,070 --> 00:08:16,680 Dentro de HideLevelImage vamos desativar 162 00:08:16,680 --> 00:08:18,080 o objeto LevelImage. 163 00:08:18,791 --> 00:08:21,356 E vamos também configurar DoingSetup 164 00:08:21,356 --> 00:08:23,817 para false para que o jogador possa agora se mover. 165 00:08:23,817 --> 00:08:25,817 De volta a InitGame vamos 166 00:08:25,817 --> 00:08:27,817 chamar HideLevelImage 167 00:08:28,178 --> 00:08:31,503 passando LevelStartDelay como o tempo de espera. 168 00:08:32,955 --> 00:08:35,431 Isso significa que enquanto exibimos o título da fase 169 00:08:35,431 --> 00:08:38,240 vamos esperar 2 segundos antes de desligá-lo. 170 00:08:38,712 --> 00:08:40,712 Em Update vamos adicionar uma 171 00:08:40,712 --> 00:08:44,435 verificação de DoingSetup ao if. 172 00:08:44,990 --> 00:08:46,990 É isso que irá evitar que o jogador se mova 173 00:08:46,990 --> 00:08:48,990 caso DoingSetup seja verdade. 174 00:08:49,295 --> 00:08:52,023 Em GameOver vamos mostrar a mensagem para o jogador 175 00:08:52,023 --> 00:08:54,023 dizendo quantos dias ele sobreviveu. 176 00:08:54,883 --> 00:08:56,757 A mensagem vai ser 177 00:08:56,757 --> 00:09:00,747 "After level number of days you starved". 178 00:09:01,552 --> 00:09:04,316 Vamos também ativar nosso fundo preto. 179 00:09:07,559 --> 00:09:10,113 Vamos salvar o script e retornar ao editor. 180 00:09:12,693 --> 00:09:14,693 Em seguida vamos adicionar algumas 181 00:09:14,693 --> 00:09:16,693 linhas de código ao script Player 182 00:09:16,693 --> 00:09:19,082 para que a classe Player possa atualizar o objeto FoodText 183 00:09:19,082 --> 00:09:20,594 conforme o valor muda. 184 00:09:20,594 --> 00:09:22,594 Vamos abrir o script Player no Monodevelop 185 00:09:23,731 --> 00:09:26,233 Em Player vamos também adicionar a declaração de namespace 186 00:09:26,233 --> 00:09:29,205 using UnityEngine.UI. 187 00:09:29,205 --> 00:09:32,748 Em seguida vamos adicionar a variável public 188 00:09:32,748 --> 00:09:34,748 do tipo Text chamada foodText. 189 00:09:35,261 --> 00:09:37,261 Na função Start vamos configurar o valor 190 00:09:37,261 --> 00:09:40,015 de foodText para o valor atual de Food. 191 00:09:41,984 --> 00:09:43,984 Em AttemptMove vamos fazer o mesmo 192 00:09:43,984 --> 00:09:47,078 depois de subtrairmos do placar do jogador. 193 00:09:47,855 --> 00:09:49,855 Vamos também mostrar uma mensagem 194 00:09:49,855 --> 00:09:52,370 quando o jogador pega uma comida 195 00:09:52,370 --> 00:09:54,370 ou soda. 196 00:10:00,875 --> 00:10:03,651 Quando o jogador pega um objeto de comida 197 00:10:03,651 --> 00:10:06,664 vamos mostrar "+ pointsPerFood" 198 00:10:07,399 --> 00:10:09,343 junto com o valor atual do placar. 199 00:10:09,343 --> 00:10:11,343 Vamos fazer o mesmo para soda. 200 00:10:12,813 --> 00:10:14,813 Em loseFood vamos exibir uma mensagem 201 00:10:14,813 --> 00:10:16,813 similar mostrando quantos pontos 202 00:10:16,813 --> 00:10:19,242 o jogador perdeu quando foi atacado. 203 00:10:23,750 --> 00:10:26,152 Vamos salvar o script e retornar ao editor. 204 00:10:29,134 --> 00:10:31,134 No editor vamos configurar uma referência 205 00:10:31,134 --> 00:10:33,584 para o objeto FoodText ao nosso jogador. 206 00:10:35,207 --> 00:10:37,207 Vamos escolher Player 207 00:10:37,207 --> 00:10:39,207 e em seguida vamos arrastar FoodText 208 00:10:41,565 --> 00:10:43,565 para a variável FoodText. 209 00:10:45,534 --> 00:10:47,534 Vamos executar nossa cena e testar. 210 00:10:48,727 --> 00:10:50,937 Podemos ver o título da fase, isso está funcionando. 211 00:10:51,450 --> 00:10:53,885 Quando movemos o jogador o texto com o placar do jogador é atualizado. 212 00:10:56,853 --> 00:10:59,147 Há a espera quando mudamos para uma nova fase. 213 00:10:59,147 --> 00:11:01,329 O título é exibido com o número da nova fase. 214 00:11:01,898 --> 00:11:03,331 Quando o inimigo nos ataca 215 00:11:03,331 --> 00:11:05,331 Nós vemos a mensagem "-10". 216 00:11:06,813 --> 00:11:08,813 Então parece que está tudo funcionando. 217 00:11:09,687 --> 00:11:12,311 Agora que os elementos de UI estão funcionando 218 00:11:12,311 --> 00:11:14,311 no próximo vídeo vamos adicionar 219 00:11:14,311 --> 00:11:17,193 efeitos sonoros e música 220 00:11:17,193 --> 00:11:19,703 e os scripts necessários para o controle dos mesmos.