Prefácio

Neste Tutorial, aprenderemos o quão fácil é fazer um jogo como Flappy Bird no Unity.

O gamedesign é muito simples: um pássaro deve voar horizontalmente entre os obstáculos, e o jogador pode pressionar um botão para fazer a aba do pássaro e voar para cima. Jogos simples como esse são sempre perfeitos para um Tutorial, tudo o que precisamos são 40 linhas de código e alguns sprites.

Como de costume, tudo será explicado o mais fácil possível para que todos possam entender.

Configuração do projeto

Vamos lá. Vamos iniciar o Unity e selecionar Novo projeto :

Vamos nomeá-lo flappybird , selecione qualquer local como C: \ , selecione 2D e clique em Criar projeto :

Se selecionarmos a Câmera Principal na Hierarquia, então podemos definir a Cor de Fundo em um azul claro (R = 198, G = 208, B = 230) para a cor do céu e ajustar o Tamanho como mostrado na seguinte imagem:

O fundo

Começaremos por desenhar um fundo de céu muito simples em nossa ferramenta de desenho de escolha:

Nota: clique com o botão direito do mouse na imagem, selecione Salvar como ... , navegue até a pasta de assets do projeto e salve-o em uma nova pasta Sprites .

Depois de salvá-lo, podemos selecionar o plano de fundo na área do projeto :

E, em seguida, modifique as Configurações de Importação no Inspetor :

Nota: um valor de Pixels por unidade de 16 significa que 16 x 16 pixels se encaixam em uma unidade no mundo do jogo. Usaremos esse valor para todas as nossas texturas, pois o Pássaro terá 16 x 16 pixels, o que deverá ser 1 unidade no mundo do jogo.

Tudo bem, então, adicione o plano de fundo ao mundo do jogo arrastando-o da Área do Projeto para a Câmera Principal na Hierarquia:

Para que o fundo se torne um filho da câmera principal :

Agora que o fundo é um filho da câmera, sempre irá onde a câmera vai.Ou, em outras palavras, o jogador sempre verá o plano de fundo.

Nota: também podemos colocar vários fundos ao lado do outro, de modo que ainda há um fundo quando a câmera se move horizontalmente, mas torná-lo um filho da câmera é muito mais fácil.

Vamos dar uma olhada no inspetor e posicionar o fundo uma unidade mais baixa em Y = -1 , apenas para que ele se ajuste ao resto do jogo mais tarde:

Se pressionarmos Play , podemos ver o céu de fundo:

Há mais um ajuste a ser feito aqui. Vamos adicionar o pássaro e alguns obstáculos em breve, então vamos também ter certeza de que o plano de fundo é realmente desenhado por trás de tudo o resto. O Unity usa as propriedades de Camada de ordenação (Sorting Layer) e Ordem em Camada (Order in Layer) do SpriteRenderer para decidir quais partes de um jogo devem estar na frente das quais outras partes.

Nós simplesmente configuraremos a Ordem em Layer para -1 para que tudo o resto seja desenhado na frente dela:

Nota: quanto maior for a ordem, mais fica em primeiro plano. Quanto menor a ordem, mais é em segundo plano.

O chão

Vamos também desenhar algum tipo de terreno para o chão. Vamos torná-lo muito largo para que haja espaço suficiente para nossos obstáculos mais tarde:

Nota: clique com o botão direito do mouse na imagem, selecione Salvar como ... e salve-o na pasta Assets/ Sprites do projeto.

Selecionaremos o terreno na Área do Projeto e depois atribuiremos as mesmas Configurações de Importação que usamos antes:

Depois, vamos arrastá-lo da Área do Projeto para a Hierarquia novamente:

Nota: desta vez, não vamos fazer uma criança da câmera.

Vejamos o inspetor e posicione o chão em X = 16 Y = -6 : de modo que esteja abaixo do plano de fundo e de modo que a maior parte da área esteja à direita da tela:

Desta vez, selecionaremos um valor de Ordem em Camada de 1 , de modo que ele sempre estará na frente do pássaro e os obstáculos mais tarde:

Física do solo

O terreno deveria ser a parte do mundo da física. No momento, é realmente apenas uma imagem no mundo do jogo, apenas um efeito visual e nada mais. Queremos que o chão seja como uma parede com a qual o pássaro pode colidir, então vamos selecionar Adicionar Componente -> Física 2D -> Box Collider 2D no Inspetor :

Normalmente, seríamos feitos agora, mas há mais um ajuste a ser feito aqui. Mais tarde, vamos adicionar obstáculos ao nosso jogo (como os tubos verdes no jogo Flappy Bird original) , e esses obstáculos se moverão para cima e para baixo no chão. Os obstáculos e o terreno serão ambos parte do mundo da física, e de acordo com as leis da física, nunca podem haver dois objetos no mesmo lugar (ou no nosso caso, dois Collisionários) .

Existem várias maneiras de contornar isso. Como de costume, escolheremos a maneira mais fácil criando uma nova camada de física que usaremos para o solo e os obstáculos. Depois, diremos à Unity que simplesmente ignore colisões entre essa camada.

Podemos criar uma nova camada selecionando Adicionar camada no inspetor :

Depois, adicionaremos uma camada de usuário , vamos chamá-la WeirdPhysics :

Agora, podemos selecionar o terreno na Hierarquia novamente e depois atribuir a camada WeirdPhysics :

Depois, selecionamos Editar -> Configurações do Projeto -> Física 2Dno menu superior e desativar as colisões WeirdPhysics vs. WeirdPhysics na Layer Collision Matrix :

Nota: é muito raro que tenhamos que fazer isso na Unity, mas o nosso jogo Flappy Bird é uma dessas exceções.

Agora, o solo nunca colidirá com nenhum dos obstáculos.

Além disso, se pressionarmos Play, então podemos ver o céu e o chão já:

O pássaro

A Imagem do Pássaro

Tudo bem, vamos até a parte mais importante do nosso jogo: o pássaro.Começaremos desenhando uma animação voadora de pássaros com 4 quadros:

Nota: clique com o botão direito do mouse na imagem, selecione Salvar como ... e salve-o na pasta Assets/ Sprites do projeto.

Usaremos as seguintes Configurações de importação para ele:

Nossa imagem de pássaro contém várias imagens menores, portanto, é importante selecionar Multiple como Sprite Mode . Posteriormente, podemos clicar no botão Sprite Editor :

No Editor de Sprite nós o dividimos como uma grade de 16 x 16 :

Depois de pressionar o botão Slice , podemos fechar o Sprite Editor. A Unity nos perguntará se queremos aplicar as Configurações de Importação Imediata , então vamos selecionar Aplicar .

Agora podemos ver nossas 4 fatias como crianças da imagem do pássarona Área do Projeto :

A animação de pássaros

Vamos selecionar todas as fatias e arrastá-las para a Hierarquia :

Unity sabe que queremos criar uma animação a partir dessas fatias, e é por isso que nos pergunta onde salvar os arquivos de animação. Vamos criar uma nova pasta BirdAnimation e depois salvar a animação como fly.anim .

Depois, podemos ver dois novos arquivos em nossa pasta BirdAnimation :

O arquivo bird_0 é a máquina de estado que cuida de estados e velocidades de animação. O segundo arquivo é a própria animação da mosca . Vamos clicar duas vezes no arquivo bird_0 muito rápido para que possamos ver a máquina de estado da animação:

Nota: não precisamos nos preocupar com os estados de animação, porque só temos uma animação.

Vamos clicar no estado de voo e, em seguida, simplesmente diminuir a velocidade para 0,5 no Inspetor :

E como só temos uma animação, já estamos aqui. Se pressionarmos Play,então podemos ver isso em ação:

Física dos pássaros

Nosso pássaro deve ser parte do mundo da física. Comecemos por dar-lhe um Collider, tal como fizemos com o chão. Vamos selecionar Adicionar Componente -> Física 2D -> Colisão de círculo 2D no Inspetor :

Agora, tudo no mundo da física que é suposto se mover também precisará de um Rigidbody . Um Rigidbody cuida de coisas como gravidade, velocidade e forças de movimento. Podemos adicionar um Rigidbody selecionando Adicionar Componente -> Física 2D -> Rigidbody 2D no Inspetor . Também habilitaremos a propriedade de ângulo fixo para que o pássaro não comece a girar de repente:

Se pressionarmos Play , já podemos ver a propriedade de gravidade do Rigidbody em ação:

O Script do Movimento de Pássaros

Nosso pássaro já parece bastante decente, mas também deve voar para a direita em todos os momentos, e deve folhear as asas para voar para cima se o usuário pressionar um botão.

Esse tipo de comportamento pode ser implementado com um Script.Vamos selecionar Adicionar Componente -> Novo Script no Inspetor , nomeie Bird e selecione CSharp como o idioma. Também criaremos uma nova pasta de Scripts em nossa Área de Projeto para que possamos inserir o Bird Script nela:

Podemos clicar duas vezes no Script para abri-lo:

Nota: a velocidade é exatamente a direção do movimento multiplicada pela velocidade de movimento.

Se salvarmos o Script e pressione Reproduzir , podemos ver como o pássaro voa para a direita da tela.

Agora criamos uma nova variável de força e, em seguida, usamos nossa função de Atualização para verificar as pressões das teclas. Se o usuário pressionou a tecla Espaço então faremos o pássaro voar para cima com a força :

Nota: Application.LoadLevel pode ser usado para carregar uma cena.Application.loadedLevel é a cena atualmente carregada. Ou, em outras palavras, simplesmente reiniciamos a cena atual.

Follow Camera

Agora a câmera nunca se move. E como o pássaro sempre voa para a direita da tela, não poderemos vê-lo por muito tempo. Vamos resolver este problema criando um novo Script que faz a câmera seguir o pássaro o tempo todo.

Vamos selecionar a Câmera Principal na Hierarquia e, em seguida, clique em Adicionar Componente -> Novo Script , nomeie-a CameraFollow e selecione CSharp como o idioma. Também o transferiremos para a pasta Scripts e depois abri-lo:

Vamos adicionar uma variável de Transformação pública para especificar qual alvo a seguir:

Nota: a posição X é a posição horizontal.

Agora o nosso script está pronto. No entanto, geralmente é considerada a melhor prática para fazer o movimento da câmera depois que tudo o resto na Cena foi atualizado. Nós simplesmente mudaremos nossa função de atualização para o LateUpdate , apenas para que ele seja perfeitamente liso:

Há muitas maneiras diferentes de fazer o obstáculo se mover para cima e para baixo o tempo todo. Como de costume, usaremos a maneira mais fácil.

Começaremos adicionando uma variável de velocidade e depois configurando a velocidade do Rigidbody para que os obstáculos se movam para cima com a velocidade :

Nota: a função Switch simplesmente inverte a velocidade do Rigidbody. Em seguida, usamos InvokeRepeating para dizer à Unity que ligue para essa função a cada poucos segundos. Também adicionamos uma variável switchTime para especificar o tempo em que Switch deve ser chamado.

Salve o Script e configure a Velocidade do obstáculo para 1 :

Nota: se não quisermos que um obstáculo se mova, podemos definir a velocidade para 0 ou desativar o Script.

Se pressionarmos Play , podemos ver nosso obstáculo subindo e descendo:

Adicionando mais obstáculos

Vamos clicar com o botão direito do mouse no obstáculo na Hierarquia , selecionar Duplicar e movê-lo um pouco mais para a direita:

Também duplicaremos um e depois definiremos a propriedade Scale.Ycomo -1 :

Desta forma, ele parece corretamente ao posicioná-lo de cabeça para baixo:

Podemos adicionar tantos obstáculos com tantas propriedades de velocidade e switchTime como queremos:

[spoiler=Fonte + Download do Projeto]