Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Trabalhando com as ferramentas 2D da Unity

by
Read Time:12 minsLanguages:

Portuguese (Português) translation by Jonathan Ramos (you can also view the original English article)

Neste tutorial, vou te mostrar como tirar proveito das novas ferramentas 2D incluídas na Unity para criar um jogo 2D.

1. Visão geral do aplicativo

Neste tutorial, você aprenderá como criar um projeto 2D na Unity e a criar um jogo para celular usando C# e Unity.

O objetivo do jogo é atirar um raio de teletransporte nas vacas antes que elas se abriguem no celeiro.

Neste projeto você vai aprender os seguintes aspectos do desenvolvimento na Unity:

  • criação de um projeto 2D;
  • familiarizar-se com a interface da Unity;
  • criação de Prefab;
  • incorporação de scripts nos objetos do jogo
  • como trabalhar com colisões e física;
  • uso de timers.

2. Crie um novo projeto Unity

Abra a Unity e selecione New Project no menu File para abrir a caixa de diálogo do novo do projeto. Selecione um diretório para o seu projeto e configure o padrão para a 2D.


3. Configurações de compilação

Na próxima etapa, você é apresentado à interface da Unity. Defina o projeto para desenvolvimento móvel escolhendo Build Settings no menu File e selecione a plataforma que desejar.

Unity pode compilar para iOS, Android, BlackBerry e Windows Phone 8; isso é ótimo se você planeja criar um jogo para múltiplas plataformas.


4. Dispositivos

Já que estamos prestes a criar um jogo 2D, a primeira coisa que precisamos fazer depois de selecionar a plataforma que estamos visando, é escolher o tamanho da arte que vamos usar no jogo.

iOS:

  • IPad sem Retina: 1024px x 768px
  • iPad com Retina: 2048px x 1536px
  • 3.5" iPhone/iPod Touch sem Retina: 320px x 480px
  • 3.5" iPhone/iPod com Retina: 960px x 640px
  • 4" iPhone/iPod Touch: 1136px x 640px

Como o Android é uma plataforma aberta, existem muitos dispositivos diferentes, resoluções de tela e densidades de pixel. Alguns dos mais comuns estão listados abaixo.

  • Tablet Asus Nexus 7: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

E para Windows Phone e BlackBerry:

  • BlackBerry Z10: 720px x 1280px, 355 ppi
  • Nokia Lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppi

Apesar de nós focarmos na plataforma iOS neste tutorial, o código pode ser usado para qualquer uma das outras plataformas.


5. Exportação de gráficos

Dependendo do dispositivo que você pretende publicar, talvez você precise converter o trabalho artístico para o tamanho e densidade de pixels recomendados. Você pode fazer isso no seu editor de imagens favorito. Eu usei a função Adjust Size... no menu Tools no aplicativo de visualização do Os X.


6. Interface Unity

Certifique-se de clicar no botão 2D no painel Scene. Você também pode modificar a resolução que está sendo usada para exibir a cena no painel Game.


7. A interface do jogo

A interface de usuário do nosso jogo será simples. Você pode encontrar a arte para este projeto nos arquivos deste tutorial.


8. Linguagem

Você pode usar uma das três linguagens da Unity, C#, UnityScript - uma linguagem semelhante ao JavaScript em termos de sintaxe - e Boo. Cada linguagem tem seus prós e contras, mas cabe a você decidir qual delas você prefere. Eu prefiro a sintaxe do C#, então é a linguagem que vou usar neste tutorial.

Se você decidir usar outra lingaguem, então certifique-se de dar uma olhada na referência de Scripts da Unity para exemplos.


9. Gráficos 2D

Unity tornou-se uma grande plataforma para a criação de jogos 3D para diversas plataformas, como Microsoft Xbox 360, Sony PS3, Nintendo Wii, a web e várias plataformas móveis.

Embora sempre tenha sido possível utilizar a Unity para desenvolvimento de jogos 2D, isso não foi oficializado até o lançamento da Unity 4.3 que incluía suporte nativo para 2D. Vamos aprender como trabalhar com imagens como sprites em vez de texturas nas próximas etapas.


10. Efeitos sonoros

Vou usar alguns efeitos para melhorar a experiência do jogo. Os efeitos de som usados neste tutorial podem ser encontrados em Freesound.org.


11. Importação de assets

Antes de começarmos a programar, precisamos adicionar nossos assets no projeto Unity. Há várias maneiras de fazer isso:

  • selecionando Import New Asset no menu Assets;
  • adicionando itens à pasta assets em seu projeto;
  • arrastando e soltando os assets na janela do projeto.

Depois de concluir esta etapa, você deverá ver os assets na pasta Assets do seu projeto no painel Project.

12. Crie a cena

Estamos prontos para criar a cena do nosso jogo, basta arrastar objetos para o painel Hierarchy or Scene.


13. O plano de fundo

Comece arrastando e soltando o fundo para o painel Hierarchy. Ele deverá aparecer no painel Scene.

Como o painel Scene está definido para mostrar uma exibição 2D, você observará que selecionando a Main Camera na Hierarchy mostrará um preview do que a câmera vai para exibir. Você também pode ver isso na exibição do jogo. Para tornar a cena inteira visível, altere o valor Size da Main Camera para 1.6 no painel Inspector.


14. A nave

A nave também é um elemento estático que o jogador não será capaz de interagir. Posicione-o no centro da cena.


15. O celeiro

Selecione o celeiro do painel Assets e arraste-o para a cena. Posicione-o conforme ilustrado na imagem abaixo.


16. O Collider do celeiro

Para certificar-se de que o celeiro é notificado quando uma vaca encosta nele — entra no celeiro — precisamos adicionar um componente, um Box Collider 2D para ser mais preciso.

Selecione o celeiro na cena, abra o painel Inspector e clique em Add Component. Na lista de componentes, selecione Box Collider 2D da seção Physics 2D. Certifique-se de marcar a caixa Is Trigger.

Queremos que a vaca reaja quando ela encosta na porta do celeiro, então precisamos fazer com o collider um pouco menor. Abra o menu Inspector e altere os valores Size e Center do collider para mover a caixa perto da porta do celeiro.


17. Script de colisão do celeiro

É hora de escrever algum código. Precisamos adicionar um script para que o aplicativo possa responder à colisão quando uma vaca entra no celeiro.

Selecione o celeiro e clique no botão Add Component no painel Inspector. Selecione o New Script e nomeie-o OnCollision. Lembre-se de alterar a linguagem para C#.

Abra o arquivo recém-criado e adicione o seguinte trecho de código.

O trecho verifica se há uma colisão entre o objeto ao qual está o script está anexado, o celeiro, e um objeto chamado cow(Clone), que será uma instância de um Prefab da vaca que criaremos mais tarde. Quando uma colisão ocorre, um som é tocado e o objeto vaca é destruído.


18. Som do celeiro

Para tocar um som quando uma vaca encosta no celeiro, primeiro precisamos anexar o som no celeiro. Selecione-o no painel Hierarchy ou Scene, clique no botão Add Component no painel Inspector e selecione Audio Source da seção Audio.

Desmarque a opção Play on Awake e clique no ponto pequeno à direita, abaixo do ícone de engrenagem, para selecionar o som do celeiro.

Você pode aumentar o tamanho dos ícones na interface de usuário da Unity, clicando em Gizmos no painel Scene e alterando o controle de tamanho.


19. O raio

Arraste o asset do raio no painel Assets para a cena e adicione um collider nele. Isto é necessário para detectar uma colisão com a vaca azarada. Marque a opção Is Trigger no painel Inspector.

20. Script do raio

Crie um novo script repetindo os passos que descrevi alguns momentos atrás. Nomeie o script como Bullet e substitua seu conteúdo com o trecho de código a seguir:

Isso é um monte de código, mas não é complicado. Vamos ver o que está acontecendo. Primeiro, criamos uma instância de AudioClip chamada cowSound, que usaremos para armazenar um arquivo de áudio. Esta é apenas mais uma técnica para tocar um efeito sonoro, caso não queira adicionar dois componentes de áudio para o objeto. Declaramos a variável como pública, então nós podemos acessá-la a partir do Inspector. Clique no ponto pequeno no lado direito de cowSound e selecione o arquivo de áudio.

Então fazemos o raio invisível desativando seu renderizador. Nós usamos o mesmo objeto, assim podemos salvar recursos, que é uma importante otimização para dispositivos menos poderosos.

Podemos detectar toques na tela, que criam o raio visível e reproduzem o som de raio (veja abaixo). Se o objeto estiver visível, significa que ele deveria ir para baixo para acertar uma vaca.

Há também um código para detectar se o raio está fora dos limites do local. Se este for o caso, nós o reposicionamos, pronto para disparar novamente (verifique os valores x e y do raio no Inpector).

A última parte verifica se o raio atinge uma vaca. Se isso acontecer, ele toca o som da vaca e a destrói. O raio então torna-se invisível e é colocado em sua posição original, pronto para disparar novamente.


21. Áudio do raio

Para adicionar o áudio para o raio, selecione-o na Hierarchy ou Scene e clique em Add Component no painel Inspector. Selecione Audio Source da seção Audio. Desmarque a opção Play on Awake e clique no ponto pequeno à direita para selecionar o arquivo de som.


22. Adicione uma vaca

Arraste a arte da vaca do painel Assets e posicione-a na cena, como mostrado abaixo.


23. Rigid Body 2D

Para detectar uma colisão, pelo menos um dos objetos que colidem precisa ter um componente RigidBody2D associado a ele. Como a vaca pode colidir com o celeiro e o raio, é melhor adicionar o componente na vaca.


24. Collider da vaca

Também precisamos adicionar um collider na vaca para podermos detectar colisões com o celeiro e o raio. Certifique-se de marcar a opção is Trigger no Inspector.


25. Script para mover a vaca

Adicione um componente de script à vaca e substitua seu conteúdo com o seguinte:

A classe MoveCow anima a vaca na tela usando uma variável chamada moveSpeed. O método InvokeRepeating altera a velocidade da vaca para faze-la correr a partir do momento em que ela atinge o centro da cena. Isso torna o jogo mais desafiante.


26. Crie um Prefab da vaca.

Com os componentes necessários adicionados à vaca, é hora de transforma-la em um Prefab. O que é um Prefab? Vamos consultar o Manual da Unity:

"Uma Prefab é um tipo de asset — um GameObject reutilizável armazenado no seu projeto. Prefabs podem ser inseridos em qualquer cena, várias vezes por cena. Quando você adiciona um Prefab em uma cena, você cria uma instância dele. Todas as instâncias do Prefab são ligadas ao Prefab original e são essencialmente clones dele. Não importa quantas instâncias existem em seu projeto, quando você fizer alterações no Prefab você verá a mudança aplicada a todas as instâncias."

Se você está vindo do Flash e do ActionScript, então isso deve soar familiar. Para converter a vaca para um Prefab, arraste a vaca do painel Hierarchy para o painel Assets. Como resultado, o nome na Hierarchy ficará azul.

Convertendo a vaca para um Prefab permite reutilizá-la, o que é conveniente, pois ele já contém os componentes necessários.


27. Script Spawner

O script Spawner será responsável por fazer as vacas aparecerem. Abra o MonoDevelop — ou seu editor C# favorito — e crie um novo script:

Chamamos o método InvokeRepeating para invocar as vacas, usando os valores definidos pelos spawnTime e spawnDelay. O GameObject cow é definido como público e criado através do Inspector. Clique no ponto pequeno à direita e selecione o Prefab da vaca.


28. O invocador de objetos do jogo

Para instanciar o Prefab vaca, usaremos a arte da vaca que nós adicionamos à cena há alguns minutos. Selecione-o e remova seus componentes. Em seguida, adicione o script Spawner.


29. Testando

É hora de testar o jogo. Pressione Command + P para jogar o jogo na Unity. Se tudo ocorrer como esperado, você está pronto para as etapas finais.


30. Configurações finais

Quando você estiver feliz com seu jogo, é hora de selecionar Build Settings do menu File e clicar no botão Player Settings. Isso traz as configurações do Player Setting para o painel Inpector onde você pode ajustar os parâmetros para sua aplicação.


31. Ícone do aplicativo 

Usando a arte que você criou anteriormente, você pode criar um ícone para o seu jogo. a Unity mostra os tamanhos exigidos, que dependem da plataforma para a qual você está compilando.


32. Imagem splash

O splash ou imagem de lançamento é exibida quando o aplicativo é iniciado.

33. Build

Uma vez que seu projeto está configurado corretamente, é hora de revisitar o Build Settings e clicar no botão Build. Isso é tudo o que é preciso para construir o seu jogo para testes e/ou distribuição.

34. Xcode

Se você está construindo para iOS, você precisa do Xcode para construir o binário do aplicativo final. Abra o projeto do Xcode e escolha Build no menu Product.

Conclusão

Neste tutorial, nós aprendemos sobre os novos recursos 2D da Unity, detecção de colisão e outros aspectos de desenvolvimento de jogos com Unity.

Experimente o resultado e personalize para fazer seu próprio jogo. Espero que você tenha gostado deste tutorial e achado útil.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.