Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,852 --> 00:00:03,299 15. The Grid Player - HUD 2 00:00:03,324 --> 00:00:06,057 Agora a gente vai começar a criar o HUD. 3 00:00:06,082 --> 00:00:08,039 Alguma coisa pra gente exibir na tela. 4 00:00:08,383 --> 00:00:10,517 A informação de vida do jogador. 5 00:00:11,899 --> 00:00:15,531 Um bom lugar pra gente colocar essa lógica é no Player Controller. 6 00:00:16,279 --> 00:00:18,883 É um dos lugares bons pra gente fazer isso. 7 00:00:19,175 --> 00:00:22,109 Apesar que nesse jogo aqui eu vou colocar tudo no GameMode. 8 00:00:22,924 --> 00:00:26,068 Quando a gente for criar o Widget, a gente vai criar no GameMode. 9 00:00:26,093 --> 00:00:29,328 Mas eu poderia, por exemplo, no Player Controller também. Não tem problema. 10 00:00:29,621 --> 00:00:30,754 É um ótimo lugar. 11 00:00:30,926 --> 00:00:31,562 Beleza? 12 00:00:31,707 --> 00:00:33,422 A primeira coisa que eu vou fazer é criar esse Widget. 13 00:00:33,447 --> 00:00:36,980 A gente não tem ele ainda. Content Browser, Content… 14 00:00:37,422 --> 00:00:39,269 New Folder… HUD. 15 00:00:41,223 --> 00:00:42,767 Clica duas vezes. Botão direito. 16 00:00:43,436 --> 00:00:47,133 Vou pegar aqui User Interface Widget Blueprint. 17 00:00:48,227 --> 00:00:50,227 Eu vou colocar como HUD Player. 18 00:00:51,227 --> 00:00:57,018 O que eu quero que o HUD faça é exibir a vida do jogador e uma mira de uma maneira um pouquinho mais bonitinha. 19 00:00:57,043 --> 00:00:59,176 Por isso eu preparei uma imagem já. 20 00:00:59,818 --> 00:01:04,828 Como você já fez as aulas, você também já consegue colocar as imagens que você quiser da internet. 21 00:01:05,332 --> 00:01:07,618 Aqui eu vou criar uma pastinha pra colocar as imagens. 22 00:01:07,643 --> 00:01:10,351 Imagens, ícones. Vou colocar Icons. 23 00:01:10,892 --> 00:01:11,679 Ícones. 24 00:01:12,207 --> 00:01:13,801 Importar. Ícones. 25 00:01:13,849 --> 00:01:17,358 Eu tenho esse aqui que se chama HUD Icons Versão 2. 26 00:01:17,783 --> 00:01:19,300 Essa é a imagem que eu vou utilizar. 27 00:01:20,312 --> 00:01:22,210 Eu vou colocar a vida dele aqui dentro. Enfim. 28 00:01:22,609 --> 00:01:23,656 A gente vai fazer isso juntos. 29 00:01:23,791 --> 00:01:24,250 Beleza. 30 00:01:24,275 --> 00:01:26,343 Essa imagem que eu quero, ela veio com transparência. 31 00:01:26,766 --> 00:01:27,766 Tá tudo certo. 32 00:01:29,046 --> 00:01:36,265 Antes de trazer a imagem aqui eu vou criar um Horizontal Box pra servir como Container dessa imagem. 33 00:01:37,287 --> 00:01:38,287 Trazer pra cá… 34 00:01:38,499 --> 00:01:40,867 Esse Horizontal Box apareceu lá no cantinho. 35 00:01:41,123 --> 00:01:42,492 Vou colocar ele no meio. 36 00:01:42,517 --> 00:01:45,406 Eu quero que a minha imagem apareça aqui embaixo. Tá? 37 00:01:45,589 --> 00:01:49,151 Então eu vou colocar o meu Anchor Point aqui pra baixo. 38 00:01:49,176 --> 00:01:50,176 Tipo esse aqui. 39 00:01:51,150 --> 00:01:51,781 Foi pra lá. 40 00:01:52,104 --> 00:01:55,781 Agora a gente tem que posicionar a caixa lá porque ela mudou os valores. X e Y. 41 00:01:56,794 --> 00:01:58,984 O meu X e Y vai ser 0 e 0. 42 00:01:59,324 --> 00:02:01,153 A minha caixinha vai lá pra baixo. 43 00:02:01,791 --> 00:02:04,651 E agora eu tenho que mudar o alinhamento dela pra ela ficar centralizada. 44 00:02:04,820 --> 00:02:08,354 Então em X o elemento fica 0.5, exatamente a metade. 45 00:02:08,954 --> 00:02:14,401 E pra cima eu vou colocar aqui um valor… Tipo… Sei lá… 1.4. 46 00:02:15,555 --> 00:02:16,555 2… 47 00:02:17,835 --> 00:02:18,555 Beleza. 48 00:02:18,580 --> 00:02:21,547 Tá aí a caixinha. E agora eu tenho que trazer a imagem aqui dentro. Então... 49 00:02:22,099 --> 00:02:24,499 Novo Asset aqui que eu vou colocar. 50 00:02:24,524 --> 00:02:29,250 Vai ser uma imagem. Image. Coloco dentro do Horizontal Box. 51 00:02:29,960 --> 00:02:33,297 E imagem eu vou pegar a imagem que tá lá no meu Content Browser. 52 00:02:33,322 --> 00:02:37,460 Eu venho aqui em aparência, Brush, Image. 53 00:02:38,128 --> 00:02:42,007 E aqui eu seleciono aquela imagem que se chama HUD. 54 00:02:43,376 --> 00:02:44,984 HUD Icons Versão 2. 55 00:02:45,712 --> 00:02:48,151 Pronto. Ela apareceu toda distorcida né. Toda errada. 56 00:02:48,176 --> 00:02:49,250 A gente tem que arrumar isso agora. 57 00:02:49,671 --> 00:02:52,652 A primeira coisa é que ela tem que ser centralizada. 58 00:02:52,820 --> 00:02:54,305 Então eu clico aqui em centralizar. 59 00:02:54,901 --> 00:02:58,835 E o meu Horizontal Box tem que ter ligado o Size To Content. 60 00:02:59,773 --> 00:03:05,281 E agora, então, a minha caixa (o meu box) ele redimensionou de acordo com o tamanho do conteúdo dele. 61 00:03:05,306 --> 00:03:06,306 Que é o Image. 62 00:03:06,955 --> 00:03:09,151 E, por isso, ele foi mais pra cima. 63 00:03:09,273 --> 00:03:11,904 Então ficou muito pra cima o meu alinhamento. 64 00:03:11,929 --> 00:03:15,539 Vou colocar aqui 1.2. Certinho. 1.2. 65 00:03:16,470 --> 00:03:19,570 Então isso que a gente vai ver quando a gente colocar o HUD na tela. 66 00:03:19,639 --> 00:03:21,651 Vou fazer isso já pra gente poder ver isso na tela. 67 00:03:21,676 --> 00:03:22,554 Se tá tudo certo. 68 00:03:22,888 --> 00:03:24,088 Compilar e salvar. 69 00:03:24,143 --> 00:03:27,046 Por enquanto o HUD não tem nenhuma informação. Ele só tem a imagem. 70 00:03:27,418 --> 00:03:29,289 Como eu falei, a gente vai fazer isso no GameMode. 71 00:03:29,314 --> 00:03:30,427 Então eu vou abrir o meu GameMode. 72 00:03:31,063 --> 00:03:31,785 Game Logic. 73 00:03:31,810 --> 00:03:33,607 GamePlay, GameMode… 74 00:03:35,541 --> 00:03:37,763 E esse HUD tem que aparecer assim que o jogo começa. 75 00:03:38,284 --> 00:03:41,751 Vou só comentar esse aqui que ficou da última aula. 76 00:03:42,267 --> 00:03:43,294 Hero Is Dead. 77 00:03:44,947 --> 00:03:48,842 A gente vai fazer isso até mesmo antes disso aqui. Vou deixar esse cara pra baixo. 78 00:03:49,042 --> 00:03:51,232 Não que vai fazer muita diferença essa ordem, tá? 79 00:03:51,295 --> 00:03:55,634 Porque é praticamente instantâneo como eu comentei pra vocês lá no capítulo. 80 00:03:56,100 --> 00:03:58,966 Mas é só pra eu ter uma ordem mental aqui… 81 00:03:59,052 --> 00:04:03,811 Eu, como ser humano, quero pensar numa ordem mental das coisas acontecendo. 82 00:04:04,057 --> 00:04:05,884 Primeira coisa: Eu pego a referência do personagem. 83 00:04:05,909 --> 00:04:08,242 Segunda coisa: Crio o Widget dele. 84 00:04:09,005 --> 00:04:12,072 A gente vai fazer com a função Create Widget. 85 00:04:12,954 --> 00:04:16,636 A Widget que eu quero criar é da classe HUD Player. 86 00:04:17,255 --> 00:04:20,634 Já vou colocar isso aqui numa variável pra gente poder acessar depois se precisar. 87 00:04:22,024 --> 00:04:26,544 Eu vou chamar de HUD Player Refer. 88 00:04:26,918 --> 00:04:27,918 Referência. 89 00:04:28,997 --> 00:04:30,701 E isso aqui eu vou adicionar no Viewport. 90 00:04:30,726 --> 00:04:32,873 Add to Viewport. 91 00:04:33,785 --> 00:04:37,248 A última coisa que eu preciso dizer aqui é o Owning Player. 92 00:04:37,920 --> 00:04:41,951 Apesar de ser Owning Player é o Owner Controller. Player Controller. 93 00:04:41,976 --> 00:04:44,044 Tá. Tinha que tá escrito Owning Player Controller. 94 00:04:44,077 --> 00:04:45,521 Porque aqui ele tá pedindo o controle. 95 00:04:46,139 --> 00:04:48,443 Get Player Controller. 96 00:04:51,332 --> 00:04:52,169 Então basicamente, é isso. 97 00:04:52,194 --> 00:04:58,451 Ele vai colocar no Controller de índice 0 esse Widget que a gente acabou de criar. 98 00:04:58,722 --> 00:05:02,634 Isso aqui vai acontecer quando o jogo começar e esse cara eu vou comentar. 99 00:05:04,019 --> 00:05:09,193 Create HUD Player. 100 00:05:10,951 --> 00:05:12,833 Add to Viewport. 101 00:05:13,516 --> 00:05:14,458 Beleza. 102 00:05:16,171 --> 00:05:20,044 Agora, se eu for dar Play é pra gente poder ver aquele HUD lá. 103 00:05:20,667 --> 00:05:22,267 Compilar, salvar e play. 104 00:05:23,150 --> 00:05:24,417 Então estou vendo o meu HUD. 105 00:05:25,230 --> 00:05:26,901 Não tem nenhuma informação por enquanto. 106 00:05:26,926 --> 00:05:29,059 Porque a gente realmente não fez ainda. 107 00:05:30,277 --> 00:05:35,326 Vamos começar a fazer isso então. Mas, primeiro, eu quero colocar uma mira já bem no meio da tela. 108 00:05:35,959 --> 00:05:38,652 Pra gente poder saber onde o jogador tá mirando. 109 00:05:39,147 --> 00:05:41,880 Então eu vou pegar também uma imagem que eu já preparei. 110 00:05:42,365 --> 00:05:43,432 Content Browser. 111 00:05:43,457 --> 00:05:44,990 Vem aqui em HUD, Icons… 112 00:05:45,015 --> 00:05:46,326 Eu vou importar ela. 113 00:05:46,848 --> 00:05:49,396 Ela se chama… Imagens que eu peguei da internet, tá? 114 00:05:49,678 --> 00:05:51,169 Ela se chama “Crosshair”. 115 00:05:51,290 --> 00:05:52,552 Essa aqui que eu quero utilizar. 116 00:05:53,040 --> 00:05:55,607 Clico duas vezes. Se eu abrir aqui, já tô vendo ela. 117 00:05:55,850 --> 00:05:58,385 Uma imagem quadradinha com transparência. 118 00:05:58,618 --> 00:06:01,724 Vou salvar ela aqui. Isso é muito fácil da gente importar. 119 00:06:02,004 --> 00:06:04,169 Eu vou trazer uma nova imagem aqui. 120 00:06:04,615 --> 00:06:08,458 Pro Canvas. Eu vou só renomear esses caras pra não ficar tão perdido. 121 00:06:08,682 --> 00:06:11,216 Esse aqui é o Health Image. 122 00:06:11,975 --> 00:06:14,255 Que é onde a gente vai colocar informação da vida. 123 00:06:14,811 --> 00:06:20,732 E esse aqui é a mira. Mas, eu vou chamar de Crosshair, que é o nome que a gente sempre dá em inglês. 124 00:06:21,334 --> 00:06:22,287 Não tem nada aqui. 125 00:06:22,312 --> 00:06:25,169 Tá vazio. Vou clicar aqui em Image. 126 00:06:25,301 --> 00:06:27,279 E vou pegar a minha que eu acabei de importar. 127 00:06:28,068 --> 00:06:29,326 Crosshair. 128 00:06:30,834 --> 00:06:34,029 Basicamente, ela tá espremida, também. 129 00:06:34,292 --> 00:06:37,083 Então aqui a gente tem que clicar em Size to Content. 130 00:06:37,404 --> 00:06:39,302 Tá gigantesca. A gente vai diminuir já. 131 00:06:39,327 --> 00:06:42,474 Vou colocar ela como Anchor Point no meio. 132 00:06:43,312 --> 00:06:45,466 Aqui a posição é 0 e 0. 133 00:06:46,612 --> 00:06:47,591 Agora ela tá no meio. 134 00:06:47,927 --> 00:06:51,787 Alinhamento aqui é 0.5 e 0.5. 135 00:06:52,240 --> 00:06:53,617 Ela tá exatamente no meio da tela. 136 00:06:53,642 --> 00:06:57,521 Mesmo que a gente mude o tamanho da tela no jogo, vai ficar no meio. 137 00:06:58,097 --> 00:07:00,208 Preciso mudar agora o tamanho dessa imagem. 138 00:07:00,562 --> 00:07:01,373 Tá muito grande. 139 00:07:01,450 --> 00:07:03,294 Então a gente vem aqui em ImageSize. 140 00:07:03,972 --> 00:07:09,576 232, 232. Vou colocar, sei lá, 128 por 128. 141 00:07:10,656 --> 00:07:13,060 Isso aqui eu tenho que testar no jogo pra ver se tá OK. 142 00:07:13,631 --> 00:07:15,169 Compilar e salvar. Vamos ver no jogo. 143 00:07:15,683 --> 00:07:17,119 Tá bonitinho o tamanho, né? 144 00:07:17,865 --> 00:07:19,342 Eu tô atirando exatamente no meio. 145 00:07:19,728 --> 00:07:24,263 Você percebe que o meu tiro não tá indo exatamente no meio, né? Da tela. 146 00:07:24,675 --> 00:07:27,869 Isso a gente tem que alterar com o posicionamento da arma. 147 00:07:28,703 --> 00:07:32,224 Eu tenho que vir aqui no meu HeroChar. HeroChar. 148 00:07:33,856 --> 00:07:34,856 Viewport. 149 00:07:35,370 --> 00:07:36,568 O tiro tá saindo daqui, né. 150 00:07:36,593 --> 00:07:38,060 ArrowProjetil. 151 00:07:38,569 --> 00:07:42,107 A gente pode só rotacionar um pouquinho pouquinho, mas é bem de leve. 152 00:07:42,896 --> 00:07:46,677 Vou pegar aqui a rotação… Vou desligar esse cara. 153 00:07:47,713 --> 00:07:51,740 Rotacionar aqui, por exemplo, menos 1 grau. 154 00:07:52,155 --> 00:07:55,221 Vamos ver se tá pegando o tiro agora no meio. 155 00:07:55,768 --> 00:07:56,599 Foi demais. 156 00:07:58,230 --> 00:08:00,388 Menos 0.5 graus. 157 00:08:05,545 --> 00:08:09,208 Nossa, mas é muito pouco. -0.2 graus. 158 00:08:11,943 --> 00:08:13,873 Agora tá exatamente no meio. Beleza. 159 00:08:13,898 --> 00:08:18,298 Pra não dar problema do jogador falar que o teu jogo tá quebrado. 160 00:08:18,613 --> 00:08:20,310 Então agora eu tô atirando exatamente no meio. 161 00:08:20,794 --> 00:08:24,061 A próxima aula eu vou fazer o seguinte: vou colocar a vida no HUD. 162 00:08:25,238 --> 00:08:27,585 O valor de vida do personagem ali embaixo. 163 00:08:27,750 --> 00:08:29,734 Como texto e também como Progress Bar. 164 00:08:29,759 --> 00:08:31,617 A gente vai ter uma barrinha que vai diminuindo. 165 00:08:32,726 --> 00:08:34,540 Vamos fazer isso na próxima aula já. 14424