Bem vindo !

Não perca tempo, registre-se agora mesmo! Membros registrados tem acesso a muito mais conteúdos, além de poder participar de bate-papos, discussões e compartilhar novidades com a comunidade. Não perca essa oportunidade!

Software [Tutorial] Unity 2D Flappy Bird

Discussão em 'Tutoriais' iniciado por Arkanun1000, 10 Ago, 2017 às 14:45.

Compartilhe esta Página

  1. Arkanun1000 Game Developer & Java Developer

    Moderador Programador
    Arkanun1000
    Registro:
    25 Jan, 2011
    Posts:
    869
    Curtidas:
    185
    90/133

    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Prefácio
    Neste Tutorial, aprenderemos o quão fácil é fazer um jogo como Flappy Bird no Unity. Clique aqui e Registre-se para visualizar esse link foi lançado em 2013 e tornou-se a aplicação iOS mais baixados em janeiro de 2014.

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Vamos nomeá-lo flappybird , selecione qualquer local como C: \ , selecione 2D e clique em Criar projeto :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    O fundo
    Começaremos por desenhar um fundo de céu muito simples em nossa ferramenta de desenho de escolha:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    E, em seguida, modifique as Configurações de Importação no Inspetor :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Para que o fundo se torne um filho da câmera principal :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Se pressionarmos Play , podemos ver o céu de fundo:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Depois, vamos arrastá-lo da Área do Projeto para a Hierarquia novamente:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Depois, adicionaremos uma camada de usuário , vamos chamá-la WeirdPhysics :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Agora, podemos selecionar o terreno na Hierarquia novamente e depois atribuir a camada WeirdPhysics :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Depois, selecionamos Editar -> Configurações do Projeto -> Física 2Dno menu superior e desativar as colisões WeirdPhysics vs. WeirdPhysics na Layer Collision Matrix :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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á:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    No Editor de Sprite nós o dividimos como uma grade de 16 x 16 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    A animação de pássaros
    Vamos selecionar todas as fatias e arrastá-las para a Hierarquia :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    E como só temos uma animação, já estamos aqui. Se pressionarmos Play,então podemos ver isso em ação:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Se pressionarmos Play , já podemos ver a propriedade de gravidade do Rigidbody em ação:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Podemos clicar duas vezes no Script para abri-lo:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Bird : MonoBehaviour { 
    
    // Use this for initialization 
    void Start ( ) { 
    
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    
    Nós podemos fazer o pássaro voar para a direita em todos os momentos, primeiro adicionando uma nova variável de velocidade e depois usando a propriedade de velocidade do Rigidbody:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Bird : MonoBehaviour { 
    // Movement speed 
    public float speed = 2 ; 
    
    // Use this for initialization 
    void Start ( ) { 
    // Fly towards the right 
    GetComponent < Rigidbody2D > ( ) . velocity = Vector2 . right * speed ; 
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    

    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 :

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Bird : MonoBehaviour { 
    // Movement speed 
    public float speed = 2 ; 
    
    // Flap force 
    public float force = 300 ; 
    
    // Use this for initialization 
    void Start ( ) { 
    // Fly towards the right 
    GetComponent < Rigidbody2D > ( ) . velocity = Vector2 . right * speed ; 
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    // Flap 
    if ( Input . GetKeyDown ( KeyCode . Space ) ) 
    GetComponent < Rigidbody2D > ( ) . AddForce ( Vector2 . up * force ) ; 
    } 
    }
    
    
    Se pressionarmos Play , agora podemos fazer o pássaro voar para cima:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Há uma última coisa a fazer aqui. Queremos reiniciar o jogo assim que o pássaro colidiu com o chão ou com um obstáculo. Nosso pássaro já possui um Collider e um Rigidbody , o que significa que a Unity chama automaticamente a função OnCollisionEnter2D . Tudo o que temos a fazer é realmente adicioná-lo ao nosso Script:

    Código:
    void OnCollisionEnter2D ( Collision2D coll ) { 
    // Restart 
    Application . LoadLevel ( Application . loadedLevel ) ; 
    }
    

    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:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class CameraFollow : MonoBehaviour { 
    
    // Use this for initialization 
    void Start ( ) { 
    
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    
    Não precisamos da função Iniciar desta vez, então vamos removê-la:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class CameraFollow : MonoBehaviour { 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    
    Vamos adicionar uma variável de Transformação pública para especificar qual alvo a seguir:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class CameraFollow : MonoBehaviour { 
    // The Target 
    public Transform target ; 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    

    Nota: podemos definir esse destino no inspetor mais tarde.
    Depois, simplesmente usaremos a função Atualizar para definir sempre a posição X da câmera na posição X do alvo:

    Código:
    // Update is called once per frame 
    void Update ( ) { 
    transform . position = new Vector3 ( target . position . x , 
    transform . position . y , 
    transform . position . z ) ; 
    }
    
    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:

    Código:
    void LateUpdate ( ) { 
    transform . position = new Vector3 ( target . position . x , 
    transform . position . y , 
    transform . position . z ) ; 
    }
    
    Se salvarmos o Script, podemos ver o Inspetor e arrastar o Objeto de Jogo Bird_0 da Hierarquia para o espaço de destino do Script:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Se pressionarmos Play , agora podemos ver como a câmera segue automaticamente o pássaro:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Os obstáculos

    A imagem do obstáculo
    Agora o nosso jogo não é muito difícil. Podemos mudar isso, adicionando alguns obstáculos. Vamos desenhar um:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    E, em seguida, arraste-o da área do projeto para a hierarquia , para criar um GameObject dele:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Vamos posicioná-lo em X = 3 , Y = -5 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Aqui está a aparência da cena:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Física de obstáculos
    O obstáculo deve ser parte do mundo da física novamente. O pássaro deve poder colidir com ele, então vamos selecionar Adicionar Componente -> Física 2D -> Collider Collision 2D no Inspetor :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Nós conversamos sobre como os obstáculos podem acabar no chão e como não queremos que os dois colidem uns com os outros, então vamos fazer parte também da nossa camada WeirdPhysics :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    Nota: uma vez que desativamos as colisões entre nossa camada WeirdPhysics, o chão nunca colidirá com um obstáculo. O pássaro ainda pode colidir com o chão e com o obstáculo porque tem uma camada diferente (o padrão).

    Tudo bem, então alguns dos obstáculos também devem mover-se para cima e para baixo. Tudo no mundo da física que se deve mover precisará de um Rigidbody, então vamos selecionar Adicionar Componente -> Física 2D -> Rigidbody 2D no Inspector novamente. Nós não queremos que isso seja afetado pela gravidade, então vamos definir a Escala de Gravidade como 0 . Nós também não queremos que ele gire, então vamos também ativar o Fixed Angle novamente:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Se pressionarmos Play e deixar o pássaro voar contra o obstáculo, podemos ver como o nível reinicia:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Movimento de obstáculos
    Tudo bem, então alguns dos obstáculos devem mover-se para cima e para baixo. Esse tipo de comportamento pode ser implementado com um script novamente. Vamos selecionar Adicionar Componente -> Novo Script , nomeie-o Obstáculo , mova-o para a nossa pasta Scripts e depois abra-o:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Obstacle : MonoBehaviour { 
    
    // Use this for initialization 
    void Start ( ) { 
    
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    
    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 :

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Obstacle : MonoBehaviour { 
    // Movement Speed (0 means don't move) 
    public float speed = 0 ; 
    
    // Use this for initialization 
    void Start ( ) { 
    // Initial Movement Direction 
    GetComponent < Rigidbody2D > ( ) . velocity = Vector2 . up * speed ; 
    } 
    
    // Update is called once per frame 
    void Update ( ) { 
    
    } 
    }
    
    Agora, o truque é usar a função Clique aqui e Registre-se para visualizar esse link da Unity para reverter essa velocidade a cada poucos segundos:

    Código:
    using UnityEngine ; 
    using System.Collections ; 
    
    public class Obstacle : MonoBehaviour { 
    // Movement Speed (0 means don't move) 
    public float speed = 0 ; 
    
    // Switch Movement Direction every x seconds 
    public float switchTime = 2 ; 
    
    void Start ( ) { 
    // Initial Movement Direction 
    GetComponent < Rigidbody2D > ( ) . velocity = Vector2 . up * speed ; 
    
    // Switch every few seconds 
    InvokeRepeating ( "Switch" , 0 , switchTime ) ; 
    } 
    
    void Switch ( ) { 
    GetComponent < Rigidbody2D > ( ) . velocity *= - 1 ; 
    } 
    }
    
    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 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem
    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    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:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Também duplicaremos um e depois definiremos a propriedade Scale.Ycomo -1 :
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Desta forma, ele parece corretamente ao posicioná-lo de cabeça para baixo:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

    Podemos adicionar tantos obstáculos com tantas propriedades de velocidade e switchTime como queremos:
    Clique aqui e Registre-se para visualizar esse vídeo/imagem

     
    Kensei. curtiu isso.
Top