Original subtitles

1

15. The Grid Player - HUD

2

Agora a gente vai começar a criar o HUD.

3

Alguma coisa pra gente exibir na tela.

4

A informação de vida do jogador.

5

Um bom lugar pra gente colocar essa lógica é no Player Controller.

6

É um dos lugares bons pra gente fazer isso.

7

Apesar que nesse jogo aqui eu vou colocar tudo no GameMode.

8

Quando a gente for criar o Widget, a gente vai criar no GameMode.

9

Mas eu poderia, por exemplo, no Player Controller também. Não tem problema.

10

É um ótimo lugar.

11

Beleza?

12

A primeira coisa que eu vou fazer é criar esse Widget.

13

A gente não tem ele ainda. Content Browser, Content…

14

New Folder… HUD.

15

Clica duas vezes. Botão direito.

16

Vou pegar aqui User Interface Widget Blueprint.

17

Eu vou colocar como HUD Player.

18

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

Por isso eu preparei uma imagem já.

20

Como você já fez as aulas, você também já consegue colocar as imagens que você quiser da internet.

21

Aqui eu vou criar uma pastinha pra colocar as imagens.

22

Imagens, ícones. Vou colocar Icons.

23

Ícones.

24

Importar. Ícones.

25

Eu tenho esse aqui que se chama HUD Icons Versão 2.

26

Essa é a imagem que eu vou utilizar.

27

Eu vou colocar a vida dele aqui dentro. Enfim.

28

A gente vai fazer isso juntos.

29

Beleza.

30

Essa imagem que eu quero, ela veio com transparência.

31

Tá tudo certo.

32

Antes de trazer a imagem aqui eu vou criar um Horizontal Box pra servir como Container dessa imagem.

33

Trazer pra cá…

34

Esse Horizontal Box apareceu lá no cantinho.

35

Vou colocar ele no meio.

36

Eu quero que a minha imagem apareça aqui embaixo. Tá?

37

Então eu vou colocar o meu Anchor Point aqui pra baixo.

38

Tipo esse aqui.

39

Foi pra lá.

40

Agora a gente tem que posicionar a caixa lá porque ela mudou os valores. X e Y.

41

O meu X e Y vai ser 0 e 0.

42

A minha caixinha vai lá pra baixo.

43

E agora eu tenho que mudar o alinhamento dela pra ela ficar centralizada.

44

Então em X o elemento fica 0.5, exatamente a metade.

45

E pra cima eu vou colocar aqui um valor… Tipo… Sei lá… 1.4.

46

2…

47

Beleza.

48

Tá aí a caixinha. E agora eu tenho que trazer a imagem aqui dentro. Então...

49

Novo Asset aqui que eu vou colocar.

50

Vai ser uma imagem. Image. Coloco dentro do Horizontal Box.

51

E imagem eu vou pegar a imagem que tá lá no meu Content Browser.

52

Eu venho aqui em aparência, Brush, Image.

53

E aqui eu seleciono aquela imagem que se chama HUD.

54

HUD Icons Versão 2.

55

Pronto. Ela apareceu toda distorcida né. Toda errada.

56

A gente tem que arrumar isso agora.

57

A primeira coisa é que ela tem que ser centralizada.

58

Então eu clico aqui em centralizar.

59

E o meu Horizontal Box tem que ter ligado o Size To Content.

60

E agora, então, a minha caixa (o meu box) ele redimensionou de acordo com o tamanho do conteúdo dele.

61

Que é o Image.

62

E, por isso, ele foi mais pra cima.

63

Então ficou muito pra cima o meu alinhamento.

64

Vou colocar aqui 1.2. Certinho. 1.2.

65

Então isso que a gente vai ver quando a gente colocar o HUD na tela.

66

Vou fazer isso já pra gente poder ver isso na tela.

67

Se tá tudo certo.

68

Compilar e salvar.

69

Por enquanto o HUD não tem nenhuma informação. Ele só tem a imagem.

70

Como eu falei, a gente vai fazer isso no GameMode.

71

Então eu vou abrir o meu GameMode.

72

Game Logic.

73

GamePlay, GameMode…

74

E esse HUD tem que aparecer assim que o jogo começa.

75

Vou só comentar esse aqui que ficou da última aula.

76

Hero Is Dead.

77

A gente vai fazer isso até mesmo antes disso aqui. Vou deixar esse cara pra baixo.

78

Não que vai fazer muita diferença essa ordem, tá?

79

Porque é praticamente instantâneo como eu comentei pra vocês lá no capítulo.

80

Mas é só pra eu ter uma ordem mental aqui…

81

Eu, como ser humano, quero pensar numa ordem mental das coisas acontecendo.

82

Primeira coisa: Eu pego a referência do personagem.

83

Segunda coisa: Crio o Widget dele.

84

A gente vai fazer com a função Create Widget.

85

A Widget que eu quero criar é da classe HUD Player.

86

Já vou colocar isso aqui numa variável pra gente poder acessar depois se precisar.

87

Eu vou chamar de HUD Player Refer.

88

Referência.

89

E isso aqui eu vou adicionar no Viewport.

90

Add to Viewport.

91

A última coisa que eu preciso dizer aqui é o Owning Player.

92

Apesar de ser Owning Player é o Owner Controller. Player Controller.

93

Tá. Tinha que tá escrito Owning Player Controller.

94

Porque aqui ele tá pedindo o controle.

95

Get Player Controller.

96

Então basicamente, é isso.

97

Ele vai colocar no Controller de índice 0 esse Widget que a gente acabou de criar.

98

Isso aqui vai acontecer quando o jogo começar e esse cara eu vou comentar.

99

Create HUD Player.

100

Add to Viewport.

101

Beleza.

102

Agora, se eu for dar Play é pra gente poder ver aquele HUD lá.

103

Compilar, salvar e play.

104

Então estou vendo o meu HUD.

105

Não tem nenhuma informação por enquanto.

106

Porque a gente realmente não fez ainda.

107

Vamos começar a fazer isso então. Mas, primeiro, eu quero colocar uma mira já bem no meio da tela.

108

Pra gente poder saber onde o jogador tá mirando.

109

Então eu vou pegar também uma imagem que eu já preparei.

110

Content Browser.

111

Vem aqui em HUD, Icons…

112

Eu vou importar ela.

113

Ela se chama… Imagens que eu peguei da internet, tá?

114

Ela se chama “Crosshair”.

115

Essa aqui que eu quero utilizar.

116

Clico duas vezes. Se eu abrir aqui, já tô vendo ela.

117

Uma imagem quadradinha com transparência.

118

Vou salvar ela aqui. Isso é muito fácil da gente importar.

119

Eu vou trazer uma nova imagem aqui.

120

Pro Canvas. Eu vou só renomear esses caras pra não ficar tão perdido.

121

Esse aqui é o Health Image.

122

Que é onde a gente vai colocar informação da vida.

123

E esse aqui é a mira. Mas, eu vou chamar de Crosshair, que é o nome que a gente sempre dá em inglês.

124

Não tem nada aqui.

125

Tá vazio. Vou clicar aqui em Image.

126

E vou pegar a minha que eu acabei de importar.

127

Crosshair.

128

Basicamente, ela tá espremida, também.

129

Então aqui a gente tem que clicar em Size to Content.

130

Tá gigantesca. A gente vai diminuir já.

131

Vou colocar ela como Anchor Point no meio.

132

Aqui a posição é 0 e 0.

133

Agora ela tá no meio.

134

Alinhamento aqui é 0.5 e 0.5.

135

Ela tá exatamente no meio da tela.

136

Mesmo que a gente mude o tamanho da tela no jogo, vai ficar no meio.

137

Preciso mudar agora o tamanho dessa imagem.

138

Tá muito grande.

139

Então a gente vem aqui em ImageSize.

140

232, 232. Vou colocar, sei lá, 128 por 128.

141

Isso aqui eu tenho que testar no jogo pra ver se tá OK.

142

Compilar e salvar. Vamos ver no jogo.

143

Tá bonitinho o tamanho, né?

144

Eu tô atirando exatamente no meio.

145

Você percebe que o meu tiro não tá indo exatamente no meio, né? Da tela.

146

Isso a gente tem que alterar com o posicionamento da arma.

147

Eu tenho que vir aqui no meu HeroChar. HeroChar.

148

Viewport.

149

O tiro tá saindo daqui, né.

150

ArrowProjetil.

151

A gente pode só rotacionar um pouquinho pouquinho, mas é bem de leve.

152

Vou pegar aqui a rotação… Vou desligar esse cara.

153

Rotacionar aqui, por exemplo, menos 1 grau.

154

Vamos ver se tá pegando o tiro agora no meio.

155

Foi demais.

156

Menos 0.5 graus.

157

Nossa, mas é muito pouco. -0.2 graus.

158

Agora tá exatamente no meio. Beleza.

159

Pra não dar problema do jogador falar que o teu jogo tá quebrado.

160

Então agora eu tô atirando exatamente no meio.

161

A próxima aula eu vou fazer o seguinte: vou colocar a vida no HUD.

162

O valor de vida do personagem ali embaixo.

163

Como texto e também como Progress Bar.

164

A gente vai ter uma barrinha que vai diminuindo.

165

Vamos fazer isso na próxima aula já.