Original subtitles

1

15. The Grid Menu - Pause Menu

2

Agora a gente vai fazer o Menu de pause.

3

Existem algumas maneiras de implementar isso.

4

A gente pode colocar, por exemplo, no Player Controller.

5

Que é um bom lugar pra gente colocar o Menu de pause.

6

Eu posso tentar seguir a mesma lógica que eu fiz anteriormente

7

e colocar dentro do GameMode, que a gente colocou o Update UI.

8

Só que o problema é que o GameMode não vive.

9

Ele não sobrevive na troca de Level.

10

Quando eu trocar o Level, eu tenho que usar o mesmo

11

GameMode ou então implementar a mesma estrutura

12

no GameMode novo que eu utilizar.

13

A gente pode colocar a lógica no HeroChar, né?

14

E por causa da gente estar seguindo a questão…

15

O Hero tem as opções de input.

16

Por exemplo, a gente tem o botão de Jump, o botão de Sprint…

17

A gente poderia ter um botão de pause aqui também.

18

São muitas variações, né.

19

De como a gente pode implementar isso.

20

A gente está pensando aqui num jogo pequeno.

21

Então qualquer um dos caminhos dá muito certo.

22

O ideal que eu posso sugerir pra você é criar essas lógicas,

23

por exemplo, no Player Controller.

24

Mas pra não mudar a nossa lógica que a gente tá fazendo nesse jogo,

25

eu posso fazer isso no HeroChar.

26

Porque é ele que tá cuidando dos meus Inputs.

27

Vou criar um novo Input pra que ele dispare o Menu de pause quando eu apertar o botão.

28

A gente vai fazer o despausar o jogo pelo botão e também pelo teclado.

29

Vamos começar a fazer isso então.

30

Primeiramente, vou fazer um novo HUD.

31

Que é o Menu de pause.

32

Novo Widget.

33

Menu de pause então seria, vou colocar como Menupause.

34

Aí dentro desse Menu a gente vai ter os botões pra despausar,

35

pra sair do jogo e pra voltar ao Menu principal.

36

Por enquanto, a gente não tem o Menu principal, né?

37

Vamos começar a criar então.

38

Vou criar um Vertical Box.

39

Vertical Box…

40

Porque eu vou ter botões um em cima do outro.

41

Então Vertical Box é perfeito pra isso.

42

Eu vou centralizar o meu Vertical Box.

43

Posição zero zero. Anchor Point no meio…

44

O alinhamento 0.5, 0.5.

45

A gente já fez isso muitas vezes.

46

E vou trazer um primeiro botão.

47

Button.

48

E vou criar primeiro um botão pra que depois a gente

49

possa criar os outros só duplicando este.

50

Então esse botão eu vou chamar de “BotãoVoltarAoJogo”.

51

Colocar aqui: VoltarAoJogoBotão. Button.

52

Button. Pra gente continuar com a mesma estrutura de inglês que a gente

53

está utilizando para os botões.

54

Vou trazer um texto. Pra ter um texto neste botão. Text.

55

Jogo em cima do botão.

56

E esse texto eu vou nomear como VoltarAoJogoText.

57

Aqui no Text eu coloco “Voltar ao Jogo”.

58

Vertical Box eu coloco como Size to Content.

59

Ele pega o tamanho inteiro do negócio.

60

Posso trocar a fonte, posso trocar o tamanho da fonte, cores e tal.

61

Vou fazer isso aqui um pouquinho depois.

62

Primeiro eu quero implementar isso pra eu conseguir ver dentro do jogo.

63

Compilar e salvar.

64

Tá salvo esse Widget.

65

A gente vai implementar ele então.

66

Primeira coisa: eu vou fazer um botão pra gente pausar o jogo.

67

Então: Project Settings.

68

Aqui em Action Mapping a gente tem nossos botões setados.

69

Eu vou criar um novo.

70

Eu vou criar um botão.

71

É… pauseButton.

72

E já vou selecionar, por exemplo, Enter no teclado, que é o botão de Start.

73

Vou colocar o botão P no teclado. De pause, P de pause.

74

E no botão do controle do videogame eu coloco Special.

75

Special GamePad Right.

76

Que é o botãozinho do Start.

77

Aqui no HeroChar: pauseButton, né.

78

E a partir daqui, então, eu vou chamar a lógica de pause.

79

Como eu comentei, aqui no meu GameMode

80

a gente criou a HUD do Viewport.

81

Então a gente poderia criar também a HUD do pauseMenu.

82

E acessar ela quando for necessário.

83

Vou fazer isso aqui.

84

Depois, no próximo Level que a gente tiver, a gente vai usar o mesmo GameMode

85

pra gente ter a mesma estrutura.

86

Então eu vou criar essa Widget no começo do jogo.

87

Create Widget.

88

A Widget é pause Menu.

89

Ele vai criar uma cópia, um objeto dessa classe.

90

Menu de pause.

91

O valor que retornar eu coloco numa variável e eu chamo essa variável de pause. Menupausarefer.

92

Compilar o nosso amigo aqui.

93

E o Controller. PlayerController é o Owner Player desse menu de pause.

94

Isso acontece no Begin Play.

95

Então eu vou adicionar um novo pin aqui e eu conecto aqui.

96

Tenho um Menu de pause criado.

97

Por enquanto ele não aparece na tela porque eu não chamei.

98

Vou criar um comentário. Create Menu pause.

99

E, maravalha. Tá aí.

100

A gente vai fazer um Evento então aqui,

101

nesse GameMode pra que ele pause o jogo quando precisar.

102

A gente já tem aqui um Evento de Update UI.

103

Vou criar um Evento novo aqui embaixo.

104

Custom Event.

105

Eu vou chamar de pause Game.

106

A primeira coisa que a gente faz pra pausar o jogo é SetGamepaused.

107

Vou deixar ligado.

108

E o contrário seria UnpauseGame.

109

Então eu vou criar um novo Evento chamado de UnpauseGame.

110

E colocar SetGamepaused como falso.

111

Quando isso acontecer a gente tem que colocar o Widget, o menu na tela.

112

Então a gente vai pegar aquele Menu que a gente criou aqui.

113

O Menu de pause.

114

Menupausarefer e vai colocar na tela.

115

Então, Menupausarefer Add to Viewport.

116

Antes disso a gente tem que remover tudo o que tá na tela

117

que é o HUD do jogador, lembra?

118

A gente tem que tirar isso da tela.

119

Então eu vou pegar o HUD do jogador.

120

Vou remover da tela.

121

Remove from Parent.

122

Depois eu coloco o Menu de pause. Maravilha então.

123

Quando eu pauso o jogo, eu pauso o jogo.

124

Eu tiro o HUD da tela e coloco o Menu de pause.

125

Quando eu despausar o jogo, eu vou tirar o Menu de pause da tela.

126

Pego o meu Menu pause. Remove from Parent.

127

E volto a adicionar o HUD na tela,

128

pro jogador ver o HUD de novo.

129

Basicamente, é o contrário.

130

Eu adiciono na Viewport o HUD novamente.

131

Add to Viewport.

132

Por enquanto é isso.

133

A parte básica. Por enquanto é isso.

134

Compilar e salvar.

135

Nenhum desses Eventos tá sendo chamado por enquanto.

136

A gente tem que chamar esses caras.

137

Eu vou chamar esses caras no HeroChar.

138

HeroChar, quando eu apertar o botão de pause.

139

Então a primeira vez que eu apertar aquele a gente vai pausar o jogo.

140

Vou chamar aqui GameMode.

141

Pego o GameMode, a referência, a gente já tem ela pronta.

142

E eu chamo pauseGame.

143

Pronto.

144

Vamos só testar por enquanto se tá funcionando.

145

Compilar e salvar.

146

Play.

147

Se eu apertar o P, pausei o jogo. Não tem como despausar por enquanto.

148

Então pra despausar o jogo eu preciso chamar o Evento de UnpauseGame

149

que está lá no GameMode.

150

Então, Unpause game. A gente poderia fazer aqui uma das coisas

151

que a gente pode pensar. Seria um FlipFlop.

152

E aí a primeira vez que eu aperto eu pauso o jogo

153

e a segunda vez que eu aperto eu despauso o jogo.

154

O problema dessa técnica, desse jeito, é que a gente pode despausar o jogo

155

de outras maneiras, como, por exemplo, clicar no botão de despausar o jogo.

156

E aí eu vou clicar no botão de despausar e eu não chamei o FlipFlop

157

porque eu não apertei o botão.

158

E a próxima vez que eu chamar o FlipFlop, ele vai chamar de volta o Unpause Game.

159

Vai dar um conflitinho aí.

160

Então o FlipFlop não é a melhor opção aqui.

161

A melhor opção é a gente fazer um Branch pra gente ver se o jogo está pausado ou não.

162

Pra fazer isso é só a gente pegar Get Game paused.

163

Is Game paused.

164

Essa é a condição.

165

Se ele está pausado, se isso for verdadeiro…

166

Então você Unpause game. Se ele não está pausado, você pause o jogo.

167

Beleza? Só a gente mudou a ordem aqui.

168

Espero que tenha ficado claro. A gente faz dessa maneira.

169

FlipFlop não vai dar um resultado legal pra gente porque vai dar conflito com…

170

Quando a gente for clicar com o mouse no botão de despausar.

171

Compilar e salvar. Vamos ver se vai funcionar?

172

Eu já sei que não vai funcionar e eu vou mostrar porquê.

173

Play.

174

Aperto o P.

175

Apertei pause. Aperto o P de novo e não despausa. Tá vendo?

176

Por quê?

177

Porque este Evento aqui eu vou clicar neste Evento. Neste nó.

178

Aqui, em detalhes, no lado direito, a gente tem Execute When paused.

179

Tá desligado. Então, este Evento não pode ser executado quando o jogo está pausado.

180

Tenho que clicar aqui.

181

Deixar ligado esse cara e agora este Evento pode ser executado quando o jogo estiver pausado.

182

Então, save. Play.

183

Aperto o P, pause, aperto o P, despause, aperto o P, pause, aperto o P, despause.

184

Aí o HUD tá indo embora. O HUD do player vai embora.

185

Ele só coloca o HUD… O menu de pause em cima.

186

Agora a gente tem que implementar um menuzinho pra eu poder clicar ali e despausar o jogo.

187

Certo?

188

Eu vou colocar aqui só... pause.

189

Aqui a gente completou, basicamente, o que o jogador vai fazer.

190

Pra gente poder usar o Menu, a primeira coisa que a gente tem que fazer é colocar o mouse, né?

191

Então eu venho em GameMode, né?

192

Este Evento de pauseGame eu tenho que mostrar o mouse.

193

Então, Show Mouse Cursor.

194

Se isso não aparecer pra você, você desliga o Context Sensitive,

195

porque o Mouse Cursor é uma função da classe Player Controller,

196

então ele não vai entender se ele estiver ligado. Tá vendo?

197

A gente tira e coloca Set Mouse Cursor ligado.

198

Quando a gente pausar o jogo a gente quer ver o mouse

199

e a gente quer ver o mouse no Get Player Controller, Controller 0.

200

Quando ele despausar o jogo é ao contrário.

201

Copiar esse cara. CTRL C, CTRL V…

202

A gente não quer mais o mouse.

203

Compilar e salvar.

204

Play.

205

Pause o jogo. Tô vendo o mouse. Posso até clicar aqui.

206

Agora a gente tem que implementar o Menu de pause e os botões sendo clicados.

207

A melhor maneira de fazer isso é lá na Widget do Menu pause

208

a gente implementar as funções dos botões.

209

Então eu vou selecionar esse botão. Voltar Ao Jogo Button.

210

E aqui no lado direito a gente tem os Eventos.

211

Eu quero o Evento OnClicked. O Evento quando eu clicar.

212

Quando eu clicar aqui aparece o gráfico e tem toda a funcionalidade de clicar no botão.

213

Então o que eu vou fazer aqui quando eu clicar nesse botão?

214

SetGamepaused.

215

Desligado.

216

A gente vai desligar o pause do game.

217

Basicamente é isso.

218

Compilar e salvar. Play.

219

Aperto o pause. Pausou o jogo.

220

Se eu clicar, despausa o jogo.

221

Só que vocês perceberam que o Menu não saiu, né?

222

Porque toda essa questão do Menu está aqui no GameMode.

223

Tirar o Menu… Botar o Menu e tal…

224

Então eu vou chamar essa função também.

225

A melhor maneira é a gente chamar a função direto.

226

Pra gente chamar a função que tá lá no GameMode

227

a primeira coisa que eu tenho que fazer é meu Widget precisa saber do meu GameMode.

228

Então eu preciso fazer um Cast pra ele.

229

Vou fazer isso no EventConstruct, que é quando essa Widget é construída.

230

GetGameMode…

231

CastTo GameMode…

232

GamePlay, GameMode.

233

Coloca isso numa variável.

234

Eu vou chamar de “GamePlayGameModeRefer”.

235

Nome gigantesco, mas, mostra exatamente pra mim o que é.

236

Então assim que eu clicar nesse cara, em vez de só despausar o Menu, joga fora isso.

237

Pegar uma função que está pronta lá no meu GameMode.

238

Que se chama UnpauseGame.

239

Pronto.

240

Agora o HUD vai sair. Vai tudo funcionar.

241

Agora vamos testar.

242

Aperto o P, deu pause.

243

Cliquei aqui… Deu despause.

244

Você percebe que deu alguns probleminhas. Tá vendo?

245

Meu input mode… tal…

246

Eu continuo com o mouse. Se eu clicar, o mouse some.

247

A gente tem que começar a arrumar essas coisinhas aí.

248

Isso é o foco da Widget, né?

249

Então, GamePlayGameMode.

250

Quando despausar o jogo eu preciso colocar o meu GameMode apenas como Game.

251

Então, SetInputModeGameOnly.

252

Target: PlayerController. Então conecta esse cara aqui.

253

Então basicamente o que eu coloquei agora foi:

254

Quando despausar o jogo, você coloca o input mode como Game Only.

255

Vamos testar agora.

256

Aperto o Play. Quando eu clicar aqui despausar o jogo.

257

Então agora eu não preciso dar o foco novamente no jogo.

258

No entanto, eu tô fazendo dois cliques, né?

259

Aperta o P e eu não consigo clicar.

260

Tem que clicar uma vez e depois clicar de novo.

261

Tem que trocar isso também.

262

Então isso a gente vai fazer aqui ó.

263

No pause Game.

264

Quando eu pausar o jogo você tem que colocar o SetInputMode como…

265

UIOnly.

266

Aí a gente vai colocar Widget de Focus.

267

Ele tem que focar na Widget pra gente não precisar clicar 2 vezes.

268

Lembra que a gente viu isso tudo na aula de HUD, né?

269

Não é novidade, não.

270

Widget Focus é o Menu pause Refer.

271

Vem pra cá.

272

Tudo isso pra fazer um menu de pause.

273

E Target é o controle.

274

Beleza.

275

Vamos ver se funciona então?

276

Save, Play…

277

Aperto o P.

278

Ó, já tá com foco na Widget. Não preciso clicar 2 vezes.

279

Cliquei, despausou.

280

Aperto o P.

281

Não despausa.

282

Percebeu que eu aperto o P e não despause.

283

Por quê?

284

É só Input Mode e o Hero tá no Play.

285

Ele tá como Play.

286

Então eu vou ter que tirar esse cara.

287

Ao invés de ser só Input Mode tem que ser Game and Input.

288

Set Input Mode Game and UI.

289

Agora vai dar certo.

290

Target é o Player Controller.

291

Widget to focus é o Player Menu. O mouse menu.

292

Compilar e salvar.

293

Caramba, é bastante coisa, né? Play.

294

Aperto o P. Despausa. Aperto o P, clica, despausa.

295

E sem um monte de cliques, né?

296

Tudo isso pro Menu de pause mas tá funcionando.

297

Vou voltar aqui no meu Menu de pause pra gente fazer os outros botões.

298

Tem esse botão aqui. Vou duplicar ele.

299

CTRL C, copy. CTRL v, paste.

300

Este botão vai ser o botão de Menu Principal, que a gente ainda não tem.

301

O botão vai tá só aí.

302

Vou fazer a mesma coisa com o texto.

303

Vou mudar o texto para Menu Principal. Text.

304

Aqui no Menu Principal é Menu Principal Button.

305

Este texto vai ser Voltar Menu Principal.

306

Falta mais um botão que é Sair do Jogo.

307

CTRL C, copy. CTRL V.

308

Aqui no vertical box. CTRL V, paste.

309

Este botão se chama QuitGameButton.

310

E o texto se chama QuitGameText.

311

E o texto aqui se chama Quit Game.

312

Sair do jogo, né.

313

Estamos em português. “Sair do Jogo”

314

Então eu tenho os 3 botões aí.

315

Menu principal, por enquanto, não vai funcionar.

316

Vou deixar o Evento dele pronto.

317

Vou colocar o Evento OnClicked.

318

Menu principal, quando a gente clicar vai voltar pro Menu Principal.

319

Mas, por enquanto, vai ser só um Print String.

320

Eu vou chamar de Menu Principal.

321

E o outro botãozinho vai ser “Sair do Jogo”

322

Eu clico aqui.

323

OnClicked.

324

Quando o cara clicar aqui ele vai sair do jogo.

325

E pra sair do jogo eu só faço um QuitGame.

326

É uma função: QuitGame.

327

Eu posso especificar o jogador aqui colocando o PlayerController. Get Player Controller.

328

E pronto.

329

Eu tenho os 3 botõezinhos aí no meu HUD.

330

Compilar e salvar.

331

Play.

332

Pause Menu.

333

Menu Principal ainda não tá funcionando.

334

Sair do jogo, ele sai do jogo.

335

A gente tem que ainda melhorar a cara desse Menu.

336

Tá meio feinho. Tem que fazer um poquinho melhor.

337

A gente faz isso na próxima aula então.

338

A gente faz isso na próxima aula.