Menu

Tutorial de Unity 2D #2 – Adicionando o personagem

Então pessoal, tudo tranquilo para a segunda parte do tutorial?  Na primeira parte (Conhecendo a Engine) nós baixando e nos familiarizamos com a estrutura do Unity não é mesmo? No tutorial de hoje então vamos realmente trabalhar no nosso jogo.

O que vamos fazer nessa parte do tutorial é adicionar o nosso personagem ao jogo aplicando a física nele. Ah, mas só isso Carlos? Sim, só isso sim. Esta parte já terá informação o suficiente para você entender os sprites, material, objetos, gravidade e colisão. Muita informação não é mesmo? Mas vamos com calma que tudo ficará fácil.

Primeira coisa a fazer é abrir o nosso projeto em File >> Open Project. Caso você tenha salvado seu jogo, ele estará neste “Select recently opened project”. Caso não esteja, você pode clicar em Open e selecionar o seu projeto onde ele estiver, beleza?

Projeto aberto, a primeira coisa que nós iremos fazer é organizar as estrutura das pastas. Para isso vá à aba Project e clique com o botão direito em algum canto vazio desta aba, para que apareçam as seguintes opções:

create folder - tutorial de unity 2d - jogos indie

Escolha a opção Create >> Folder para criar nossa primeira pasta. Dê o nome da pasta de sprites. O nome pode ser diferente, esta parte é apenas para deixarmos nosso projeto organizado. Caso deseje mudar o nome, clique sobre a pasta criada e aperte o botão F2 para renomear. Repita esta ação criando mais duas pastas: scripts e texture. Nossa estrutura ficará parecida com isto:

pastas - tutorial de unity 2d - jogos indie

Na pasta scripts vamos por todos os nossos códigos de programação em C# (Não se assuste ainda, tentarei explicar de forma que todos consigam trabalhar), sprites são as imagens dos personagens e objetos. texture serão as imagens do cenário e materiais.

Estrutura criada, vamos importar agora o personagem que você deve ter criado na primeira parte do tutorial (Caso não tenha criado, clique aqui para obter a imagem – http://jogosindie.com/wp-content/uploads/2014/05/heroi_sprite.png). Botão direito sobre a pasta sprites escolha a opção “Import New Asset…” e por fim escolha a imagem que criamos.

 importar personagem - tutorial de unity 2d - jogos indie

Caso tenha reparado, a aba Inpector agora aparece algumas opções relacionadas à imagem adicionada, correto? As que nos interessa são Texture Type, Sprite Mode e Format. A primeira coisa a fazer é verificar se o Texture Type está marcado como Sprite. Caso não troque para o tipo Sprite. Em Sprite Mode troque de Single para Multiple e em Format (Ultima opção), troque de compressed para Truecolor na aba default.

opções sprites - tutorial de unity 2D - jogos indie A opção Texture Type serve para definir que tipo de imagem é essa. O tipo Sprite, como falei serão nossos personagens e objetos, por isso iremos selecionar esta opção.

A opção Sprite Mode serve para dizer que a imagem que adicionamos é uma imagem única, ou se ela contém vários “desenhos”. E no nosso caso, a imagem é multiple, pois contém nosso herói em diferentes posições. Veja que aparece a opção Sprite Editor, ao clicar nela iremos ter a opção em dividir nossa imagem em várias outras. Você pode criar clicando e arrastando o mouse no formato que você quiser, mas isto seria trabalhoso para a gente. Então clique na opção Slice.

slice - tutorial de unity 2d - jogos indie

Veja que o Type está como Automatic, então caso você clique no botão Slice na parte inferior, o Unity irá cortar a imagem em várias outras onde ele achar que deve ser cortado. Mas nem sempre sair como a gente deseja, então no nosso caso vamos mudar a opção Type para Grid e em Pixel size coloque X = 32 e Y = 32. Por fim, aperte o botão Slice, ele cortará nossa imagem nas posições que nós queríamos. Clique no X desta aba para confirmar sua ação. Ele irá perguntar se você realmente desejar aplicar esse corte.  Então é só confirmar.

slices - tutorial de unity 2d - jogos indie

Nosso Sprite agora está dividido como nós queríamos, para podermos trabalhar com as animações. Se preferir (É até recomendado), você pode alterar o nome de cada Slice gerado de nosso Sprite.

slices gerados - tutorial de unity 2d - jogos indie

O próximo passo será adicionar nosso herói a cena do jogo. Para isto clique no heroi_sprite_7 (O que está parado virado para a direita) e o arraste para a aba Scene. Ele ficou muito pequeno ao ponto de você nem o enxerga-lo direito, correto?

personagem pequeno - tutorial unity 2d - jogos indie

Esta é a nossa chance de aprender a usar um pouco os atributos da câmera ou a escala. Vamos primeira para a opção de escala de nosso herói. Na aba Hierachy observe que agora além da Main Camera, existe o heroi_sprite_7. Vamos renomeá-lo para heroi_sprite apenas. Em seguida na aba Inspector altere a opção Position para X = 0, Y = 0, Z = 0. Isso fará com que nosso personagem fique centralizado no meio da tela. E para ajustar o tamanho selecione Scale para X = 3, Y = 3, Z = 3. Com isto você já deve estar vendo bem o personagem, porém vamos deixa-lo com suas configurações de escala original (Scale X =1, Y = 1, Z= 1).

configuracoes heroi - tutorial unity - jogos indie

Agora vamos aumentar o zoom da câmera do nosso jogo. Para isto clique em Main Camera na aba de Hierarchy. Observe que no Inspector existe uma opção chamada Size. Troque o valor de 5 para 1.5. Com isto você já deve estar conseguindo observar seu personagem na aba Game, mas ainda não na aba Scene. Para aumentar o zoom na aba Scene, posicione o seu mouse sobre a aba Scene e use o scroll do seu mouse para aproximar ou afastar a tela. Nesta aba não importa aonde a tela estiver, pois ela não reflete o jogo real rodando como a aba Game.

zoom camera - tutorial de unity 2d- jogos indie

Após esse pequeno treino dos atributos do personagem e câmera, vamos agora criar um objeto que será o nosso jogador. Nele iremos atribuir o Sprite do nosso herói que já está em cena e todas as configurações que precisaremos realizar. Vá em GameObject no menu do topo e clique em Create Empty. Você deve ter observado que na aba Hierarchy apareceu um objeto chamado de GameObject, certo? Vamos trocar o nome dele para Player, mudar sua Position para X = 0, Y = 0, Z = 0 e arrastar o heroi_sprite para dentro dele.

player object - tutorial de unity 2d - jogos indie

Tudo que for realizado no objeto Player, irá afetar também a todos os objetos que estiverem dentro dele. Exemplo: Se aumentar a Scale do objeto Player, também será aumentado a Scale do heroi_sprite ou se a position do Player mudar a do heroi_sprite também mudará. Vocês por acaso se lembram do personagem Rayman? Aquele personagem que possui todos os membros soltos? Pois então, saiba que ao contrário do nosso personagem aqui, os braços, pernas, corpo e até os olhos de Rayman são sprites separados juntos em um objeto, que seria o equivalente ao nosso objeto Player.

Continuando nosso tutorial, o jogo que estamos criando lembra um pouco o estilo de Mario, desta forma se um personagem não estiver no chão ou em algo solido, ele irá cair. Então bora adicionar um pouco de física ao nosso jogo. Clique no objeto Player na aba Hierarchy. Observe que no Inspector existe uma opção Add Component. Ao clicar nele, adicione a opção Physics 2D >> Rigidbody 2D.

Caso você clique na opção de Player já poderá observar na aba Game e Scene nosso herói caindo até o infinito, uma vez que não existe nada solido para ele pisar.

play - tutorial de unity 2d - jogos indie

Então para que isso não ocorra, vamos criar nosso chão. O processo é um pouco parecido com o Player. Vamos no menu GameObject e criamos um novo objeto com Create Empty. Vamos trocar o nome do GameObject para Chao (Sem “~”, ok? Não é bom usarmos acentuação, já que em linguagem de programação o padrão é inglês e não existe acentuação em inglês.) Após criado o objeto, vá na opção Add Component >> Mesh >> Mesh Filter.

Neste componente adicionado ao objeto, vá na opção Mesh e selecione a opção Quad. Pronto, nosso chão já foi adicionado, mas ainda não estamos enxergando ele, pois precisamos ir novamente a Add Component >> Mesh >> Mesh Renderer. Agora você já deve estar enxergando o que será nosso chão.

chao - tutorial unity 2d - jogos indie

Agora posicione o chão abaixo do nosso héroi e estenda o chão horizontalmente. Você pode usar os botões que ficam abaixo do menu principal ou usando a aba do Inspector como  já vimos (campos Position e Scale).  Caso use os botões, que tornará seu trabalho mais fácil, selecione o segundo botão para mover o chão e o quarto botão para mudar a escala.

                                                                                   botões - jogos indie

Seu chão deve ficar parecido com este aqui:

chão 2 - jogos indie

Porém convenhamos que este chão não é muito agradável, então vamos adicionar a ele uma textura. Baixem a textura abaixo e adicionem a pasta de texture (Botão Direito >> Import New Assets):

ground

Cliquem na imagem importada e em seguida no Inspector mude seu Texture Type de Sprite para Texture. Agora vamos criar mais uma pasta (Botão direito na Aba Project >> Create >> Folder). Vamos chamar esta pasta de material. Os materiais servem para aplicar a texture em objetos. Clique com o botão direito sobre a pasta material, vá em Create e adicione Material. Vamos chamar nosso material de “chao”.

 adicionando material - tutorial de unity 2d - jogos indie

No Inspector de nosso material “chao”, vá na opção select e escolha a textura ground.gif que importamos a pouco tempo atrás.

inspector material chao - jogos indie

Voltando ao objeto Chao na aba Hierarchy, na aba Inspector no componente Mesh Renderer, escolha o Element 0 sendo o material Chao.

selecinando material - jogos indie

Com isso nosso chão já está com uma forma mais parecida com a de um chão, todavia se você esticou o seu chão horizontalmente como falei antes, a textura ficou esticada. Então vamos mudar o Tiling de X, que é quantas vezes a textura do material chao irá repetir. Troque o valor de X = 1 para X = 5 e veja se ficou bom.

Tiling chao - jogos indie

Bom, quase tudo pronto, mas se você observar na Aba Game, seu chão esta meio escuro. Isso é por causa do Shader do nosso material. Então vamos troca-lo para Unlit >> Texture.

 shader - jogos indie

Nosso chão está praticamente pronto, porém se você clicar no play, verá que seu personagem ainda passa direito pelo chão sem colidir. Isso ocorre porque ainda não colocamos as opções de colisão no personagem e no chão. Vamos primeiro por no chão. Clique no objeto Chao (Hierarchy) e vamos adicionar um componente em Add Component >> Physics 2D >> Box Collider 2D.

box collider - jogos indie

Com um sistema de colisão adicionado ao chão, vamos adicionar agora ao Player, se não quisermos que ele seja um fantasma e passe direto pelo chão. Faremos o mesmo que fizemos com o objeto Chao. No objeto Player clique em Add Component >> Physics 2D, só que ao invés de adicionar um Box Collider 2D, vamos adicionar um Circle Collider 2D, para facilitar que nossos personagens andem por cenários que não sejam totalmente retos.

circle collider - jogos indie

Como pode observar na imagem acima o Circle Collider ficou bem maior que o personagem. Ou seja, tudo que fosse sólido iria bater nele, antes de encostar no Sprite do personagem. Sendo assim, bora mudar alguns atributos no Inspector. O primeiro dele é o Radius no Circle Collider 2D. Troque o valor por 0.1 e em Center troque o valor Y para -0.05. Assim o circulo de colisão deve ficar ao redor do personagem próximo a seus pés.  Ah e no componente Rigidbody 2D do Player, marque a opção Fixed Angle, para o nosso personagem não sair por ai rodando.

collider player - jogos indie

Com isto terminamos o que tínhamos para fazer hoje. Adicionamos nosso personagem ao jogo e aplicamos a física nele. Com esta parte do tutorial vocês devem gastar acho que uma hora, mas depois que dominarem, vão conseguir fazer isso em menos de 5 minutos.

Na próxima parte irei trabalhar com vocês as partes de scripts, ou seja, movimentar personagem e usar animação. Então espero que vocês já estejam acostumado com essas informações básicas para não terem dificuldade na próxima parte, beleza?

Parte 3 – Movimentação
Parte 1 – Conhecendo a Engine

Para quem quiser acompanhar o tutorial por vídeo, Bruno nosso parceiro fez esse favor a vocês:

Tutorial em Vídeo

Criador do Jogos Indie, amante de jogos, terror, música, anime e programação. Estudante de mestrado com foco em jogos na educação. Louco por Resident Evil e... sei lá, acho que é isso O.o

45 comments

  1. thomas disse:

    pode me ajuda no meu quando seleciono a imagem do heroi que vou edita não e sprite a opssão que tem e sprite (2D/uGUI)

  2. Não há problema Thomas, acho que é apenas diferença de versão. Você pode usar esse sprite (2D /uGUI).

    O 2D, significa que a sua imagem é um sprite em 2D
    E o uGUI são imagens usadas para montar as opções do jogo, score, barra de hp, e essas coisas que ficam na tela enquanto você joga.

    Essa opção ai cuida das duas ao mesmo tempo sem fazer diferenciação.

  3. Bruno disse:

    Fiz o segunda tutorial em video!! não sei se ficou bom, gostaria que me falasse! com sinceridade: ruim, medio, bom.

    • e aê Brunão, beleza?

      Vi o vídeo e eu dou como “médio”, por dois motivos que já vou explicar, para você melhorar nos próximos:

      1 – Como você mesmo disse no vídeo o primeiro ponto é o microfone. Sua voz ficou um pouco baixa em relação a zuada, isso atrapalha a entender um pouco, mas depois a pessoa se acostuma.

      2 – Tem uma coisa que acho que muita gente erra ao fazer um tutorial. É dizer para a pessoa fazer X, sem explicar o porquê. Você disse para a pessoa colocar o tamanho do raio tal e a posição em valor, mas não explicou o porquê que ele tem que fazer isso. Ou seja, a pessoa ai teria que descobrir sozinha. Então só no final acho que você pecou um pouquinho por não explicar o motivo de usar Fixed Angle ou por não mostrar o comportamento do collider ao alterar os seus valores.

      Fora esses dois pontos, o vídeo ficou bom, vou adiciona-lo ao post ^^

      • Bruno disse:

        Obrigado 🙂 vlw mesmo os outros tutorias vai demorar um pouco mais para sair, por que eu vou estudar primeiro os scripts e tbm enquanto eu n compro o microfone vai ser dificil tbm, vou continuar fazendo tutorias basicos ate comprar um headset novo e saber mais sobre os scripts!

  4. lucas guerra borges disse:

    Meu chao “Some” quando eu coloco o chao verificador,tem algum motivo especifico?Obs: Ele fica invisivel na ala #scene ,mas no game ele aparece

  5. Cláudio Castro disse:

    Olá, primeiramente parabéns pelos tutoriais, são muito bons e estão me ajudando muito.
    Só tenho uma dúvida, meu objeto “Chao” não aparece na aba game, porém, parece normal na aba scene. Eu fiz tudo como você mandou e tals, mas ele não aparece na aba game. Fiz o teste com o play pra ver se o personagem caia e realmente não caiu, mas o objeto em si não aparece no game. Poderia me ajudar ? Desde já, grato!

  6. Muito mas muito obrigado mesmo por nos ensinar! Valeu mesmo!

  7. rivastech disse:

    estou com o mesmo problema do colega, acho que por repetir alguns nomes, no caso o “chao”, para quem nunca usou o programa acabou ficando um pouco confuso. Posso madar o meu?

  8. Emerson silva disse:

    No meshi filter nao consigo colocar opção quad o que faço fica so em none(mesh)

  9. João Marques disse:

    Tem um pequeno ícone do lado direito do campo de Mesh, aonde ao clicar nele, você ira selecionar a opção Quad.

  10. Rafael Alves disse:

    OI tenho uma duvida,
    quando eu faço meu material chao e coloco o tiling x=5, 1/5 da imagem fica quadriculada e o restante fica esticado. tem como me ajudar

  11. Marshmallow disse:

    Ajudando muuuuuito esses tutoriais! Estou na terceira etapa no curso de Jogos Digitais e agora tenho que desenvolver um jogo na Unity, e tutoriais em forma de texto sempre são mais rápidos e melhores de aprender.
    Muito obrigada, vou começar a acompanhar o site. ♥

  12. carloswgama disse:

    o/// Valeu Marshmallow ^^

    Infelizmente onde eu moro não tem curso de Jogos Digitais, senão sem dúvida eu faria. Verei se consigo fazer algum a Distância o/

  13. Estou com o mesmo problema do Cláudio, só não entendi como o a câmera estaria atrás do chão o.O

    PS: tou usando a versão 5.1 do Unity

    • Ela pode estar atrás do chão se dependendo da posição do Z na aba Inspector.

      Senão me falha a memória a posição da camera em Z é 10. Basta clicar nela na aba Hierarchy e na aba Inspector no transform ver a sua posição do Z.^^

  14. Arlequina disse:

    Oi! A minha versão da Unity é 5.1 e não tenho a opção do “Fixed Angle” ou não estou a encontrando. Meu personagem está saindo rolando. UASHAUSHAUSH

    • e aê Arlequina, tudo joia?

      Então na versão 5.1 eles dividiram o Fixed Angle em X,Y e Z. Lá no rigidbody 2D tem algo chamado Constraints. Ao pedir para expandir, procure por Z (Freezing Rotation) e ele não mais vai ficar girando 😉

      Imagem abaixo para tu se encontrar melhor

  15. leidson disse:

    Quando eu vou colocar Quad no mesh o unity nao respondi mais
    ajuda ai pfv

  16. John Brandão disse:

    OI tenho essa mesma dúvida,
    quando eu faço meu material chao e coloco o tiling x=5, 1/5 da imagem fica quadriculada e o restante fica esticado, acredito que seja por conta de versão. como eu poderia fazer isso na versão 5

    • Neeeeste caso, bora arrumar o bug o/

      A questão é bem simples.Primeiro você vai clicar na textura lá na aba Project. Vai aparecer algumas informações da imagem na aba Inspector, não é mesmo? Então você vai trocar a opção Warp Mode de Clamp para Repeat. Com isso ele não vai esticar a imagem e sim repeti-la 😉

  17. John Brandão disse:

    MUITOOO OBRIGADO !

    pelo excelente conteúdo e pela atenção !

  18. Rafael disse:

    Oi, eu estava fazendo o negócio do slice quando vi que ele não queria abrir pode me ajudar por favor?

  19. lucas muradi disse:

    cara me ajuda pf ! ja e o segundo tutorial que sigo pra ver se consigo fazer meu personagem aparecer 🙁 tipo eu deixei as configuraçoes exatamente iguais as suas , usei o mesmo sprite do seu tutorial , e localizaçao e o tamanho do sprite estao nos conformes , a camera esta td certo tambem , mas mesmo assim ele nao aparece na aba “game”, oque eu faço ?

    • Verifica se o personagem está um pouco distante da camera.

      Se a posição da camera é Z = -10, então veja se o Personagem está em Z = 0 ou um valor maior que isso. Imagine que quando menor for a posição em z, mais perto da tela ele estará e quanto maior o valo, mais distante ele estará. (A menos que a camera esteja virado para outro lado é lógico)

  20. lucas muradi disse:

    muito obridado pela atencao carlos ! vlw !!

  21. Oi,queria antes agradecer por esse tutorial, sempre imaginei como era aplicar programação em um jogo e agora tenho uma ideia boa(Estou na parte 2 de cenário)e decidi aprender c# primeiro antes de voltar aqui(eu sei c e c++,mas acho que vai ficar mais fácil se aprender c# antes).E tenho tbm uma dúvida:em megaman x,por exemplo,ele pode quicar na parede,subindo o quanto quiser, e queria saber como vc faria pra essa dinâmica funcionar.Obrigado desde já.

    • Opa cara.

      Então, saber programação é realmente muito importante, até acho válido a pessoa primeiro pegar o básico de programação antes de vir pro tutorial, pios muitas dúvidas já serão resolvidas. Mas se você já tem o básico de programação, pode avançar sem medo. Nos tutorial básico eu não uso nada exclusivo da linguagem não, apenas orientação a objeto.

      Já quanto a essa sua dúvida sobre o quicar na parede, ao avançar nos tutoriais você vai ver algumas coisas como colliders e como pular. Basicamente o que eu faria é identificar no que eu estou colidindo através de uma layer e sem seguida liberar um comando para pular aplicando a força no sentido inverso a qual o personagem estivesse virado. ^^

      Parece complicado e talvez seja um pouco, mas com prática sai o/

  22. Lucas disse:

    Carlos, primeiramente muito obrigado pelo otimo conteudo… E gostaria de pedir uma informação eu fiz as etapas as quais voce indicou… Mas na hora que meu personagem e pra ficar em cima do chao ele passa direto, e so fica o circulo… Se puder me ajudar agradeço…

  23. Lucas disse:

    Carlos se estiver vendo isso já resolvi o problema… É que quando foi pra adicionar o rigidbody eu adicionei no sprite… e depois q vi q n tinha no player adicionei no mesmo… AI quando tava revisando novamente, me lembrei q tinha feito a etapa do rigidbody… Mas como n tava no player… Tinha que ta em algum lugar foi ai que vi o erro… De qualquer jeito, muito obrigado… Estarei acompanhando e ja agradeço, pela força que ta me dando…

  24. João Carlos disse:

    Oi, queria saber qual programa voce usou para fazer os sprites do personagem heroi ou voce pegou já pronto

  25. João Carlos disse:

    Baixei esse programinha, muito util para quem ta começando a criar os proprios sprites, ele ja te dá tudo!

  26. jiniriao disse:

    No meu não aparece a opção Fixed Angle O que eu faço

  27. miranda disse:

    bem na minha posição do… No Inspector de nosso material “chao”, vá na opção select e escolha a textura ground.gif que importamos a pouco tempo atrás. “nao aparece o a opcao difuse mas sim a stand que não a opção select qual eu posso utilizar ?

Deixe uma resposta

Parceiros

Steam Brasil LoboLimão Centro RPG Lab Indie
Mundo Gamer PodTerror

Anunciantes

Aglomerando - Agregador de conteúdo
Uêba - Os Melhores Links GeraLinks - Agregador de links Piadas Idiotas - São idiotas mas o faz rir Tedioso: Os melhores links LinkLog MeusLinks.com - Informação e conteúdo todos os dias para você! Agregador de Links - Madruga Links 4Blogs - Agregador de conteúdo Está no seu momento de descanso né? Entao clique aqui!