1
00:00:04,300 --> 00:00:05,140
‫Olá e bem-vindo.

2
00:00:05,140 --> 00:00:10,000
‫Nesta palestra, exibiremos uma tela solta e farei isso inteiramente de

3
00:00:10,000 --> 00:00:13,630
‫dentro do C++ para gerar esse widget.

4
00:00:13,900 --> 00:00:15,250
‫Vamos mergulhar e ver como é feito.

5
00:00:15,880 --> 00:00:21,220
‫Ok, então gostaríamos de exibir alguma interface do usuário quando um jogador morre para dizer o que está acontecendo que ele perdeu e

6
00:00:21,220 --> 00:00:23,230
‫que o nível está prestes a ser reiniciado.

7
00:00:23,230 --> 00:00:25,240
‫Portanto, não é uma surpresa para eles.

8
00:00:25,240 --> 00:00:31,780
‫Portanto, não precisamos criar uma interface do usuário, widgets de interface do usuário, UMG, widget de gráficos em movimento irreais.

9
00:00:32,440 --> 00:00:35,800
‫Então, vamos fazer isso primeiro, criando uma pasta para armazenar a interface do usuário.

10
00:00:35,800 --> 00:00:41,440
‫E eu já sei que teremos dois itens de interface do usuário, então acho que terei uma pasta de interface do usuário

11
00:00:41,440 --> 00:00:47,140
‫aqui e então vamos entrar aqui e clicar com o botão direito e ir, você deveria ter feito isso antes, mas vamos vai

12
00:00:47,140 --> 00:00:48,000
‫orientá-lo através dele.

13
00:00:48,040 --> 00:00:52,540
‫Vamos para a seção de interface do usuário, selecione o esquema de widgets e o prefixo

14
00:00:52,540 --> 00:00:56,890
‫para usar é o sublinhado WB P e, em seguida, será a tela solta.

15
00:00:57,520 --> 00:01:02,710
‫Agora você pode fazer algumas classes base para esse tipo de coisa em C++, mas não vamos cobrir isso

16
00:01:02,710 --> 00:01:03,310
‫nesta seção.

17
00:01:03,550 --> 00:01:07,450
‫Geralmente não é necessário fazer isso, e é muito mais fácil fazer as coisas no Blueprint.

18
00:01:07,450 --> 00:01:13,060
‫Não há muita vantagem em fazer isso em C++, a menos que uma interface do usuário fique super complicada e você queira colocar

19
00:01:13,060 --> 00:01:15,610
‫um pouco dessa lógica de interface do usuário em C++.

20
00:01:15,940 --> 00:01:20,500
‫No nosso caso, este não é o caso, então podemos seguir em frente e usar as plantas.

21
00:01:20,500 --> 00:01:22,450
‫Afinal, a interface do usuário é uma coisa visual.

22
00:01:22,450 --> 00:01:28,780
‫Faz sentido usar uma ferramenta visual para montá-lo agora porque você já sabe como criar

23
00:01:28,780 --> 00:01:29,470
‫widgets.

24
00:01:29,470 --> 00:01:32,830
‫Então eu vou dar isso como um desafio para você montar uma tela solta.

25
00:01:32,830 --> 00:01:36,970
‫Queremos adicionar algum texto explicando que o jogador perdeu e que estamos prestes a reiniciar.

26
00:01:37,270 --> 00:01:41,980
‫Quer posicionar esse texto provavelmente no centro, torná-lo visível, certifique-se de que esteja visível no jogo.

27
00:01:41,980 --> 00:01:45,370
‫E, no entanto, como eu disse, explique que haverá um reinício chegando.

28
00:01:45,850 --> 00:01:50,470
‫E depois que você tentar esse desafio, veremos como podemos gerar isso a partir do C++.

29
00:01:50,470 --> 00:01:55,660
‫Você viu talvez como fazer isso no Blueprint antes de vermos como podemos fazer isso de dentro do C++.

30
00:01:55,660 --> 00:01:56,770
‫Então pause o vídeo e pronto.

31
00:01:57,130 --> 00:01:58,180
‫Ok, bem-vindo de volta.

32
00:01:58,750 --> 00:02:03,040
‫Então eu vou criar, antes de tudo, um pouco de texto.

33
00:02:03,430 --> 00:02:09,160
‫Então, eu quero procurar na paleta à esquerda, vou procurar o item de texto e trazê-lo.

34
00:02:10,060 --> 00:02:13,420
‫Eu vou mudar isso para você perder.

35
00:02:13,750 --> 00:02:16,630
‫Diálogo bastante direto e sem imaginação escrevendo aqui.

36
00:02:17,170 --> 00:02:22,210
‫Eu vou mudar a cor e a opacidade e a aparência para vermelho para deixar bem claro que eles

37
00:02:22,210 --> 00:02:27,580
‫perderam e apenas esfregar um pouco mais e eu vou expandir essa fonte e mudar o tamanho para ser maior

38
00:02:27,580 --> 00:02:27,910
‫.

39
00:02:28,120 --> 00:02:35,310
‫E então vou expandir a caixa ao redor do nosso texto e vou centralizar nosso texto.

40
00:02:35,320 --> 00:02:38,050
‫Então, descendo a justificativa, vou centralizar o texto.

41
00:02:38,050 --> 00:02:44,340
‫E se eu expandir, vamos ver se há algum outro lugar onde eu possa fazer alinhamento centralizado que não

42
00:02:44,410 --> 00:02:44,860
‫há.

43
00:02:44,860 --> 00:02:53,440
‫Então eu vou fazer as caixas mais ou menos apropriadas e então eu vou até meus alinhamentos e minhas âncoras

44
00:02:53,440 --> 00:02:54,910
‫e coisas assim.

45
00:02:55,540 --> 00:03:01,870
‫E vou selecionar o menu suspenso para âncoras e selecionar a predefinição para ancoragem no meio, porque é isso que

46
00:03:02,080 --> 00:03:03,070
‫quero fazer.

47
00:03:03,850 --> 00:03:12,400
‫Eu quero definir meu alinhamento como 0. 5 e 0. 5, o que basicamente significa que estamos alinhando ao

48
00:03:12,400 --> 00:03:16,660
‫centro do objeto ao invés do canto superior esquerdo que vai fazer a âncora novamente.

49
00:03:16,660 --> 00:03:18,790
‫Ok, isso não foi muito útil.

50
00:03:19,300 --> 00:03:24,460
‫E então a posição X por que eu acho que se eu apenas definir a posição ao lado de zero e zero

51
00:03:24,460 --> 00:03:29,200
‫porque eu configurei minhas âncoras assim, então minha posição de perda vai estar em algum lugar no meio e eu

52
00:03:29,200 --> 00:03:31,180
‫vou movê-la para cima sempre tão ligeiramente.

53
00:03:31,240 --> 00:03:37,960
‫Mantenha minha posição X em zero, posição Y em -50, porque eu quero adicionar algum texto secundário dizendo, na verdade, pode ser mais

54
00:03:37,980 --> 00:03:42,430
‫fácil apenas duplicar o outro texto aqui porque ele tem toda a configuração que

55
00:03:42,880 --> 00:03:43,870
‫eu já preciso.

56
00:03:43,870 --> 00:03:46,030
‫Eu só quero torná-lo um pouco menor.

57
00:03:46,030 --> 00:03:54,100
‫Posicione zero novamente e direi que o nível será reiniciado em 5 segundos e farei com que o tamanho da fonte seja

58
00:03:54,100 --> 00:03:55,210
‫muito menor.

59
00:03:55,210 --> 00:04:00,370
‫Então é menos na sua cara, algo assim, e então apenas mova um pouco para

60
00:04:00,370 --> 00:04:05,920
‫baixo, um pequeno entalhe e continue redefinindo essa posição X para zero e 100% feliz com o posicionamento.

61
00:04:05,920 --> 00:04:08,500
‫Só vou subir um pouco mais.

62
00:04:08,500 --> 00:04:13,960
‫Se eu mantiver o shift pressionado, posso bloqueá-lo no eixo com o qual estou me movendo para que fique mais ou menos central

63
00:04:13,970 --> 00:04:14,440
‫assim.

64
00:04:14,560 --> 00:04:15,580
‫Ok, então estou feliz com isso.

65
00:04:15,580 --> 00:04:18,640
‫Agora precisamos ir em frente e tentar gerar a coisa.

66
00:04:19,060 --> 00:04:19,810
‫Como vamos fazer isso?

67
00:04:19,810 --> 00:04:25,180
‫Bem, antes de tudo, precisamos saber qual classe de widget devemos gerar, e precisamos saber de onde

68
00:04:25,180 --> 00:04:27,460
‫vamos fazer isso a partir de agora.

69
00:04:27,490 --> 00:04:31,570
‫Como já disse, acho que um bom lugar para fazer isso é no próprio controle do player.

70
00:04:32,290 --> 00:04:37,600
‫E vamos precisar saber no controlador do jogador qual classe, qual classe de widget estamos tentando

71
00:04:37,600 --> 00:04:37,970
‫gerar?

72
00:04:37,970 --> 00:04:42,460
‫Agora, eu sei que é uma classe de projeto, mas ainda precisamos que seja uma classe que estamos tentando gerar.

73
00:04:43,090 --> 00:04:46,840
‫Então, vamos fazer isso criando uma nova propriedade aqui.

74
00:04:46,960 --> 00:04:54,100
‫Haverá edições em qualquer lugar e vamos querer que isso seja uma subclasse de porque essa é sempre uma

75
00:04:54,100 --> 00:04:57,220
‫boa maneira de garantir uma nova classe.

76
00:04:57,220 --> 00:05:04,210
‫Basicamente, você pode usar o tipo new class se quiser, mas isso não restringe o tipo de classe que

77
00:05:04,210 --> 00:05:05,290
‫podemos usar.

78
00:05:05,290 --> 00:05:09,580
‫E aqui queremos restringi-lo apenas a você usar widgets.

79
00:05:09,790 --> 00:05:17,210
‫Se você for ao seu blueprint, poderá ver se formos a algum lugar aqui, você poderá descobrir se uma classe pai usa

80
00:05:17,240 --> 00:05:22,690
‫um widget que sabemos que quando você coloca o prefixo nele se torna um widget.

81
00:05:23,170 --> 00:05:26,380
‫Portanto, esta é uma subclasse de.

82
00:05:27,550 --> 00:05:34,300
‫E então nós usamos nossos colchetes angulares e você usa um widget e eu vou declará-lo aqui

83
00:05:34,300 --> 00:05:37,120
‫em vez de fazer qualquer inclusão.

84
00:05:37,120 --> 00:05:43,660
‫E então classe você usa um widget e então vamos chamar isso de classe de tela perdida.

85
00:05:44,140 --> 00:05:46,390
‫Apenas mantenha bem óbvio o que está acontecendo lá.

86
00:05:47,140 --> 00:05:54,370
‫Agora, vou prosseguir e compilar neste estágio enquanto fazemos as próximas coisas, porque compilar ao alterar um arquivo leva

87
00:05:54,370 --> 00:05:56,470
‫um pouco mais de tempo.

88
00:05:56,740 --> 00:06:02,620
‫Agora, na verdade, a compilação falhará neste estágio porque não incluímos o módulo UMG.

89
00:06:02,890 --> 00:06:03,760
‫Não sabemos como fazer isso.

90
00:06:03,770 --> 00:06:08,950
‫Não se preocupe com a compilação neste estágio e em cerca de 9 minutos no vídeo, corrigiremos esse

91
00:06:08,950 --> 00:06:09,550
‫erro.

92
00:06:10,150 --> 00:06:14,230
‫Agora no C++, o que vamos querer fazer é realmente gerar esse widget.

93
00:06:14,680 --> 00:06:17,260
‫Então nós não queremos fazer isso talvez antes da hora.

94
00:06:17,260 --> 00:06:20,250
‫Isso realmente não importa porque o cronômetro não espera.

95
00:06:20,260 --> 00:06:24,760
‫Ele apenas define o tempo e depois vai direto para a próxima linha de código, então não vamos esperar 5 segundos se

96
00:06:24,760 --> 00:06:29,050
‫fizermos isso no Stripe, se tivermos gerado a interface do usuário logo em seguida, não importa a ordem que faça

97
00:06:29,050 --> 00:06:29,650
‫isso em.

98
00:06:30,310 --> 00:06:36,240
‫Então, o que vamos querer fazer é usar uma função chamada create widget, que não está disponível no momento.

99
00:06:36,670 --> 00:06:43,030
‫Então, precisamos incluir algo em hash primeiro e vamos incluir o blueprint e a barra para usar um

100
00:06:43,150 --> 00:06:43,720
‫widget.

101
00:06:44,500 --> 00:06:49,990
‫E essa é uma classe que precisamos para acessar essa função create widget.

102
00:06:50,830 --> 00:06:53,560
‫E vamos basicamente dizer criar widget.

103
00:06:53,560 --> 00:06:58,220
‫Precisa estar bem, na verdade, vamos ver o que precisamos fornecer.

104
00:06:58,240 --> 00:07:00,880
‫Estou indo para f 12 para sua implementação.

105
00:07:00,880 --> 00:07:06,880
‫Você pode ver que é um pouco complicado de ver, mas nós temos um parâmetro de modelo aqui que é basicamente

106
00:07:06,880 --> 00:07:10,840
‫por padrão que você usa um widget, então provavelmente não precisamos fornecer isso.

107
00:07:11,680 --> 00:07:19,360
‫E depois há o objeto proprietário e a classe que precisamos criar e, em seguida, um nome de widget que

108
00:07:19,360 --> 00:07:20,950
‫não precisamos fornecer necessariamente.

109
00:07:20,950 --> 00:07:23,590
‫E então ele retorna como o ponteiro para o widget.

110
00:07:24,160 --> 00:07:29,110
‫Então, o que eu realmente vou fazer é aqui, vamos dar a ele um objeto proprietário.

111
00:07:29,170 --> 00:07:31,450
‫Agora, apenas certas coisas podem possuir o widget.

112
00:07:31,540 --> 00:07:34,180
‫Uma dessas coisas é, na verdade, o controlador do jogador.

113
00:07:34,180 --> 00:07:36,130
‫Então, podemos apenas passar isso.

114
00:07:36,280 --> 00:07:40,700
‫E a próxima coisa é que queremos passar a subclasse t de você usar um widget.

115
00:07:40,720 --> 00:07:44,620
‫Bem, felizmente, já configuramos isso no cabeçalho do arquivo.

116
00:07:45,370 --> 00:07:51,250
‫Então, podemos ir em frente e passar isso e eu impedirei meu recuo de tentar se corrigir enquanto não tiver colocado um ponto

117
00:07:51,250 --> 00:07:52,870
‫e vírgula no final da linha.

118
00:07:53,590 --> 00:07:55,390
‫E então vamos dar uma olhada no que mais.

119
00:07:55,390 --> 00:07:55,990
‫Bem, é isso.

120
00:07:55,990 --> 00:07:58,480
‫Ele apenas retorna o widget neste momento.

121
00:07:58,490 --> 00:08:06,880
‫Então, o que podemos fazer é ter um ponteiro para você, usar uma loja de widgets e essa será nossa tela perdida.

122
00:08:06,880 --> 00:08:09,010
‫Então, temos que perder a classe de tela.

123
00:08:09,430 --> 00:08:12,820
‫Depois que criamos o widget, ele se torna uma tela solta.

124
00:08:13,000 --> 00:08:15,820
‫A próxima coisa que precisamos fazer é tornar essa interface do usuário visível.

125
00:08:16,150 --> 00:08:19,960
‫Fazemos isso adicionando-o à janela de visualização em linguagem irreal.

126
00:08:19,960 --> 00:08:25,450
‫Mas primeiro, porque adicionamos à viewport chamando uma função na tela azul, precisamos ter certeza de que não

127
00:08:25,480 --> 00:08:27,070
‫é um ponteiro nulo.

128
00:08:27,070 --> 00:08:32,320
‫Então, se a tela de perda não for igual ao ponteiro nulo, por que não haveria pontos?

129
00:08:32,320 --> 00:08:33,850
‫A propósito, pequeno desafio para você.

130
00:08:34,150 --> 00:08:36,970
‫Veja se você pode descobrir por que podemos acabar com um ponteiro nulo aqui.

131
00:08:37,690 --> 00:08:41,140
‫Bem, uma razão é que talvez tenhamos esquecido de definir a classe de tela de perda.

132
00:08:41,140 --> 00:08:46,150
‫E se esse for o caso e não tivermos uma classe de tela azul válida definida, então criar widget apenas

133
00:08:46,150 --> 00:08:47,830
‫retornará um ponteiro nulo para nós.

134
00:08:47,830 --> 00:08:54,310
‫E não queremos que isso aconteça e certamente não queremos chamar uma função no ponteiro nulo.

135
00:08:54,340 --> 00:08:56,290
‫Assim como a seta da tela azul.

136
00:08:56,830 --> 00:09:00,970
‫E então o que queremos aqui é uma função chamada add to viewport.

137
00:09:02,120 --> 00:09:03,930
‫Que simplesmente vai fazer exatamente isso.

138
00:09:03,950 --> 00:09:07,550
‫Vá e adicione-o à tela para que possamos ver a tela azul.

139
00:09:08,180 --> 00:09:14,780
‫Agora, vou em frente e compilar isso também, e ir até o Unreal e abrir nosso projeto

140
00:09:14,780 --> 00:09:17,240
‫para o controlador do jogador.

141
00:09:17,330 --> 00:09:22,360
‫Então atire em um controle de jogo aqui e devemos ser capazes de ver em algum lugar aqui.

142
00:09:22,670 --> 00:09:25,220
‫E uma variável ainda não apareceu.

143
00:09:25,730 --> 00:09:27,080
‫Talvez eu tivesse algumas áreas de construção.

144
00:09:27,080 --> 00:09:28,550
‫Vamos dar uma olhada no log de mensagens.

145
00:09:29,100 --> 00:09:36,110
‫Sim, podemos ver alguns erros de compilação aqui, ou seja, esses estranhos sobre símbolos externos ausentes.

146
00:09:36,110 --> 00:09:40,130
‫Se dermos uma olhada dizendo coisas sobre você, use um widget que não está disponível.

147
00:09:40,490 --> 00:09:47,540
‫Agora, se você se lembrar de algumas palestras anteriores, sabemos que esses tipos de erros tendem a ocorrer

148
00:09:47,540 --> 00:09:50,780
‫quando estamos perdendo uma dependência de módulo.

149
00:09:50,810 --> 00:09:57,740
‫Então, se abrirmos nossos documentos de construção de atirador simples e eu fechar o terminal para um pouco mais

150
00:09:57,740 --> 00:10:04,100
‫de espaço adicional, você poderá ver o que precisamos fazer é adicionar uma nova dependência pública aqui.

151
00:10:04,700 --> 00:10:10,130
‫Então, ao final disso, vamos adicionar uma dependência pública para UMG.

152
00:10:10,310 --> 00:10:14,630
‫Então, uma nova vírgula e depois entre aspas vai colocar UMG.

153
00:10:15,200 --> 00:10:23,330
‫E isso basicamente nos permite fazer uso das inclusões que tínhamos aqui, o widget de uso de barra para frente do

154
00:10:23,450 --> 00:10:24,140
‫blueprint.

155
00:10:24,710 --> 00:10:26,670
‫Todas essas coisas estão em um módulo separado.

156
00:10:26,690 --> 00:10:28,630
‫Então, o material padrão que está incluído.

157
00:10:28,670 --> 00:10:32,540
‫Então, precisamos dizer ao desvelar que queremos usar esse módulo em C++.

158
00:10:32,630 --> 00:10:34,910
‫Vamos em frente e construir e ver se funciona agora.

159
00:10:35,000 --> 00:10:35,200
‫OK.

160
00:10:35,210 --> 00:10:36,380
‫Isso parece bem sucedido.

161
00:10:36,380 --> 00:10:41,510
‫Se formos ao editor e voltarmos para filmar um controle de jogo.

162
00:10:41,540 --> 00:10:46,100
‫Por algum motivo, acho que não recarreguei corretamente, então tive que clicar em compilar aqui no editor.

163
00:10:46,480 --> 00:10:48,350
‫Voltamos agora ao controlador de jogo de tiro.

164
00:10:48,350 --> 00:10:50,390
‫Finalmente você pode ver aquela aula de tela solta.

165
00:10:50,930 --> 00:10:57,740
‫Podemos clicar no menu suspenso e selecionar AWP, sublinhar, perder a tela lá, compilar, salvar

166
00:10:57,740 --> 00:10:59,900
‫e vamos nos matar.

167
00:11:00,110 --> 00:11:01,610
‫Leve um tiro algumas vezes.

168
00:11:01,970 --> 00:11:03,170
‫Bate, bate.

169
00:11:03,500 --> 00:11:04,150
‫E aí vai.

170
00:11:04,200 --> 00:11:09,650
‫A tela Alu apareceu nos dizendo o que está acontecendo que o nível está prestes a reiniciar em 5 segundos,

171
00:11:09,650 --> 00:11:10,970
‫e de fato acontece.

172
00:11:11,360 --> 00:11:20,000
‫Portanto, agora você sabe não apenas como criar gráficos UMG, mas também como gerá-los a partir de C++ em

173
00:11:20,000 --> 00:11:21,860
‫vez de Blueprint.

174
00:11:22,100 --> 00:11:26,900
‫Na próxima palestra, vamos ter uma visão menos pessimista das coisas e tentar ver se

175
00:11:26,900 --> 00:11:30,380
‫também podemos criar algumas condições de vitória para este jogo.

176
00:11:30,680 --> 00:11:31,310
‫Vejo você então.