Primeiras aulas do curso Unity parte 1: Criação de um jogo de sobrevivência à zumbis para Web

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:

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:

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:

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".

Tela inicial Unity

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

Selecionar pasta

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.

Modo exibição

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

Modo lista

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

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

Visualizacao objeto 3d

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.

Chao estacionamento 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.

Setas objeto

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.

Ferramenta arrastar

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

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:

Hoteis posicionados

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

Visualizacao fundo

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:

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.

Movimento Hotel Secundario

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:

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

Linhas

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.

Hotel Secundario Alinhado

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".

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.

File New Scenes

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:

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.

Proporcao janela scene

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".

Default tall

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

Disposicao tall

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

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

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

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.

Material 1

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".

Selecao Material

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.

Identificacao 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".

Inspector Material

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:

MaterialCenario

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

Textura 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.

Chao colorido

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".

Cenario colorido

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.

Objetos brancos

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".

Inspector 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.

Inspector MaterialCenario

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.

Cenario colorido

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

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.

Objeto Pre Fabricado

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.

Extensao prefab

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:

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":

Posicao inicial rua canto

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.

Rua canto apos rotacao

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.

Zoom rua canto

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:

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

Objetos colados

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:

Cenario com entrada

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:

Aprenda Jogos acessando integralmente esse e outros cursos, comece hoje!

  • 1127 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1127 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1127 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1127 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana