Tutorial: Criando um Jogo de Plataforma em Unity – Parte 1

Unity3DOlá, pessoal!

ApresentO a vocês uma poderosa ferramenta para desenvolvimento de Games: Unity3D.

Abaixo a lista de alguns jogos famosos feitos em Unity:

  • Temple Run 1 e 2;
  • Subway Surfers;
  • Max: The Curse of Brotherthood;
  • Oddworld: New ‘n’ Tasty;
  • Deus EX: The Fall;
  • entre outros.

Para ver mais jogos, acesse: https://unity3d.com/showcase/gallery

Vamos aprender a fazer nossos games com Unity.

O que é o Unity e quanto custa?

O Unity3D é um completo ecossistema de desenvolvimento de games multiplataforma. Utilizando uma poderosa engine de renderização que se integra com um conjunto completo de ferramentas intuitivas, você pode criar rapidamente jogos 3D e 2D de qualquer gênero. Ideal para pequenas empresas e desenvolvedores “indies”, o Unity possui tudo o que é preciso para fazer um jogo de qualidade.

O Unity possui basicamente 3 tipos de planos diferentes:

·         Free: Você não paga nada e pode disponibilizar seu jogo para navegadores, PC, MAC, Windows 8 e Windows Phone. Seu jogo irá ter a logomarca do Unity e algumas funcionalidades avançadas não estarão disponíveis;

·         Pro: O Unity Pro custa $1.500,00 e permite você usar todos os recursos disponíveis. Você pode adquirir o pacote para desenvolver para iOS e Android separadamente. O custo do pacote é mais $1.500,00 por plataforma;

·         Pro – Mensal: Nesse plano você paga $75 por mês e tem todas as funcionalidades do Pro. A diferença é que quando você deixa de pagar, a sua licença expira e você tem que voltar a usar a versão grátis.

Mais informações sobre os planos e as diferenças entre a versão Free e Pro podem ser encontradas aqui: https://store.unity3d.com/ e aqui: http://unity3d.com/unity/licenses .

 

O que precisamos?

Ok. Agora que sabemos um pouco mais sobre a ferramenta, vamos ao que interessa. Nessa série de tutoriais vamos desenvolver um jogo de plataforma em que o personagem vai correr e pular em um cenário formado por plataformas. O objetivo dele é chegar ao final da fase sem cair.

Para este tutorial vamos utilizar:

 

Criando o projeto

Quando iniciamos o Unity pela primeira vez, uma tela aparece para abrirmos um projeto ou para criarmos um novo. Se essa tela não apareceu, clique em File -> New Project que ela aparecerá.

Na aba “Create a New Project”, deixe desmarcado todos os itens da área “Import the following packages” e mude a opção “Setup defaults for:” para 2D.

Ao criar o projeto, a tela principal do Unity vai abrir. Nela podemos ver 4 áreas principais:

  • Hierarchy: Todos os objetos que tem na cena;
  • Scene/Game: Sua cena e como o seu game vai ficar quando estiver rodando. O Unity troca as abas automaticamente quando iniciamos o jogo;
  • Inspector: Quando selecionamos um objeto, suas propriedades vão aparecer aqui;
  • Project: Todos os arquivos do projeto (imagens, scripts, animações, etc.).

Essas áreas podem ser movidas e ajustadas da forma que você achar melhor. No canto superior direito tem um botão chamado “Default”. Clique nele e você verá alguns layouts pré-definidos. Eu particularmente gosto do “2 by 3”.

Dando vida ao Personagem

Para que o nosso personagem ganhe vida, vamos seguir uma ordem de criação que vai ser a mesma para qualquer personagem em outros projetos 2D. A ordem é:

 

Criar um GameObject

No menu, vá em GameObject -> Create Empty. Isso vai criar um GameObject vazio na nossa cena. Todos os objetos que colocamos na nossa cena são GameObjects. Isso vai facilitar as coisas na hora de programar.

Renomeie o GameObject no painel de inspeção para Hero. Esse vai ser o nosso herói.

Adicionar o Sprite Renderer no GameObject

Para exibir o nosso herói, precisamos de um componente que renderize os sprites. Para isso, vamos adicionar ao nosso herói o componente “Sprite Renderer”.

Clique no objeto “Hero” no painel de hierarquia. Agora clique em “Add Component” no painel de inspeção. Navegue até o item “Rendering” e selecione o componente “Sprite Renderer”. Pronto, já temos o componente que vai exibir o nosso herói na tela.

Adicionar o componente de Física ao personagem

Para finalizar essa primeira etapa do nosso GameObject do herói, vamos dizer ao Unity que ele vai ser afetado pela física do mundo. Para isso, vamos adicionar o componente “Rigidbody2D”.

Mais uma vez selecione o objeto “Hero” no painel de hierarquia e clique em “Add Component” no painel de inspeção. Navegue até “Physics2D” e clique em “Rigidbody2D”.

 No painel de inspeção marque a caixa “Fixed Angle”. Isso impede que o nosso personagem rode na tela.

Ótimo! Temos o nosso herói na tela sofrendo as consequências da física. Se você apertar o botão de “Play” na barra de cima do Unity você vai ver… absolutamente nada! Faltam os sprites!

 

Importar os Sprites

Importar os sprites no Unity é muito fácil. Abra a pasta em que você salvou os arquivos do nosso personagem e arraste-os para o painel de projeto. Vamos adicionar os arquivos idle, jump e run.png. Eu criei uma pasta chamada Sprites para organizar melhor a nossa pasta de projeto.

Separar os frames

Clique na imagem “idle” recém importada e note no painel de inspeção que ela tem algumas propriedades. A primeira delas é o “Texture Type”. Como nós configuramos o projeto para ser 2D, esse campo deve aparecer como “Sprite (2D uGUI)”. Se não estiver, mude para esta opção.

Altere a opção “Pixel to Units” para 20. Essa opção converte os pixels da imagem em unidades de medida dentro do nosso mundo.

A próxima opção é a “Sprite Mode”. Por padrão ela vem marcada como “Single” mas nós vamos mudá-la para “Multiple”.

Agora possuímos um botão chamado “Sprite Editor”. Clique nele para abrir a janela de edição de sprites.

Nesta janela vamos separar os frames das animações. Para fazer isso temos 2 opcões: a primeira é a mais indicada para a criação de personagens, mas para usá-la, precisamos que os sprites sejam posicionados em uma grid com tamanho fixo. Clique em “Slice” no canto superior esquerdo e depois mude o “Type” para “Grid”. Marque a largura e a altura de cada Sprite e mude as configurações para posicionar cada Sprite dentro do seu frame.

A segunda opção, a qual vamos utilizar nesse Sprite, já que ele não tem a largura fixa, é o “Type” marcado como “Automatic”. Altere a configuração “Pivot” para “Bottom”, clique em “Slice”, depois em “Apply” e feche a janela.

Note que temos uma seta ao lado da imagem que importamos para o nosso herói. Clique nela e você verá todos os sprites separados. Repita esse processo para os sprites que acabamos de adicionar, exceto o chao-provisorio.

Clique no nosso objeto “Hero” no painel de hierarquia, e onde temos o “Sprite Renderer” no painel de inspeção, vamos preencher o campo “Sprite”. Para isso, basta clicar e arrastar um frame da imagem que acabamos de separar os sprites. Eu aconselho arrastar o primeiro frame da pose de “Idle”. Esse frame não vai ser visível no jogo quando colocarmos as animações e vai apenas servir como referência para os próximos passos.

Execute o game e agora você verá nosso poderoso herói… caindo num infinito sem fim! Vamos agora adicionar os colisores.

 

Adicionando os colisores

A primeira coisa que vamos adicionar é um chão. Importe o arquivo “chao-provisorio.png”, se você ainda não o fez, para a pasta de projeto. Ele será importado como um Sprite. Não precisamos alterar o “Sprite Mode” pois só temos uma imagem no arquivo, mas precisamos alterar o “Pixels to Units” para 20 deixando a imagem maior na nossa cena. Crie um novo GameObeject (GameObject -> Create Empty) e adicione um “Sprite Renderer” (Add componens -> Rendering -> Sprite Renderer). Agore arraste o nosso “chao-provisorio” para o campo “Sprite”.  O chão deve aparecer na cena, mas ele ainda não vai colidir com o nosso personagem.

Para fazer a colisão funcionar, selecione o chão e clique em “Add component”, “Physics2D”, “Box Collider 2D”. Isso vai gerar um colisor do tamanho do chão. Isso é tudo o que precisamos para o chão.

Duplique o GameObject do chão (Ctrl + C e Ctrl + V) e posicione os dois objetos como na imagem abaixo.

O nosso herói possui o componente “Rigidbody2D”, o qual faz as forças da física do nosso jogo serem aplicadas a ele, mas não faz com que ele colida com os objetos da cena. Para que haja a colisão precisamos adicionar alguns Colliders nele. Isso mesmo, no plural.

Vamos começar adicionando um “Circle Collider 2D” e posicioná-lo nos pés do herói. Usamos um círculo para não deixa-lo preso durante a movimentação.

Agora adicione um “Box Collider 2D” para cobrir o resto do corpo do herói. Não tem problema se os colisores se sobreporem. O resultado deve ficar parecido com a imagem abaixo.

Se você executar o projeto verá que agora ele não cai no infinito!

 

Criar as animações

Vamos começar a dar mais vida ao nosso herói. No painel de projeto, clique com o botão direito na pasta Assets e selecione “Create”, “Animator Controller”. Vamos chamá-la de “HeroAnimatorController”.

Dê duplo clique no arquivo criado para abri-lo. Vai abrir uma janela com um retângulo escrito “Any State” dentro dele. Posicione essa janela onde achar melhor. Eu a uso junto do meu painel de cena.

Essa janela irá controlar todas as animações do personagem. Para isso, precisamos linkar o personagem com o arquivo que criamos. Selecione o personagem e clique em “Add component”, “Miscellaneous”, “Animator”.

Arraste o arquivo que criamos para o campo “Controller” do componente “Animator”. E mude o campo “Animation Mode” para “Animate Physics”.

Agora, no menu superior do Unity, clique em “Window -> Animation” para abrir uma outra janela de animação. Posicione-a no lugar em que você achar melhor, eu a uso junto com o painel de Game.

Os passos para criar as animações serão basicamente os mesmos para cada “estado” do personagem. Os estados que o nosso personagem terá serão: Parado, Correndo e Pulando. Vamos criar o estado de Parado.

Primeiro selecione o nosso personagem e vá até o painel de animação (Animation). Você verá um campo chamado “Sample” com um número 60 ao lado. Do outro lado desse campo, existe uma seta. Clique nela e clique em “Create a New Clip”. Salve como “Idle.anim”.

Se tudo deu certo, vai aparecer um outro retângulo no painel de controle da animação chamado Idle. Essa cor laranja indica que essa animação é a padrão e irá ser a primeira animação a ser executada.

Vamos adicionar os Sprites à nossa nova animação. Expanda o Sprite Idle no painel de projeto, selecione todos os frames e arraste-os para o painel de animação. Mude o campo “Sample” para 6. Pronto. Nosso herói já possui a animação de parado.

 

Movimentando o personagem

Vamos agora criar a animação do personagem correndo.

Selecione o personagem, vá no painel de animação e adicione um novo clipe (“Create New Clip”), do mesmo modo que fizemos com a animação de Idle, e chame-o de run.anim. Selecione os frames do Sprite run e arraste para o clipe. Mude o campo “Sample” para 24. Fácil, não?

Já temos a animação do movimento do personagem. Precisamos agora fazer ele passar do estado Parado para Correndo quando o jogador pressionar o direcional.

No painel “Animator”, temos uma área chamada “Parameters”. Clique no símbolo de mais (+) e clique em Float para adicionarmos um parâmetro do tipo Float. Nomeie ele como “Velocidade”.

Agora clique com o botão direito em cima de Idle e clique em “Make Transition”. Agora clique em cima de Run. Isso vai criar uma seta partindo de Idle para Run. Clique nessa seta e no painel de inspeção você vai ver que existe uma área chamada “Conditions”. Coloque a condição como Velocidade, Greater, 0.01.

Faça a mesma coisa criando uma transição de Run para Idle e mude a condição para Velocidade, Less, 0.01.

Basicamente dissemos para o nosso Animator Controller que quando a velocidade do personagem for maior que 0.01, mude para o estado Correndo e quando for menor, mude para parado.

Agora, finalmente, vamos codificar um pouco. Crie uma pasta chamada Scripts no painel de hierarquia e adicione um C# Script (Create -> C# Script).

Nomeie-o como HeroBehavior.cs e arraste-o para cima do objeto do herói. Agora, no painel de inspeção do herói, irá aparecer o nosso script como um componente.

Dê duplo clique no script para editá-lo. Vai abrir um programa chamado MonoDevelop, que é instalado junto com o Unity.

Por padrão, os scripts vêm com dois métodos nele: Start e Update. Vamos alterar o método Update para FixedUptade.

O código final deve ficar assim:

using UnityEngine;
using System.Collections;

public class HeroBehavior : MonoBehaviour
{
    Animator animator;
    float axis;

    //Verifica se o personagem esta' olhando para o lado direito.
    bool ladoDireito = true;

    //Velocidade do personagem
    Vector2 velocidade;
    
    //Velocidade ma'xima que o personagem pode correr.
    public float MaxVelocidade = 10;
    
    // Use this for initialization
    void Start()
    {
        //Inicializamos o Componente Animator para podermos trabalhar com os parametros que criamos.
        animator = GetComponent<Animator>();
    }

    // Executado em sincronismo com a fisica do jogo.
    void FixedUpdate()
    {
        // Seta a varia'vel axis para o valor recebido quando o jogador preciona algum direcional.
        // O Input.GetAxis deve ser usado porque suporta as setas do teclado, controles e joysticks.
        axis = Input.GetAxis("Horizontal");

        //Viramos o personagem de acordo com o valor da varia'vel axis
        if (axis > 0 && !ladoDireito)
            Flip();
        else if (axis < 0 && ladoDireito)
            Flip();

        //Setamos a variavel velocidade.
        velocidade = new Vector2(axis * MaxVelocidade, rigidbody2D.velocity.y);

        //Alteramos o parametro Velocidade que colocamos no animator para a velocidade do personagem.
        //Como nao importa se e' positivo ou negativo, usamos a funcao Mathf.Abs para pegar o valor absoluto (sem sinal).
        animator.SetFloat("Velocidade", Mathf.Abs(axis));

        //Por ultimo alteramos a velocidade do personagem para gerar o movimento
        rigidbody2D.velocity = velocidade;
    }

    //Viramos o personagem para o lado que o jogador esta' apertando.
    void Flip()
    {
        ladoDireito = !ladoDireito;

        Vector2 novoScale = new Vector2(transform.localScale.x * -1, transform.localScale.y);

        transform.localScale = novoScale;
    }
}

Adicionei comentários no código para que vocês possam entender o que fizemos em cada parte.

Na próxima parte do tutorial, vamos ver como fazer o nosso herói pular. Para isso, vamos usar um recurso muito legal chamado “Blend Tree”. Vamos também começar a montar a primeira fase do jogo.

Se você tem alguma dúvida ou sugestão, comente aí! E se você quer ver esse tutorial em vídeo, acesse a página http://www.patreon.com/fabricadejogos e saiba como você pode ajudar!

Um abraço e até a próxima continuação!

Filipe Leal

Bacharel em Ciência da Computação pela UDESC e certificado como Microsoft Specialist. Atualmente trabalha como programador na Basecorp Learning Systems. Reside em Edmonton - Canadá. Faixa preta com 1o. grau em Pa-kua, tem preferência por jogos de Ação/Aventura, RPG, Luta e Party Games. Seu jogo favorito é The Legend of Zelda - Ocarina of Time.

Send this to a friend