Unity parte 1: criação de um jogo de sobrevivência à zumbis para Web

Cenário e Personagem Jogador - Introdução

Olá, pessoal! Tudo bom?

Meu nome é Henrique Morato. Sejam bem-vindos ao curso de criação de jogos com Unity, que é um motor de jogo (game engine, em inglês) e funciona basicamente como um programa que facilita o desenvolvimento de jogos. Inclusive, nele foram criados alguns que vocês devem conhecer, como:

• Super Hot;
• Subway Surfers;
• Broforce;
• Rust;
• Hearthstone.

O jogo que criaremos é de sobrevivência ao apocalipse zumbi. Teremos uma heroína, que se defenderá de ataques zumbis atirando neles. Se eles encostarem nela, a partida é encerrada por meio do famoso Game Over, mas poderemos clicar na tela para iniciar uma nova partida.

O desenvolvimento do projeto partirá do princípio de que já temos todas as artes que serão utilizadas e, a partir delas:

• montaremos o cenário, posicionando objetos;
• colocaremos a heroína no jogo, fazendo com que ela atire e se movimente;
• criaremos códigos para passar comportamentos ao jogo, utilizando a linguagem C#.

Estudaremos diversos aspectos da produção de um jogo. Ao final, o resultado será um jogo que colocaremos no browser, ou seja, na internet para que o link seja acessível a qualquer um, de forma que todos possam jogar online, sem precisar ter a Unity instalada. É bem bacana!

Mais uma vez, bem-vindos! Espero que gostem do curso!

Cenário e Personagem Jogador - Criando o cenário

Com a Unity instalada no computador, criaremos um projeto, que é basicamente uma pasta na qual guardaremos tudo que utilizarmos para desenvolver o jogo.

Para criar um projeto no Unity, clicaremos na aba "Projects" e, em seguida, no botão "New", à direita da tela. Carregará uma página de configuração, na qual:

• digitaremos o nome do projeto em "Project name";
• especificaremos onde salvaremos em "Location";
• determinaremos se o jogo será 3D ou 2D, no caso do que estamos desenvolvendo, será 3D.

Essa é uma prévia de como iniciarmos um projeto no programa. Mas, antes de continuar, clicando em "Create projects", cancelaremos para falar sobre o processo de criação, pois temos que considerar alguns passos que precedem a criação do projeto.

Hipoteticamente, fomos contratados para criar um jogo e temos a arte dele criada e enviada por um artista, que está salva em uma pasta. Para utilizá-la abriremos o local em que ela está clicando em "Open", à direita de "New".

Na sequência, selecionaremos a pasta do projeto e clicaremos em "Selecionar pasta" para carregá-la.

Dessa forma, teremos todos os arquivos do projeto no programa. Nele, vemos "Project" com as pastas em "Assets", na parte inferior.

Clicaremos duas vezes na pasta "Modelos 3D". Nela encontraremos mais pastas. Clicaremos em "Contrucoes", na qual estão diversas miniaturas de itens que podemos utilizar. Para visualizar o conteúdo dos itens, podemos utilizar as miniaturas, mas para acompanhar melhor quais estão sendo utilizadas enquanto desenvolvemos, podemos deslizar a barra no canto inferior direito para a esquerda.

Assim, os ícones ficarão organizados em lista, facilitando a leitura do nome dos arquivos.

Se clicarmos nos objetos, à direita abrirá a visualização deles em 3D. Podemos aumentar o tamanho da janela caso esteja pequena:

• posicionando o cursor na borda;
• clicando no desenho de ajuste (uma flecha com setas para cima e para baixo);
• arrastando para cima.

Na visualização, podemos clicar no objeto e rotacioná-lo para ver todos os lados dele.

Temos diversos objetos, mas nenhum está no jogo. Começaremos a inseri-los, seguindo a lógica de que os personagens terão que andar. Assim, adicionaremos um chão para que eles andem em cima. Iremos para a parte da lista que contém "Hotel_Estacionamento_Destruido". Ao clicarmos, na visualização teremos o chão de um estacionamento de hotel.

Se rotacionarmos, veremos que a parte de baixo do chão é invisível, o que não é um problema, considerando que o jogo é visto de cima. Continuando, para inserir o chão no jogo, clicaremos e arrastaremos o objeto para a parte superior esquerda do programa, identificada como "Hierarchy" ("Hierarquia" em português). Na janela superior esquerda do programa, encontramos a aba "Scene", na qual temos a visualização do chão.

"Scene" ou "Cena" é o local em que montaremos as fases do jogo. Nela, colocaremos e organizaremos os objetos. A "Hierarquia" é a listagem dos objetos utilizados em "Cena". Enquanto no projeto temos todos os objetos disponíveis para utilização, em "Hierarquia", estarão somente aqueles que estamos utilizando. Nela, veremos "Main Camera" e "Directional Light", que são padrões da Unity e estarão no topo da lista, sempre que iniciarmos uma fase nova.

Aproveitando que enviamos um objeto com tema de hotel, adicionaremos também "Hotel_Destruido" e "Hotel_Secundario_Destruido", da mesma forma que fizemos com "Hotel_Estacionamento_Destruido".

Em "Scene", veremos que o posicionamento está incoerente. O hotel está na frente do chão, que está no fundo. Precisamos posicioná-lo em cima do chão. Para ativar a opção de movimentar o objeto, teclaremos a letra "W". Aparecerão três setas no objeto selecionado.É possível que algumas estejam ocultas, para visualizar todas, podemos clicar com o botão do meio do mouse e arrastar o objeto até conseguir ver todas.

Caso não utilizem o mouse, é possível arrastar o objeto selecionando a ferramenta identificada com uma mão no canto superior esquerdo da tela e, então, clicando com o botão esquerdo em cima do objeto que desejamos movimentar, podemos posicioná-lo onde quisermos.

Selecionaremos "Hotel_Destruido" em "Hierarchy" e teclaremos "W" para movimentá-lo na Unity. Podemos movê-lo tridimensionalmente, ou seja, em três eixos:

• x, da direita para esquerda e vice-versa;
• z, para frente e para trás;
• y, para baixo e para cima, no qual não mexeremos no momento, pois deixaremos o objeto no chão.

Continuando o posicionamento dos objetos, clicaremos na seta do eixo z, e movimentaremos "Hotel_Destruido" para o fundo do chão. Na sequência, moveremos "Hotel_Secundario_Destruido", teclando "W". Posicionaremos ele próximo a "Hotel_Destruido", obtendo a seguinte imagem:

Podemos rotacionar "Scene", para conferir se o "Hotel_Destruido" está alinhado ao fundo do chão:

• teclando "Alt";
• clicando com o botão esquerdo do mouse;
• arrastando "Scene" ao mesmo tempo.

Veremos que o limite do cenário foi ultrapassado. Assim, para que ele fique dentro da área de "Hotel_Estacionamento_Destruido", clicaremos na seta do:

• eixo z e puxaremos o objeto para frente;
• eixo x, movimentando-o para a esquerda da tela.

Teclaremos "Alt" novamente e rotacionaremos a "Cena" para visualizar a frente dela.

Em seguida, encaixaremos "Hotel_Secundario_Destruido" na área retangular à esquerda de "Hotel_Destruido". Notem que teremos que rotacioná-lo, considerando que ele está desalinhado em relação ao chão. Para rotacionar o objeto, teclaremos "E", ativando a ferramenta de rotação, que também pode ser acionada no canto superior esquerdo da tela, clicando no terceiro botão da esquerda para a direita, indicado com um desenho de duas flechas em rotação.

Após ativar a ferramenta de rotação, devemos selecionar um eixo para evitar que a rotação seja aleatória. Há três linhas coloridas nas quais podemos clicar para selecionar o eixo:

• a azul, referente ao eixo z, para rotacionar para cima e para baixo;
• a vermelha, referente ao eixo x, para rotacionar para a direita ou para a esquerda;
• a verde, referente ao eixo y, para rotacionar de acordo com as laterais do objeto.

No caso, clicaremos em cima da linha verde, para encaixar "Hotel_Secundario_Destruido" na área retangular que planejamos, após teclar "W".

Para ajustá-lo perfeitamente à área de encaixe, utilizaremos os múltiplos de 90ᴼ. Ou seja, rotacionaremos de 90 em 90 graus. Dessa forma, o objeto sempre ficará alinhado. Faremos isso na janela à direita do programa, identificada como "Inspector". Nela, vemos que "Rotation Y" está quase em 90ᴼ (Y-90.181). Deletaremos a parte decimal (.181), deixando somente -90 e teclaremos "Enter". Faremos os últimos ajustes, movimentando com o atalho da tecla "W" até deixá-lo perfeitamente alinhado ao chão.

Agora, sabemos selecionar, inserir e movimentar os objetos. Salvaremos o que fizemos para conseguir utilizar depois, por meio do atalho "Ctrl + S" ou "Command + S", dependendo do sistema operacional ou clicando em "File > Save Scenes".

Nomearemos a fase como game e teclaremos "Enter". Se olharmos a parte inferior esquerda do programa, veremos que ela estará salva em "Project", na pasta "Assets".

Se quisermos criar uma fase nova, podemos clicar em "File > New Scene". Para voltar a visualizar game.unity, basta clicarmos no arquivo, em "Assets", na parte inferior do programa.

Pronto. Iniciamos uma fase do jogo. Toda vez que precisarmos salvá-la, podemos utilizar o atalho "Ctrl + S" ou "Command + S". É muito importante salvar as alterações para não perdê-las, caso o programa feche sozinho ou algum imprevisto aconteça.

A Unity fornece outras ferramentas de navegação que estarão nos exercícios para vocês olharem, em um texto que explica como navegar com outras opções. Mas, as mais comuns são essas que vimos:

• "Alt + arrastar com o mouse" para rotacionar a "Cena";
• clique com botão do meio do mouse para arrastar a "Cena";
• clique com botão direito ou rodar o botão do meio do mouse para aplicar Zoom.

Cenário e Personagem Jogador - Colocando cor no cenário

Anteriormente, posicionamos o chão ("Hotel_Estacionamento_Destruido") e dois objetos ("Hotel_Destruido" e "Hotel_Secundario_Destruido") no cenário.

Notem que a janela de "Cena" — uma das mais importantes, considerando que montaremos as fases do jogo nela, adicionando objetos e personagens — é menor que a de "Project", que está abaixo dela.

Ajustaremos os tamanhos das janelas, dando mais ênfase à de "Cena". Para isso, podemos clicar em cima da aba em que está escrito "Scene" e arrastá-la, inclusive para o campo da aba "Project". Mas a Unity disponibiliza algumas disposições prontas, que estão em "Default" no canto superior direito da tela, no qual selecionaremos a opção "Tall".

A visualização das janelas ficará da seguinte forma:

A opção "Tall" é boa, pois:

• "Scene" ganha destaque, à esquerda;
• "Hierarchy", "Project" e "Inspector" ficam próximos, à direita da tela, facilitando a transição de arquivos entre eles.

Mas, podemos explorar outras opções de disposição e trabalhar com a que considerarmos melhor. Além de "Tall" e "Default", há:

• "2 by 3";
• "4 split";
• "Wide".

Selecionada a melhor disposição, adicionaremos cores ao cenário, utilizando duas ferramentas:

• material, para determinar como o objeto se comportará com a luz (fosco, reflexível);
• textura, referente à cor.

A imagem abaixo exemplifica a influência do material. Na primeira imagem de cima para baixo, está o exemplo de um material fosco, que reflete pouco. No meio, está um de reflexo intermediário. A última imagem é de um material que reflete bastante, semelhante a um metal.

Começaremos selecionando o material na janela de "Project", clicando em "Assets > Clique com botão direito na visualização de Assets > Create > Material" ou clicando diretamente em "Creat", abaixo da identificação de "Project".

Será adicionado um material, que nomearemos como "MaterialCenario". O ícone de material é uma esfera, localizada à esquerda do nome. Se necessária a confirmação de que é mesmo um material, basta clicar em cima do arquivo e conferir na barra abaixo, na qual estará o nome com a extensão .mat, de material.

Em "Inspector", podemos editá-lo, inclusive adicionando cores. Para isso, utilizaremos uma das primeiras opções "Albedo". Nela, clicaremos na bolinha à esquerda do nome da opção, abrindo assim, uma janela de seleção de textura. Selecionaremos uma das primeiras, "Cenario".

Se clicarmos no quadrado à esquerda de "Albedo", teremos a visualização na janela ("MaterialCenario") que está minimizada na base de "Inspector". Para visualizá-la, teremos que expandi-la, clicando e arrastando. Dessa forma, veremos a seguinte imagem:

Ela faz parte do material que um artista desenvolveu e nos enviou, e o guardamos em "Project > Texturas > Cenario".

Hipoteticamente, somos aqueles que mexem na engine, dentro da Unity. Fora disso, há um artista que desenvolveu esses objetos para nós e, junto a eles, nos enviou as texturas. Se quiserem saber mais sobre como criar objetos e texturas, na Alura há cursos de Modelagem 3D para jogos e Texturização.

No caso, estamos utilizando uma textura que servirá para o cenário todo. Para inseri-la na fase do jogo, clicaremos nela em "Assets" e a arrastaremos para os objetos para "Scene", começando pelo chão.

As cores do asfalto e dos elementos que o compõe foram pré determinadas pelo artista, fora da Unity. Na sequência, arrastaremos "MaterialCenario" para "Hotel_Destruido" e "Hotel_Secundario_Destruido".

Pronto, adicionamos cores arrastando "Material" para os objetos, lembrando que podemos clicar com o botão do meio do mouse e arrastar o cenário e visualizá-lo melhor. Se aplicarmos "Zoom", veremos que há objetos brancos ainda.

Arrastaremos "MaterialCenario" para colori-los também. Para saber se o objeto foi colorido ou não, em "Hierarchy", podemos clicar nele e abri-lo, clicando na seta que está à esquerda do nome. Em "Hotel_Destruido", por exemplo, há dois objetos: "SA_Bld_Motel_Damaged_Extras_01" e "SA_Bld_Motel_Damaged_Growth_01". À direita, em "Inpector", vemos que "Hotel_Destruido" está com "MaterialCenario".

Já o objeto "SA_Bld_Motel_Damaged_Extras_01" está com o material padrão ("Default-Material"), ou seja, precisamos arrastar "MaterialCenario" para ele.

Como é difícil localizá-lo em "Cena", faremos a transferência de "Assets" para "Hierarchy" para aplicar o material nos dois objetos ("SA_Bld_Motel_SideBuilding_Extras_01" e "SA_Bld_Motel_SideBuilding_Growth_01") que faltam em "Hotel_Secundario_Destruido", considerando que essa forma é mais prática. Assim, garantimos que o material foi adicionado, mesmo sem localizar o objeto no cenário. Agora, a fase está colorido.

Na sequência, adicionaremos uma entrada para o estacionamento, repetindo o processo que aplicamos nos outros objetos:

• localizar o objeto na pasta "Modelos 3D";
• selecionar e arrastar a entrada para o cenário;
• arrastar "MaterialCenario" para colori-lo;
• posicionar o objeto.

Após aplicar as configurações nos objetos, podemos salvá-las, criando objetos pré fabricados e utilizá-los em diversos lugares com a cor já anexada. Para isso, clicaremos no objeto em "Hierarchy" e o arrastaremos para "Assets". Na visualização à esquerda, veremos "Hotel_Destruido", que antes estava sem cor, já colorido, por exemplo.

Da mesma forma que conferimos que "MaterialCenario" era um material, se olharmos a barra inferior de "Assets", veremos que "Hotel_Destruido" está com a extensão .prefab, ou seja, pré fabricado.

Se necessário, podemos duplicar os objetos já configurados, clicando e arrastando-os para "Hierarchy". Para criarmos mais objetos pré fabricados, arrastaremos "Hotel_Estacionamento_Destruido" e "Hotel_Secundario_Destruido" de "Hierarchy" para "Assets".

Tirando os três que acabamos de criar, temos os objetos organizados e pré fabricados para esse curso, na pasta "Prefabs". Então, sempre que precisarmos arrastar objetos de "Assets" para "Hierarchy", podemos pegá-los diretamente da pasta "Prefabs", na qual já estarão com "MaterialCenario" anexado.

Organizaremos os arquivos da mesma forma que estão organizados na pasta "Modelos 3D", movendo os três objetos que configuramos:

• clicando no primeiro e, pressionando "Shift", o último;
• arrastando-os para a pasta de "Contrucoes", em "Prefabs".

Se abrirmos os arquivos dessa pasta, veremos que estão todos coloridos. Assim, sempre que precisarmos, arrastaremos os objetos de "Prefab" para "Cena". Para adicionar uma entrada ao estacionamento, por exemplo, em "Prefab":

• abriremos a pasta "Ambiente";
• selecionaremos "Rua_Canto";
• arrastaremos para "Hierarchy";
• teclaremos "W" para movimentá-la.

Precisamos encaixar o quadrado branco nos outros quadrados brancos do chão, ou seja, precisamos rotacionar o objeto. Então, teclaremos "E", selecionaremos a linha do círculo verde e giraremos até que os quadrados brancos se encaixem.

Em "Inspector", arrendondaremos "Rotation Y", de -182.80 para -180, para que fique perfeitamente alinhado. Teclaremos "W" novamente para movimentá-la e encaixá-la. Mas, se aplicarmos "Zoom", veremos que eles não estão colados um no outro.

Em alguns jogos, acontece de cair fora do mundo ou da fase, representada pelo fundo marrom, abaixo dos objetos, no entanto isso deve ser evitado. Para juntá-los perfeitamente sem aplicar "Zoom" e mover milimetricamente, podemos:

• teclar "W" para ativar a ferramenta de movimento;
• pressionar a tecla "V" ao mesmo tempo para pegar os vértices do objeto;
• selecionar um dos pontos do vértice;
• clicar, enquanto pressiona a tecla "V", e arrastar para o ponto de um outro objeto.

Dessa forma, os objetos colarão um no outro, perfeitamente. Se aplicarmos "Zoom", veremos que não há mais um vão entre eles.

Para acrescentar "Rua_Canto" do outro lado, basta duplicarmos o que acabamos de ajustar, por meio do atalho "Ctrl + D" ou "Command + D" no Mac. Assim:

• executando o atalho "Ctrl + D";
• teclaremos "W" para mover;
• ao arrastar o objeto, veremos que estamos movendo a cópia dele;
• moveremos até a posição desejada;
• teclaremos "E";
• rotacionaremos com a linha verde selecionada;
• arrendondaremos o valor para 270 em "Rotation Y", em "Inspector";
• teclaremos "W" novamente, junto a "V", para ativar a seleção de vértice e juntaremos à "Rua_Canto" que adicionamos anteriormente.

Pronto. Montamos o estacionamento com cor e entrada.

Sobre o curso Unity parte 1: criação de um jogo de sobrevivência à zumbis para Web

O curso Unity parte 1: criação de um jogo de sobrevivência à zumbis para Web possui 264 minutos de vídeos, em um total de 71 atividades. Gostou? Conheça nossos outros cursos de Jogos em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o Unity
• Modelos 3D
• Movimentação
• Colisão e Física
• Lógica de Jogo e Programação
• Programação para jogos
• Exportação do Jogo