Unity 2D parte 1: criando um jogo 2D

Movimento do avião - Introdução

Olá, tudo bem? Sou Ricardo Bugan e serei seu instrutor.

Neste curso, criaremos o jogo "Desafio nas Alturas", inspirado pelo clássico FlapBird. Para tanto, usaremos o Unity, uma game engine , ou seja, um pacote de ferramentas que possibilita a criação de jogos: teremos sistema de animação, áudio, input, criação de scripts e utilizaremos todos esses recursos em nosso projeto.

O resultado final é este: um avião azul que é o tempo todo impulsionado pela gravidade para baixo, e utilizamos o mouse para controlá-lo e passar por obstáculos acumulando pontos, que são exibidos na parte superior da tela. Quando morremos, é exibida a mensagem "Game Over", desse modo clicamos na tela e o jogo é reiniciado com a pontuação zerada.

Trata-se de um jogo infinito, os obstáculos nunca cessarão de aparecer na tela, então a paisagem também deve acompanhar essa infinitude. Criaremos o efeito parallax , isto é, o componente que está mais perto da tela se move mais rapido que o fundo, criando um efeito de profundidade visual.

Criaremos o jogo integralmente utilizando o Unity! vamos lá?

Movimento do avião - Criando o cenário

Com a Unity aberta, criaremos nosso projeto "Desafio nas Alturas". Clicaremos sobre o ícone "New", e acessaremos a configuração do projeto. Primeiramente, o nome do projeto que já sabemos. Em seginda clicaremos sobre a opção "2D", já que nosso jogo terá apenas duas dimensões. Por fim, no campo "Location" definimos o local em que será salvo o projeto. Já podemos continuar clicando em "Crate Project".

Todos os arquivos padrão serão criados e podemos começar a trabalhar na área principal da Unity, mas por onde começar a montagem do game? Sabemos que nosso game será composto por uma série de imagens criadas por artistas, como cenário, o avião e outros elementos da animação. Estes arquivos foram disponibilizados para você, mas precisam ser trazido para dentro do ambiente Unity.

Ao abrirmos a pasta que contem os elementos visuais que usaremos no game, selecionaremos todos eles e os arrastaremos para a pasta "Assets" no ambiente Unity, que se localiza na parte inferior da tela. Tradicionalmente, quando trabalhos com projetos mobile, web ou desenvolvimento de jogos, todos os arquivos que compõe o projeto são chamados de assets, como as imagens, fontes, som e scripts.

Para melhorar ainda mais a organização dos elementos visuais, criaremos uma nova pasta dentro de "Assets" - basta clicar sobre a área com o botão direito e selecionar "Create > Folder" - que chamaremos de "Imagens", arrastaremos todos as arquivos para dentro dela.

Para trabalharmos com as imagens, clicaremos sobre a aba "Scene", na parte superior da tela. Esta é de fato a cena do jogo, onde editaremos os elementos. Com a rolagem do mouse conseguimos ampliar ou reduzir o zoom.

Primeiramente arrastaremos para a cena o fundo do nosso jogo, isto é, a imagem azulada das montanhas distantes. Na parte esquerda da tela, em "Hierarchy", conseguimos visualizar perfeitamente todos os objetos que estão dentro da cena.

Montaremos nossa cena elemento por elemento: após inserir o fundo, colocaremos o chão de terra, em seguida o avião e posicioná-los da melhor forma. Aumentaremos o zoom para termos uma visão mais clara. Para verificarmos como o game aparece para o jogador, clicamos sobre o botão "Play" logo acima da área da cena, e assim entraremos no modo de teste do game.

Á área total de visualização do jogo é definida pela cor azul, as laterais pretas não fazem parte da cena do jogo. Ainda não animamos nenhum dos elementos, mas já podemos perceber que o fundo está pequeno, bem como o chão e o avião se quer aparece. Isso nos lança uma pergunta: como a Unity sabe onde as imagens estão com relação a cena total do jogo? Por que os elementos estão posicIonados no canto infeiror esquerdo, por exemplo?

Sairemos do modo de teste para entendermos melhor como esse processo funciona. Na área de trabalho de cena, teremos um ícone de câmera na parte superior direita. Ao clicarmos nesse ícone, teremos um pequeno preview de teste, essa é a nossa câmera principal (Main Camera), e ela também pode ser visualizada na na área de hierarquia do Unity. Essa câmara funciona exatamente como no cinema: o diretor posiciona o equipamento de forma que o quadro englobe aquilo que deve ser exibido para o espectador, o mesmo ocorre com o nosso jogo. Se estamos posicionando algo fora do enquadramento da câmera, ele não será exibido. O quadro é demarcado pelo contorno branco, e percebemos que parte da nossa cena está fora do enquadramento, por isso o avião não é visível no teste.

Posicionaremos nosso cenário ao centro do quadro, em seguida ajustaremos sua escala clicando sobre o ícone "Scale Tool" no painel de ferramentas. Agora todos os elementos estão visíveis no modo teste.

Se quisermos reposicionar algum elemento individualmente - como o chão, por exemplo - pasta selecioná-lo na área da hierarquia juntamente com a ferramenta de movimentação, também localizada na parte superior da tela.

Agora temos a cena pronta, mas ainda totalmente estática, precisamos adicionar os movimentos e tornar esse conjunto de elementos um game dinâmico. Uma das ações que teremos em jogo é a queda do avião, na verdade há sempre uma força que puxa o avião para baixo, e cabe ao jogador controlar esse queda por meio do mouse, clicando com o botão direito para gerar um impulso que impeça que o avião caia no chão.

Precisamos adicionar esse comportamento ao avião. Na área de hierarquia, selecionaremos "aviao1" e clicaremos sobre a aba "Inspetor" na parte direita da tela. Essa aba contém todas as propriedades e componentes da Unity sobre um objeto específico, no caso, "aviao1".

Para adicionarmos um novo comportamento em "aviao1", precisamos criar um componente. Clicaremos no botão "Add Component" e selecionaremos a opção "Physics 2D > Rigidbody 2D". "Rigidbody 2D" é o componente da Unity que faz um elemento responder à gravidade.

Agora, em modo de teste, o nosso avião cairá, como sobre o efeito da gravidade.

Movimento do avião - Adicionando Colisores

Agora que já temos nosso avião respondendo à física, mais especificamente à gravidade. Mas, ao observarmos o comportamento do avião, notaremos que ele simplesmente atravessa o chão, enquanto deveria colidir com ele.

Quando criamos o "Rigidbody 2D", não dinifimos um colisor em relação ao avião. Usaremo um novo componente da Unity responsável por gerenciar todas as colisões que ocorrem na cena. Ainda com "aviao1" selecionado, iremos até a aba "Ipsector" e clicaremos sobre o botão "Add Component" e selecionaremos as opções "Physics 2D > Circle Colider".

Existem vários tipos de colisores que variam basicamente de acordo com seu formato, no caso do avião escolhemos um formato circular. Ao acionarmos o zoom na cena, veremos que uma linha verde envolve o avião que indica a área de colisão do objeto no mundo do game.

Precisaremos adicionar um colisor também no chão, então na área de hierarquia selecionaremos "chao", e na aba "Inspetor" selecionaremos "Add Component > Physics 2D > Box Collider" . Uma linha verde envolverá o chão, assim como no avião.

Feito isso, ao visualizarmos a cena no modo teste, veremos que o avião caí e é retido pelo chão, e não mais o atravessa.

Porém, ainda temos um pequeno problema: o área de colisão do chão não acompanha as reetrâncias do relevo, criando um efeito pouco realista quando o avião colide com o box.

Ao invés de inserirmos um "Box Colider", iremos utilizar um recurso mais refinado que acompanhe os desenhos do relevo. Primeiramente, precisaremos deletar o box que criamos anteriormente. Com o elemento "chao" selecionado, na aba "Ispector" clicaremos sobre o ícone de engrenagem e selecionaremos a opção "Remove Component".

Com o recurso removido, clicaremos novamente sobre "Add Component" e escolheremos a opção "Physics 2D > Polygon Colider 2D". Este novo colisor tentará se aproximar o máximo possível do desenho da imagem.

Dessa forma, no modo teste, perceberemos que o avião colide de forma muito mais realista com o chão, e se aproximando da área com reentrâncias.

Criamos o efeito da gravidade e refinamos a colisão do avião, nas próximas aulas aprenderemos a criar o impulso que o mantém no ar.

Sobre o curso Unity 2D parte 1: criando um jogo 2D

O curso Unity 2D parte 1: criando um jogo 2D possui 190 minutos de vídeos, em um total de 55 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:

• Controles e Movimentação
• Gerando desafios
• Visual
• Game Over
• Pontuação e áudio