Original subtitles

1

15. The Grid Player - HUD: Health

2

Momento então de criar o texto pra vida, né.

3

Que vai vir bem aqui.

4

Então eu vou criar aqui um novo Asset. Que é o Text.

5

Trazer o Text pra cá.

6

Eu vou nomear esse texto como “Health Text” só pra gente poder identificar depois.

7

Ele foi lá no cantinho.

8

Eu tenho que posicionar ele aqui.

9

A gente pode posicionar ele também exatamente com um Anchor Point.

10

Colocar aqui a posição 0 0.

11

Eu gosto de deixar ele dentro de alguma coisa.

12

Eu vou deixar dentro de um Size Box.

13

Size Box.

14

Traz pra cá. Canvas Panel.

15

E a gente vai pegar o texto e colocar dentro do Size Box só pra deixar um pouquinho mais organizado.

16

Então agora o meu Size Box vai lá pra baixo.

17

O Anchor Point vai lá pra baixo.

18

Posição 0 e 0.

19

Alinhamento 0.5 e, sei lá, 3.

20

Tá? Agora tem que mudar aqui o meu Size to Content.

21

O meu texto tem que ser alinhado.

22

Vou colocar como o alinhamento no meio aqui.

23

Ficou um pouquinho mais pra baixo. Então Size Box, sei lá, tipo

24

3.5, né?

25

Depois a gente tem que trocar essa fonte aqui, tá?

26

A gente vai fazer uma fonte um pouquinho diferente. Porque aqui nesse texto.

27

Deixa eu pegar o texto.

28

A gente tem fonte aqui. A aparência.

29

Roboto. E tem só essas fontes que vêm junto com a Unreal, né.

30

A gente pode colocar uma fonte personalizada nossa.

31

Então depois a gente vai alterar a fonte e vai mudar um pouco o tamanho das coisas.

32

Vou colocar o tamanho da fonte, sei lá, 18.

33

Quando eu coloco o tamanho da fonte menor, vai pra baixo e tem que subir o Size Box.

34

5. Não. 4.5.

35

Beleza.

36

Então, depois a gente arruma isso aqui.

37

Então agora a gente tem que colocar a vida do personagem aqui.

38

A primeira coisa, então, a gente já viu isso também.

39

Então aqui a gente tem Bind, Text Block.

40

A gente clica em Bind e clica em Create Binding. Apareceu um graficozinho.

41

E o que eu conecto aqui vai ser o valor que vai aparecer na tela.

42

Vou criar uma nova variável.

43

Nova variável.

44

Ela vai se chamar “Health Text”.

45

Eu não posso chamar porque eu já chamei o outro de Health Text.

46

Então… Ela vai se chamar Health. Ela tem que ser do tipo Text e eu conecto ela aqui.

47

Pronto, tudo certo.

48

Por enquanto, nada vai acontecer. Porque essa variável não está atualizando o valor.

49

Se eu for dar play aqui…

50

Está vazio porque ela não tem valor. Essa variável.

51

Não é que ela não tem valor, ela não tem nada aqui. Se a gente digitar aqui, sei lá, 100. Play.

52

Vai aparecer 100 lá.

53

Mas, a gente não quer o valor digitado.

54

A gente quer o valor vindo lá do jogador.

55

Ok.

56

A gente poderia fazer de um jeito que é muito comum que as pessoas fazem nos tutoriais.

57

É mais pra ensinar.

58

Elas criam aqui no Event Graph uma conexão com o jogador.

59

E aí pegam em tempo real tudo o que o jogador tá mandando pra cá.

60

Então, a vida do jogador que está aqui em Hero Char.

61

A vida que está aqui. Lembram da Current Health?

62

Ele pega esse valor e joga direto pra cá. Em HUD. Vem pra cá.

63

E isso é atualizado em todo momento.

64

O problema disso é que não é uma boa prática porque a toda hora você tem que pegar esse negócio.

65

Toda hora você tá puxando informação, mesmo quando tua vida não tá mudando.

66

A gente vai fazer um pouquinho mais eficiente.

67

De um jeito correto.

68

Você só atualizar a informação na tela quando ela precisar ser atualizada.

69

Então a gente não vai fazer lógica aqui no HUD do Player.

70

A gente vai fazer a lógica no nosso Gameplay.

71

Então eu vou criar um evento aqui: Custom Event.

72

Aqui no Gameplay que se chama Update UI.

73

Esse cara eu vou chamar apenas quando eu precisar atualizar o meu HUD.

74

A gente não vai precisar ficar chamando toda hora esse negócio.

75

Esse Update UI vai ser chamado pelo HeroChar.

76

Aqui no meu HeroChar, quando ele levar dano, a gente chama o Update UI.

77

Quando ele restaurar a vida, a gente chama o Update UI.

78

A gente tá chamando aquele Evento aqui no Gameplay Mode apenas quando precisar.

79

Só pra gente entender que vai acontecer: vou colocar uma Print String aqui.

80

Vou chamar de Update UI.

81

Por enquanto é só isso. Só pra gente ver na tela.

82

Compilar e salvar.

83

E quem vai chamar esse cara vai ser o HeroChar.

84

O HeroChar, por enquanto, não tem nenhuma referência pro GameMode.

85

Então eu vou fazer isso aqui no Begin Play.

86

Get GameMode.

87

Cast to BP Gameplay GameMode.

88

Isso aqui a gente cria uma variável pra gente poder utilizar.

89

Vou chamar de Game… Opa…

90

GamePlayGameModeRefer.

91

Nome grande, mas tudo bem.

92

Isso aqui vai acontecer quando o jogo começa.

93

Então é mais um Sequence aqui.

94

Vou comentar esse cara.

95

GetGameMode… Game Mode Refer.

96

Agora a gente pode utilizar o GameMode aqui.

97

Assim que eu levar porrada, né, HeroDamage. Vou tirar essa Print String.

98

A gente não precisa mais. A gente vai começar a usar esse cara.

99

A gente vai fazer um Update UI.

100

Deixa eu pegar aqui meu GameMode.

101

Jogo esse cara fora, jogos todo o Print String fora.

102

Deixa eu pegar o meu GameMode aqui.

103

Get.

104

Update UI.

105

Update… Ui…

106

Então apenas nos momentos que eu precisar atualizar a minha vida eu vou chamar esse Evento lá no GameMode.

107

É aqui.

108

Update UI.

109

A gente vai pegar esse cara aqui e vai colar aqui embaixo.

110

Update UI também.

111

Nas duas condições: se for verdadeiro, se eu morri, Update UI. E se eu não morri, você também “Update UI”.

112

Aqui não precisa conectar nada. Ele só setou o Timer.

113

Então no evento RestoreHealth, quando eu começar a recuperar minha vida eu também preciso fazer o Update.

114

Vamos analisar aqui quando ele tem que fazer isso.

115

Joga o Print String fora. Joga fora e joga fora.

116

Basicamente, é onde estava o Print String.

117

Na condição falsa, quando eu não atinjo TotalHealth você faz um Update UI.

118

E quando atinge o TotalHealth também você faz o Update UI.

119

Beleza.

120

Então agora eu só tô atualizando o meu HUD. Só vou atualizar o meu HUD quando eu precisar.

121

Compilar e salvar.

122

Por enquanto não tá atualizando.

123

Vai ser só o Print String.

124

Vai levar porrada: Update UI… Update UI…

125

Beleza?

126

Se eu for restaurar a vida. Deixa eu levar um tiro. Ó. Estou restaurando a vida.

127

Não tô levando tiro mas ele tá fazendo o Update UI.

128

Então agora a gente tem que colocar pra que isso realmente tenha algum sentido.

129

Por enquanto é só um Print String.

130

Aqui ficou fácil, porque a gente já tem uma referência no GameMode do nosso HUD.

131

Então eu vou pegar essa referência do HUD. Vem pra cá. Get…

132

Então eu tenho que alterar o texto que está dentro do HUD.

133

Que está aqui. Se chama HealthHUD.

134

Deixa eu pegar esse cara e vou clicar agora como Set Health HUD.

135

A gente vai setar um valor pra ele toda vez que esse evento for chamado.

136

E qual valor que é?

137

É o valor de vida do jogador.

138

Então, deixa eu pegar agora o valor de vida do jogador.

139

A gente já tem referência do jogador aqui. A gente já criou ela.

140

A gente vai pegar lá. Get Current Health, né?

141

Esse cara que a gente vai colocar aqui.

142

A gente conecta e ele já vai converter pra gente.

143

Isso é muito legal.

144

Pronto.

145

Então agora, pra gente ver isso acontecendo. Salvar. Play.

146

Restaurando, né. Aqui a gente está exibindo o “restaurando” mas depois a gente vai tirar essa tela.

147

Vamos testar de novo.

148

Levo tiro e minha vida cai.

149

Eu saio dali e minha vida continua.

150

Continua aparecendo.

151

Tá funcionando.

152

Uma coisa que faltou é que ele começa de 0. Então, eu tenho que só vir aqui no meu HUD.

153

O valor padrão desse cara tem que ser 100.

154

Pra ele começar a partir de 100.

155

O valor Default dele.

156

Beleza.

157

Funcionandinho.

158

Maravilha.

159

Agora a gente tem que fazer o Progress Bar.

160

Que é uma barrinha que vai começar a diminuir quando minha vida começar a acabar.

161

Deixa eu pegar aqui o meu HUD.

162

Event Graph. Designer. E aqui a gente vai colocar a barrinha.

163

Vou criar novamente um Horizontal Box pra guardar essas barrinhas dentro.

164

Vou jogar dentro de Canvas.

165

Tá aqui o Horizontal Box.

166

Aqui dentro eu vou criar um Progress Bar.

167

Progress Bar.

168

A gente vai criar duas; Uma do lado esquerdo e uma do lado direito.

169

Por isso que a gente deixa dentro do Horizontal Box.

170

Porque a gente pode colocar uma do lado da outra.

171

Esse aqui eu vou chamar de Progress Bar Left.

172

Depois, eu crio a da direita.

173

Primeira coisa então: Horizontal Box.

174

Tá lá em cima.

175

Vou jogar ele pra baixo.

176

Mesma coisa que a gente já fez.

177

Anchor Point pra baixo.

178

Posição é 0 e 0.

179

Size to Content ligado.

180

Alinhamento 0.5.

181

E aqui, sei lá, 10. Não sei.

182

Tá ali.

183

Tá ali o meu Progress Bar.

184

Agora não dá muito pra ver, mas se eu clicar aqui no Progress Bar,

185

em porcentagem e aumentar…

186

Você tá vendo aqui que tem uma barrinha, né.

187

Agora o que tem que fazer é o seguinte. Colocar essa barrinha aqui, nesse lado.

188

Do tamanho correto.

189

Posicionamento dela vai ser à esquerda.

190

Alinhamento na vertical vai ser no meio.

191

Tá?

192

E agora eu vou duplicar pra ter mais uma barrinha.

193

CTRL+C e CTRL+V.

194

Copy, Paste.

195

Essa aqui vai ser a barrinha da direita.

196

Right.

197

Basicamente, o que tá acontecendo é que uma barrinha tá colada na outra.

198

Onde termina uma, começa outra.

199

A gente tem que ter um espaçamento entre elas aqui.

200

Então aqui na minha barrinha da esquerda, em Padding, a gente tem o espaçamento.

201

O Padding da direita eu vou colocar um espaçamento.

202

Deixa eu aumentar aqui, sei lá…

203

O espaçamento dela no lado direito: 100.

204

130.

205

135…

206

Agora a gente tem que aumentar o tamanho da barrinha: tá pequena.

207

Então eu venho em estilo. Estou com meu Progress Bar Selecionado.

208

Estilo… Marquee Image. Vou colocar como Draw As Image. Já tá.

209

Aqui em Image Size, sei lá… 210.

210

Tem que fazer a mesma coisa com a da direita.

211

Image Size 210.

212

Encaixou certinho.

213

Eu já tinha esses valores anotados por causa do meu jogo.

214

Mas, você pode encaixar de acordo com os teus.

215

Aqui em Y eu posso diminuir um pouquinho. Acho que está muito.

216

Eu vou colocar, sei lá, 8.

217

E no da esquerda também 8.

218

Cai lá pra baixo.

219

Horizontal Box a gente sobe um pouquinho.

220

14.5… 15…

221

14. opa. 14.8. Beleza.

222

Agora a gente tem que alterar a cor do Progress Bar. Então seleciona o Progress Bar aqui embaixo.

223

A gente pode colocar a cor que a gente quiser. Eu vou deixar branquinho que tem a ver mais com o meu jogo.

224

Ou um verdezinho que é a cor da arma.

225

Vamos ver como tá ficando isso.

226

Mais verde. Verde mais verde.

227

Eu vou copiar esse valor.

228

Esse valor aqui pode ser aqui o Linear. Hex Linear.

229

CTRL+C . Eu venho na outra Progress Bar e CTRL+V.

230

Vamos ver como tá ficando por enquanto.

231

Play.

232

Tá bonitinho. Eu gostei.

233

A gente tem que alterar a ordem.

234

Uma tá começando da direita pra esquerda, que tá certinha aqui.

235

Porcentagem.

236

Tá o mesmo lado e a gente tem que mudar.

237

Tem que ser Right to Left. Beleza?

238

Então agora vou deixar todo mundo no 100, que é o máximo.

239

Esse aqui também é 100, que é o máximo.

240

E agora a gente faz também um Bind pra gente poder pegar esse valor e alterar.

241

Seleciona no Progress Bar… A gente vem em porcentagem que está em 100.

242

Clica em Bind, Create Binding. Apareceu o gráfico pra mim.

243

Tudo o que eu conectar aqui vai mudar o valor desse Progress Health.

244

Eu vou clicar aqui numa variável nova.

245

Vou chamar de ProgressHUD.

246

Tipo é Float.

247

Conecto aqui.

248

Designer…

249

E aqui, o segundo, o outro Progress Bar.

250

Porcentagem eu vou criar com um Bind também. Create Binding.

251

E pode ser o mesmo valor. Então É a mesma variável. Vem pra cá.

252

Por enquanto, nada acontece porque essa variável não tem valor nenhum.

253

Vou colocar aqui como 1, que é o máximo. Vai ser de 0 a 1 esse valor.

254

Compilar e salvar.

255

Já tá enchido a barrinha.

256

A gente tem que fazer agora lá no nosso Update UI a alteração desse valor.

257

Então lá em GamePlay, GameMode eu tenho que fazer a alteração desse valor em tempo real.

258

Mais uma coisa aqui: eu pego o HudPlayer e vou dar um set na Progress Bar.

259

Set…

260

Set Progress HUD.

261

Vamos mudar esse valor aqui.

262

Qual valor vai vir aqui? É a vida do jogador de novo. Current Health.

263

Só que a Current Health tá vindo em 100. De 0 a 100.

264

A gente precisa que seja um valor de 0 a 1.

265

Então eu vou pegar esse valor e dividir por 100.

266

Divido por 100 e conecto aqui.

267

O problema vai ser quando o valor for 0. Quando ele morrer.

268

0 dividido por alguma coisa dá problema. Não dá pra dividir 0 por nada.

269

Eu tenho que fazer uma condiçãozinha aqui só pra… Vem todo mundo pra cá.

270

Branch.

271

Condiçãozinha quando esse cara aqui for 0.

272

Pega aqui. Se ele for menor ou igual a 0…

273

Se essa for a condição.

274

Branch.

275

Se isso for verdadeiro, você pega esse Progress Bar e seta o valor de 0.

276

Cuidado aí só pra gente evitar divisão por 0.

277

Se for falso, se não é 0, então você continua com o mesmo cálculo que tava antes.

278

Só vou colocar esse cara pra baixo.

279

Está bonitinho, arrumadinho e funcionandinho.

280

Compilar e salvar. Vamos ver se funciona? Play.

281

O tiro… Levo tiro… Tô aqui e ela tá restaurando de 10 em 10.

282

Beleza. Tá funcionando.

283

A última coisa que a gente tem que fazer, eu não sei se vocês perceberam. Aqui no meu HUD.

284

Esse Progress Bar tá aparecendo em cima da Imagem, né?

285

A gente pode alterar isso.

286

Pra isso a gente seleciona Horizontal Box que é o que tá cuidando da Health Image

287

e aqui, em Z Order a gente coloca 1. Pronto. Ele foi pra cima.

288

Agora ele aparece embaixo, bem bonitinho, pra gente.

289

Maravilha. Acho que é isso.

290

O que a gente tem que continuar agora, na próxima aula, é fazer um Menuzinho pra quando ele morrer. Pra gente poder reiniciar o jogo.

291

E aí a gente começa a fazer, também, as lógicas de reiniciar e tal.

292

Beleza? Vamos nessa.