Original subtitles

1

15. The Grid Layout do Level

2

Vamos falar, então, sobre o Layout do Mapa.

3

Eu separei, antes de começar a aula, algumas imagens de Layouts de mapas.

4

Esse aqui é do Heroes Of The Storm.

5

Da Blizzard.

6

Então, antes mesmo que a gente comece a criar um mapa, a gente faz um Layout.

7

Normalmente, é uma visão... Deixa eu ver se eu consigo dar zoom.

8

Normalmente, é uma visão como essa.

9

Vista de topo, né?

10

Então, a gente consegue entender vista de topo.

11

Como se fosse uma planta baixa, sei lá, de um apartamento.

12

As coisas que a gente quer colocar no mapa.

13

E até aqui, nesse caso, tem os íconezinhos de...

14

De pontos importantes.

15

Então, por exemplo, eu vejo esse aqui, da Heroes of The Storm...

16

Eu não sei se esse Layout é...

17

Oficial, da Blizzard. Eu acredito que não, alguém fez uma printscreen.

18

Tá? Mas só pra gente ter uma ideia.

19

Deixa eu colocar outro aqui. Esse aqui...

20

Eu acho que é do Counter Strike.

21

Então, a gente tem, as vezes, um Layout como esse, exibido...

22

Para o jogador.

23

Quando ele tá jogando o jogo, ele vê o Layout também.

24

Mas, antes de a gente criar o jogo, a gente criar alguma coisa como essa.

25

Colocando as áreas, né?

26

As passagens que o jogador vai ter.

27

O próximo Layout que eu separei, foi do Gears Of War.

28

Então, a gente pode fazer um Layout bem mais simplificado, aqui nesse caso.

29

Sem...

30

Aqui no Counter Strike, a gente tem a sombra, tem um carrinho aqui, tem a sombra das paredes.

31

Eu posso fazer uma coisa bem mais...

32

Simples.

33

Né? Bem mais simplificada.

34

Só mostrando pontos importantes, para que a gente possa...

35

Ter o Layout, antes de começar realmente a modelar no 3D.

36

Tem aqui, do Super Metroid.

37

Que é um Layout já em Side Scroller, né?

38

Eu não estou vendo de cima, eu estou vendo de lado.

39

Isso aqui é muito comum em jogos do Metroidvania.

40

Esse aqui, o cara pegou uma foto do próprio mapa, que está dentro do jogo.

41

E colocou pontos importantes, de coisas que podem ser...

42

Alcançadas. É bem legal, também, pra gente poder estudar Game Design.

43

E Level Design.

44

Para saber os pontos importantes das coisas.

45

E, aqui, eu coloquei também, uma outra imagem.

46

Que é do Zelda. E esse aqui é um... O cara fez, na verdade...

47

Uma...

48

Uma montagem, para mostrar o Layout de uma dungeon. Water Temple.

49

Do Ocarina of Time.

50

Quem jogou esse jogo, sabe como é um grande jogo.

51

Quem não jogou, dá uma procurada aí. Eu acho que vale a pena.

52

É uma grande lição de...

53

De Game Design de dungeons.

54

E tem essa dungeon do Water Temple, que é considerada uma das melhores dungeons já feitas no Zelda.

55

E aqui, o cara fez uma...

56

Uma montagem, só para explicar as coisas.

57

Então, ele fez essa visão em 3D.

58

Né? Em perspectiva ortográfica.

59

Para mostrar como as coisas são conectadas. Então, a gente tem...

60

Níveis, né?

61

Então, você percebe que tem essa rampa aqui, que sobe para esse cenário...

62

Ela desce para esse outro cenário. A gente tem três níveis de água aqui.

63

E aí, você tem as outras posições, das outras áreas, tá?

64

Esse aqui é um tipo de Layout também, que pode ser feito. Eu não achei...

65

Mas, uma vez eu vi uma imagem da produção mesmo, do Half Life.

66

E eles usavam um pouco desse tipo de...

67

De Layout mais em 3D aqui, desenhado.

68

E ortográfico, para fazer o Layout dos seus mapas.

69

A gente vai fazer...

70

Já nesse capítulo, um Layout de topo.

71

Que a gente pode, depois, transformar em um 3D ortográfico.

72

Mas, vai de acordo com a tua...

73

Com a tua opção, tá? Como é que eu fiz?

74

Na verdade, eu fiz utilizando um papel e lápis.

75

É mais fácil eu mostrar para vocês no Photoshop.

76

Né? O processo que eu utilizei.

77

Então, basicamente, a gente vai fazer uma nova imagem no Photoshop.

78

Ou em qualquer outro programa de desenho, né?

79

Eu estou fazendo exatamente no computador, para que vocês possam ver a gravação que eu fiz aqui.

80

Mas, como eu comentei, eu fiz isso aqui no papel e depois eu passei para o computador.

81

Então, digamos que lá no meu...

82

Eu vou fazer uns rabiscos aqui.

83

Digamos que no meu jogo, como eu comentei lá no meu...

84

Short Game Design Document. Eu vou ter uma área...

85

Né? Pense que eu estou vendo aqui de cima, beleza?

86

Vou ter uma área aqui, central.

87

Onde o jogador vai começar.

88

E eu vou ter três caminhos. Então, eu tenho, sei lá... um primeiro caminho aqui.

89

Estou fazendo um rabisco aqui.

90

O segundo caminho.

91

E o terceiro caminho.

92

Cada um desses caminhos vai apontar o jogador para alguma direção.

93

Tá?

94

Eu posso talvez ter um começo aqui, que seria uma...

95

Como se fosse uma entrada para o jogador.

96

Então, digamos que o jogador... Eu já vou marcar ele aqui, com uma outra cor.

97

Digamos que o jogador... Vou colocar ele de...

98

Amarelo, porque ele é importante.

99

Digamos que o jogador começa aqui.

100

Não está dando para ver, então eu vou colocar uma...

101

Outra cor.

102

Esse cara, eu vou inverter.

103

E eu vou pintar novamente, o jogador de amarelo.

104

Tá?

105

Então, digamos que o jogador começa aqui.

106

E aqui eu já sei que ele está...

107

Caminhando para a frente.

108

Ele vai caminhar para a frente, vendo de cima, né?

109

Ele caminha e chega nessa área central, onde vai ter...

110

Aquela área que o jogador vai colocar as chaves, tá?

111

Então, esse aqui é o nosso primeiro Layout, rabiscado.

112

Pronto, né?

113

Já sei que eu tenho que construir uma área tipo essa.

114

E aí, eu comecei a fazer algumas ideias de Design.

115

Como é que isso aqui vai se comportar.

116

Então a gente pode, por exemplo, fazer algum tipo de labirinto.

117

E aí, o jogador vem para a direita aqui. Ele pode ter uma...

118

Segunda opção, né? Como se fosse um mapinha de...

119

De trânsito.

120

Para você explicar para alguém onde fica a tua casa.

121

Né? Eu posso fazer uma outra ruazinha aqui, que o jogador pode entrar.

122

Ou fazer algum outro tipo de estrutura aqui.

123

Né? Uma sala, por exemplo, tá?

124

Mas, nada disso eu fiz...

125

Eu fiz tudo na mão.

126

E eu já tinha pensado, na minha cabeça, como eu queria as três áreas.

127

No meu caso, as paredes... Essas áreas aqui, não têm paredes.

128

Algumas delas vão ter, algumas...

129

Áreas para bloquear, mas... Na verdade, é tudo suspenso.

130

E o jogador pode cair lá para baixo, tá?

131

Então, no meu caso, não faz muito sentido...

132

Eu não vou ter paredes, por exemplo, com uma porta aqui, para o jogador entrar.

133

Né? Lá no fundo.

134

Beleza?

135

Eu separei, então, três grandes áreas.

136

A primeira delas é uma área que vai ter a chave rosa.

137

Eu vou fazer as chaves de três cores diferentes.

138

Então, essa primeira área vai ser a área rosa.

139

E nessa área rosa, eu tinha feito só um caminho aqui.

140

Então, eu faço um caminho.

141

Nesse caso, eu estou só fazendo rabisco.

142

Eu não estou preocupado muito com a escala ainda, tá? Só fazendo uns rabiscos.

143

Faço tipo alguma coisa como um caminho.

144

E a chave está aqui no final.

145

Beleza?

146

E para que esse caminho fique um pouquinho mais complicado.

147

Eu posso inserir esse caminho com alguns inimigos.

148

Então, deixa eu colocar aqui, uma cor de vermelho...

149

Vou colocar um inimigo aqui, um inimigo aqui. Eles estão suspensos no ar.

150

E aí, a gente vai ter...

151

Só explicado aqui, então, nesse primeiro caminho.

152

O jogador vai ter alguns inimigos.

153

O segundo caminho que eu vou fazer...

154

Que eu tinha feito no papel, é o caminho verde aqui. Da chave verde.

155

E nesse caminho, eu quero fazer algumas plataformas móveis.

156

Então, eu vou fazer aqui alguns quadradinhos, só para representar algumas plataformas que vão se mover.

157

O jogador tem que pular entre essas plataformas.

158

Para alcançar a chave, que vai ter em uma plataforma, lá no final.

159

Tá?

160

E o terceiro caminho que eu tenho, é o da chave azul.

161

Deixa eu pegar...

162

Um azul aqui.

163

E aí, ele vai para cima.

164

E nesse caminho, eu tinha feito alguns teletransportes.

165

Então, o jogador vai pegar teletransportes e ir...

166

Para outras áreas. Então, eu tenho uma área aqui.

167

Que está afastada, né? Suspensa.

168

Eu tenho, por exemplo, uma outra área aqui. E eu tenho a área final.

169

Onde vai ter a chave.

170

Então, eu vou marcar aqui, só uma ideia inicial.

171

Onde eu poderia colocar, por exemplo, algumas...

172

Alguns portais.

173

Então, eu poderia colocar um portal aqui.

174

Um portal aqui e um portal aqui. Então, por exemplo, o jogador...

175

Ele vai andar nessa linha aqui, né? Nesse corredor.

176

E o portal vai disparar...

177

Alguma coisa aqui.

178

E, se esse negócio...

179

Essa placa, essa luz, encostar no jogador, ele vai ser teletransportado.

180

Então, eu posso ter três portais, que estão interagindo.

181

Só que, o único portal certo é o último. Então, o jogador é forçado a passar por aqui.

182

E ele precisa alcançar o último portal.

183

Então, se ele encostar, por exemplo, no segundo portal, ele retorna para uma área que está errada.

184

Então, ele pode retornar para cá, por exemplo.

185

Tá?

186

Então, eu vou só fazer rabisco aqui, por enquanto.

187

Só para exemplificar. Eu tenho portal aqui, tenho um portal aqui...

188

Um portal aqui. E nesse último portal, o jogador vai entrar...

189

E vai ser teletransportado.

190

Para o final.

191

Então, eu fiz um rabisco.

192

Bem simples, né?

193

Daquilo que eu estou imaginando para o meu jogo.

194

Tá?

195

E agora, a gente pode utilizar esse primeiro rabisco...

196

Pra começar a layoutar um pouquinho melhor.

197

Então, uma coisa que eu gosto de fazer...

198

Né...

199

É uma sugestão, a gente começar a fazer algumas coisas com blocos.

200

Tá?

201

Pra gente poder ter modular nas coisas. Ou seja...

202

Por exemplo, a gente tem um chão. Eu vou desenhar aqui...

203

Então, por isso que a gente tem lá no jogo...

204

Aqui eu estou fazendo meio...

205

Com perspectiva em 3D.

206

A gente tem um bloquinho de chão. Como eu comentei, o meu jogo vai ser suspenso no ar.

207

Então, a gente vai ter um bloco desse, suspenso no ar.

208

E eu posso duplicar esse bloco, para criar mais um bloco lá na frente.

209

Eu posso duplicar esse bloco, para criar mais um bloco, aqui atrás.

210

Né?

211

E aí, se eu fiz isso aqui, apaga aqui, né?

212

Então, estão os três blocos conectados.

213

Isso aqui é um tipo de Layout que a gente pode fazer para o nosso jogo, que é modular.

214

Né?

215

Então, eu utilizo a mesma construção. O mesmo bloquinho de construção.

216

Para fazer todo o piso. Eu posso colocar mais um aqui do lado.

217

E continuar.

218

Mais um aqui do lado e continuar para a direita, por exemplo.

219

Tá?

220

Então, nesse caso do The Grid, por ser tudo quadrado...

221

Eu vou utilizar bloquinhos de construção, como esse.

222

Em um processo que a gente chama de construção de level modular.

223

Se você pesquisar...

224

Isso aqui na internet, você vai achar bastante coisa.

225

Falando sobre isso.

226

Principalmente se você for fazer...

227

O level...

228

Que se chama Procedural.

229

É um outro termo aí.

230

Bem conhecido.

231

E o Procedural é o tipo de Level que você vai criar...

232

De acordo com alguns parâmetros, né? Ele não é criado...

233

Manualmente na Unreal. Ou seja, não tem uma pessoa...

234

Que vai pegar esse bloquinho e colocar ele...

235

Vai pegar o segundo bloquinho, vai colocar ele...

236

E a gente vai ter um Level construído e fechado, fixo.

237

É um Level que é...

238

Tem um começo, meio e fim, né?

239

Ele é pensado no Layout e ele é reproduzido no 3D.

240

No caso do Procedural, a gente vai ter uma coisa que é criada de forma dinâmica.

241

Então, a gente pode ter vários cenários criados...

242

De forma aleatória. Então, por exemplo, a gente pode criar regras.

243

A gente fala para o computador: "Coloque um bloquinho aqui."

244

E depois você pula um...

245

Um espaço.

246

E coloca um outro bloquinho.

247

Então, o jogador vai ser...

248

Forçado a pular desse bloquinho para esse, tá?

249

Então, esse aqui foi feito com um parâmetro de forma aleatória.

250

Eu poderia dizer...

251

"Cria um bloquinho, depois você cria um outro bloquinho em cima..."

252

E depois você cria o buraco.

253

Então, a gente vai ter dois levels...

254

Onde o primeiro level tem um bloquinho, tem um espaço e tem outro bloquinho.

255

E a gente tem o segundo level.

256

Onde eu tenho um bloquinho...

257

Eu tenho o terceiro bloquinho e aí, eu tenho o espaço. Então, a gente tem...

258

Espaço aqui. E o espaço aqui.

259

Tá?

260

Então, a gente tem dois levels...

261

O primeiro level, e o segundo level.

262

Construídos de formas diferentes.

263

Lembra que quando eu estou fazendo isso aqui, eu estou olhando de cima, né?

264

Uma planta baixa.

265

A gente tem dois levels, criados de formas diferentes.

266

Então, pense em algum jogo...

267

Por exemplo, Spelunky.

268

Onde os levels são criados em bloquinhos.

269

Respeitando determinadas regras, né? E aí, de acordo...

270

Com o level em que o jogador estiver.

271

Se ele reiniciar o level, ele pode ter um level completamente diferente.

272

Que segue algumas regras...

273

De construção.

274

A gente não vai ver Procedural.

275

Tá? Isso aqui é um...

276

Um assunto já, mais avançado.

277

A gente vai construir o nosso cenário.

278

Do modo aí, digamos...

279

Mais antigo e estático.

280

Então, falando de Level Modular...

281

Eu vou começar a colocar os meus bloquinhos aqui.

282

Né?

283

Eu vou fazer um quadrado.

284

Simples.

285

Deixa eu só tirar esse preenchimento.

286

Tira o preenchimento e coloca um stroke, que é uma linha.

287

Tá muito grossa essa linha aqui. Eu vou colocar...

288

Três.

289

Então, eu já vou colocar um bloquinho aqui, ó. A minha área central...

290

Deixa eu só colocar esse cara um pouquinho mais...

291

Um pouquinho mais transparente.

292

Então, eu vou começar com um bloquinho na área central.

293

E agora, eu vou colocar um corredor.

294

Para o começo.

295

Então, eu já sei, mais ou menos, quantos bloquinhos eu vou ter.

296

1, 2, 3, bloquinhos.

297

Tá?

298

De piso. E depois, pra cima, mais alguns.

299

2...

300

3.

301

Para o lado.

302

1...

303

2 e 3.

304

Para o outro lado, 1...

305

2 e 3.

306

Então, eu fiz algo simétrico aqui, né?

307

E a partir daqui, eu posso começar a criar algumas estruturas.

308

Então, por exemplo, eu preciso fazer esse caminho...

309

Já consigo fazer alguma coisa um pouquinho mais pensada.

310

Já sei que eu posso fazer, por exemplo, um caminho mais estreito.

311

Então, eu faço um bloco...

312

Metade do tamanho, né?

313

Eu faço o caminho aqui.

314

E construo o bloco.

315

Enfim, eu monto a minha estrutura dos blocos, aqui.

316

De forma Modular.

317

E crio o meu cenário.

318

Eu quero mostrar para vocês como ficou o layout do The Grid.

319

Que eu fiz no papel.

320

Não foi...

321

Rápido, igual eu fiz aqui.

322

"Ah, em um minuto a gente faz." Não.

323

A gente fica rabiscando uma ideia e vai tendo as ideias. Apaga com a borracha...

324

Coloca mais algumas ideias.

325

Passa para o computador.

326

E vai digerindo essas ideias. Então, as vezes você pode ficar...

327

Né? Igual eu fiquei, mais ou menos um dia, fazendo.

328

Mas, você pode ficar...

329

Criando o teu layout por dias e semanas, né?

330

Até você criar...

331

O Level Design que você quer.

332

Então, aqui eu tenho o layout do meu cenário do The Grid.

333

Tá?

334

Eu peguei, rotacionei isso tudo e coloquei como uma perspectiva.

335

Então, vejam os bloquinhos aqui. Os Grids, né?

336

Onde eu já coloquei, separados.

337

E já coloquei algumas indicações de onde vão estar as chaves.

338

Então, o jogador vai começar aqui no começo. No primeiro bloquinho.

339

Ele anda para a frente. É o único caminho que ele vai ter.

340

Isso tudo é uma... É uma...

341

É uma forma de pensar o teu Level Design, tá? Então, o jogador começa aqui.

342

Ele tem que andar para a frente.

343

E logo aqui na área central, que é a área mais importante. Até, eu marquei com uma outra cor.

344

É a área onde vai ter...

345

O portal, né? Onde o jogador precisa trazer as chaves.

346

Então, ele tem três caminhos para tomar. O primeiro caminho...

347

Ele pode vir por aqui.

348

Ele pode vir por aqui.

349

Ou ele pode vir por aqui.

350

E nenhum dos caminhos é obrigatório. Ele pode fazer na ordem que ele quiser.

351

Então, por exemplo, se ele vier para o caminho da esquerda, ele vai encontrar toda essa...

352

Essa área aqui.

353

Que vai ter vários inimigos.

354

Né? Eu não marquei eles aqui.

355

Ele precisa...

356

Andar nesse caminho.

357

Até chegar na chave rosa.

358

Assim que ele coletar, então, ele precisa voltar...

359

Para a área central.

360

Maravilha?

361

Mesma coisa se ele entrar para o caminho da direita.

362

Então, aqui nesse caminho da direita...

363

Ele vai encontrar algumas plataformas móveis. E eu marquei mais ou menos...

364

A forma como eu quero que elas sejam, tá?

365

Isso aqui, depois a gente pode mudar, conforme a gente vai posicionando na Unreal.

366

E sentindo o Gameplay, a gente pode mudar essas coisas.

367

Mas, eu já coloquei, por exemplo, algumas plataformas. Eu tenho essa plataforma...

368

Amarela, que eu pintei.

369

Então, ela vai para cima e para baixo.

370

Tá?

371

Então, o jogador tem que subir aqui.

372

E essa outra plataforma amarela também, ela vai para...

373

Para cá e para cá. Para frente e para trás, né?

374

Então, o jogador sobe aqui, entra na plataforma amarela...

375

Ele move até aqui...

376

Entra nessa plataforma. Ele desce essas escadinhas.

377

E depois ele precisa pular nas plataformas que estão por aqui.

378

Até chegar na chave verde.

379

Depois que ele pegou a chave verde, ele tem que retornar o caminho...

380

E colocar lá no portal.

381

E aí, o caminho final dos portais, que eu fiz, foi o seguinte...

382

Eu pensei em fazer portais que estão flutuando.

383

Ao lado do caminho aqui.

384

Então, o jogador vem para cá. Tem esse portal 1, né?

385

Ele fica disparando, como se fosse uma luz aqui.

386

E, se o jogador encostar nessa luz...

387

Ele vai ser teletransportado de volta para o 1. Então, o 1...

388

Ele volta para o 1.

389

Então, se eu andar para cá...

390

Encostar no 1, eu volto para o 1.

391

Então, não vai ter muita...

392

Lógica ficar nesse 1. Então, o jogador vai ser forçado...

393

A desviar dessa luz.

394

E ir para a frente. Se ele encostar no 2...

395

Aqui na luz 2, ele volta para o 2.

396

E aí, se ele encostar na 1, ele volta para o 1 de novo.

397

Então, ele fica nesse loop infinito aqui.

398

Então, ele é forçado a desviar de todo mundo.

399

E ir até o 3, lá. Que está aqui.

400

Então, essa luz 3, ele vai... Deixa eu fazer uma seta aqui.

401

Essa luz número 3...

402

Vai teletransportar o jogador para o 3. Então, ele vem para cá, ó...

403

Tá vendo?

404

Assim que ele faz isso...

405

Ele está nessa outra região. Então, ele tem um portal...

406

Esse primeiro portal, que é o 2. Que vai teletransportar ele para o 2.

407

E aí, no caso, ele vai voltar para cá. Não é muito lucro para ele, né?

408

E tem o 4, que vai teletransportar ele para a área 4, que está aqui.

409

Certo?

410

E aí, enfim a gente vai ter o último portal. Que, esse aqui, é o correto.

411

Que vai teletransportar ele para a área número 5.

412

E aqui na última área, ele vai ter o...

413

O teletransporte 1.

414

Que vai teletransportar ele para a área número 1.

415

Onde ele retorna para o início, mas agora com a chave na mão.

416

Para colocar aqui...

417

No portal, na área central. Certo?

418

Todos esses layouts que eu fiz aqui, a gente pode alterar.

419

Conforme o Play Test, né? Conforme a gente for jogando.

420

A gente vai percebendo algumas coisas. Então, por exemplo...

421

Tem esse 1 solto. Esse 3 solto aqui. Eu deixei de propósito...

422

Para mostrar que isso aqui eu alterei depois. Eu acabei tirando.

423

Tinha portais aqui e eu acabei tirando.

424

Tá?

425

Isso aqui a gente vai trocando depois, tá?

426

Mas, façam o layout de vocês.

427

Se vocês quiserem seguir o meu layout, tranquilo.

428

Mas, eu gostaria, na verdade, para que a gente possa aprender...

429

Na verdade, a gente está fazendo essa...

430

Esse curso para aprender, né?

431

Então, eu peço...

432

E sugiro que vocês façam o layout também.

433

Tá?

434

Eu vou deixar a imagem desse layout disponível.

435

Aqui é um rabisco primeiro, que eu tinha feito. Para depois se tornar...

436

Aquele layout final.

437

Eu vou deixar ele disponível, mas eu sugiro que vocês façam, nem que seja no papel.

438

Para vocês treinarem também, a...

439

A questão do Level Design, tá?

440

E aí, a partir desse layout, a gente vai levar para a Unreal e começar a...

441

Fazer esse mapa lá, né?

442

Antes de a gente pensar em criar Assets em um programa 3D...

443

Antes de a gente pensar...

444

Em criar jogador, lógica, enfim... Tudo isso.

445

A gente vai fazer a blocagem do Level.

446

Pra gente poder ter a sensação dessa escala no jogo, tá?

447

Aqui eu já posso adiantar para vocês...

448

Cada um desses blocos, eu acho que tem...

449

10 metros.

450

Poxa, eu não vou lembrar agora, tá?

451

Mas, a gente tem que também ter uma ideia de escala.

452

No geral, né?

453

Porque o jogador vai ter que ter uma distância para ele...

454

Para ele percorrer. A gente tem que saber.

455

Se não está muito longe as coisas, né? Ou, se elas estão muito grandes.

456

Mas, a gente vai definir essa escala, também, lá dentro da Unreal.

457

Tá?

458

Então, o próximo processo que a gente vai fazer é a blocagem desse level aí.

459

Tá?

460

Assim que o layout estiver definido.

461

Então, você pode utilizar o meu layout.

462

E seguir exatamente a mesma etapa, mas você pode, também, fazer alterações.

463

"Ah, não quero um caminho assim. Quero um caminho em espiral, enfim..."

464

Então vocês podem também fazer os seus próprios cenários, ou utilizar aqui o meu layout tá?

465

Próxima aula, então... Blocagem do Level.