Curso de Unity 5.6Aula 4

Aula 4

Personagem pronto com texturas e animações

Nesta aula você troca o personagem da cena por um personagem pronto, com roupas e texturas, e faz ele usar as animações do jogo. Siga as telas do Unity 5.6, uma por vez.

Antes de começar

O que você vai fazer

Vai baixar um personagem pronto, importar no Unity e fazer ele andar, pular e se mover no lugar do personagem atual.

O que você precisa

O Unity 5.6.7f1 e o projeto da Aula 3 pronto, com a Cena1 funcionando com as plataformas e itens coletáveis.

Passo a passo

Parte 1

Baixando o personagem

Passos 1 a 10

  1. Passo 1 de 46

    Ponto de partida

    Hora de começar a Aula 3! Abra o Unity 5.6.7f1, abra o projeto onde você terminou a Aula 2 e confira se a sua Cena1 está assim. Na Hierarchy, que lista tudo o que existe na cena, aparecem o ThirdPersonController, a Directional Light, o FreeLookCameraRig e o Cenário, que guarda o chão, a barreira, a lava, as plataformas e os itens. Na Scene, dá para ver o chão de grama, a lava e as plataformas com o item de madeira. Lá embaixo, no painel Project, a pasta Assets tem as pastas Materiais, Prefabs, Scripts, Standard Assets e Texturas, além da Cena1. Se a sua tela está igual, pode seguir.

    Ver como ficaEsconder
    Unity com a Cena1 aberta: na Hierarchy, ThirdPersonController, Directional Light, FreeLookCameraRig e Cenário; na Scene, o chão de grama, a lava e as plataformas; no painel Project, a pasta Assets com Materiais, Prefabs, Scripts, Standard Assets, Texturas e a Cena1. Molduras e setas vermelhas numeradas destacam a lista da Hierarchy (1) e as pastas do Assets (2)

  2. Passo 2 de 46

    Abrir o Mixamo

    Agora vamos buscar o personagem! Abra o navegador e digite mixamo.com na barra de endereço. Se o site pedir, entre com o seu Adobe ID. Quando a página abrir, clique na aba Characters, que quer dizer "personagens" em inglês.

    Ver como ficaEsconder
    Site mixamo.com aberto no navegador, com a barra de endereço e a aba Characters. Molduras e setas vermelhas numeradas destacam a barra de endereço (1) e a aba Characters (2)

  3. Passo 3 de 46

    Ver a lista de personagens

    Pronto, a aba Characters abriu! À esquerda fica a lista com os personagens do Mixamo. À direita aparece o personagem que está selecionado no momento, o DEFAULT CHARACTER, um boneco vermelho de teste.

    Ver como ficaEsconder
    Aba Characters do Mixamo: à esquerda a lista de personagens e à direita o DEFAULT CHARACTER, um boneco vermelho em pose de T. Moldura e seta vermelhas destacam a lista de personagens

  4. Passo 4 de 46

    Escolher o Remy

    Procure o Remy, o rapaz de camiseta cinza e bermuda. Ele está na segunda linha da lista, no primeiro quadradinho. Clique nele.

    Ver como ficaEsconder
    Lista de personagens do Mixamo com o Remy, de camiseta cinza e bermuda, na segunda linha. Moldura e seta vermelhas destacam o Remy

  5. Passo 5 de 46

    Remy selecionado

    Isso! O nome REMY apareceu no topo e o personagem ficou no centro, de braços abertos. Se a sua tela está igual, pode seguir.

    Ver como ficaEsconder
    Mixamo com o Remy selecionado: o nome REMY no topo e o personagem no centro, de braços abertos. Moldura e seta vermelhas destacam o nome REMY

  6. Passo 6 de 46

    Achar o botão Download

    Do lado direito da tela, procure o botão laranja DOWNLOAD e clique nele.

    Ver como ficaEsconder
    Lado direito do Mixamo com os botões DOWNLOAD, AERO UPDATE, UPLOAD CHARACTER e FIND ANIMATIONS. Moldura e seta vermelhas destacam o botão laranja DOWNLOAD

  7. Passo 7 de 46

    Janela de download

    Abriu a janela DOWNLOAD SETTINGS, as configurações do download. No campo Format, clique na setinha para abrir a lista de formatos. Repare que o campo Pose já está em T-pose, pode deixar assim.

    Ver como ficaEsconder
    Janela DOWNLOAD SETTINGS do Mixamo com o campo Format em FBX Binary(.fbx) e o campo Pose em T-pose. Molduras e setas vermelhas numeradas destacam o campo Format (1) e o campo Pose (2)

  8. Passo 8 de 46

    Escolher o formato

    Na lista que abriu, clique em FBX For Unity(.Fbx), o formato feito para o Unity. Depois, clique no botão laranja DOWNLOAD da janela.

    Ver como ficaEsconder
    Lista de formatos aberta no Mixamo com a opção FBX For Unity(.Fbx) selecionada e o botão laranja DOWNLOAD ao lado. Molduras e setas vermelhas numeradas destacam a opção FBX For Unity (1) e o botão DOWNLOAD (2)

  9. Passo 9 de 46

    Preparando o download

    O Mixamo está preparando o arquivo. Quando aparecer Preparing download. Just a moment..., que quer dizer "preparando o download, só um momento", é só esperar um pouquinho.

    Ver como ficaEsconder
    Janela do Mixamo com uma barra laranja e a mensagem Preparing download. Just a moment... Moldura e seta vermelhas destacam a mensagem

  10. Passo 10 de 46

    Salvar o arquivo

    O Windows abriu a janela Salvar como, já na pasta Downloads. Confira se o campo Nome está com Remy.fbx e clique em Salvar.

    Ver como ficaEsconder
    Janela Salvar como do Windows, na pasta Downloads, com o nome Remy.fbx e o tipo Arquivo FBX. Molduras e setas vermelhas numeradas destacam o campo Nome (1) e o botão Salvar (2)

Parte 2

Importando o personagem no Unity

Passos 11 a 15

  1. Passo 11 de 46

    Criar uma pasta

    Vamos guardar o personagem numa pasta própria, para o projeto continuar organizado! No Unity, no painel Project, abra a pasta Assets e clique com o botão direito num espaço vazio. No menu, vá em Create e depois clique em Folder, que quer dizer "pasta".

    Ver como ficaEsconder
    Menu aberto no painel Project do Unity, com Create e a opção Folder. Molduras e setas vermelhas numeradas destacam Create (1) e Folder (2)

  2. Passo 12 de 46

    Dar nome à pasta

    A pasta nova apareceu com o nome em azul, esperando você escrever. Digite Personagens e aperte Enter.

    Ver como ficaEsconder
    Painel Project do Unity com uma pasta nova, com o nome em azul, entre as pastas Materiais e Prefabs. Moldura e seta vermelhas destacam a pasta

  3. Passo 13 de 46

    Arrastar o arquivo para o Unity

    Abra a pasta do Windows onde o Remy.fbx foi salvo e deixe a janela ao lado do Unity. No Unity, clique na pasta Personagens para abrir. Ela está vazia, e o painel mostra This folder is empty. Agora clique no Remy.fbx, segure o botão do mouse, arraste até o painel da pasta Personagens e solte.

    Ver como ficaEsconder
    Janela do Windows com o arquivo Remy.fbx ao lado do Unity, com a pasta Personagens aberta e vazia. Molduras e setas vermelhas numeradas destacam o arquivo Remy.fbx (1) e o painel da pasta Personagens (2)

  4. Passo 14 de 46

    Arquivo importado

    O Unity importou o arquivo! Dentro da pasta Personagens apareceram a pasta Materials, a pasta Remy.fbm e o Remy, que é o modelo do personagem.

    Ver como ficaEsconder
    Pasta Personagens no Unity com a pasta Materials, a pasta Remy.fbm e o modelo Remy. Moldura e seta vermelhas destacam o Remy

  5. Passo 15 de 46

    Ver o que tem dentro do Remy

    Para ver o que tem dentro do Remy, clique na setinha que fica ao lado dele. Ele abre e mostra as partes do personagem: Body, Bottoms, Eyelashes, Eyes, Hair, Shoes e Tops, além do RemyAvatar lá no final.

    Ver como ficaEsconder
    Remy expandido na pasta Personagens, mostrando Body, Bottoms, Eyelashes, Eyes, Hair, Shoes, Tops e o RemyAvatar. Moldura e seta vermelhas destacam a setinha ao lado do Remy

Parte 3

Transformando o Remy em Humanoid

Passos 16 a 20

  1. Passo 16 de 46

    Abrir a aba Rig

    Com o Remy selecionado, olhe a janela Inspector, à direita. Ela mostra o Remy Import Settings, as configurações de importação dele. Clique na aba Rig, que cuida do esqueleto do personagem. Repare que o Animation Type está em Generic.

    Ver como ficaEsconder
    Inspector do Unity com o Remy Import Settings, abas Model, Rig e Animations, e o Animation Type em Generic. Moldura e seta vermelhas destacam a aba Rig

  2. Passo 17 de 46

    Escolher Humanoid

    Clique no campo Animation Type para abrir a lista com None, Legacy, Generic e Humanoid. Escolha Humanoid, o tipo de esqueleto para personagens com corpo de gente, com braços e pernas.

    Ver como ficaEsconder
    Lista do campo Animation Type aberta no Inspector, com as opções None, Legacy, Generic e Humanoid. Moldura e seta vermelhas destacam a opção Humanoid

  3. Passo 18 de 46

    Clicar em Apply

    O Animation Type agora está em Humanoid, e o botão Apply ficou ativo. Clique em Apply para o Unity aplicar a mudança.

    Ver como ficaEsconder
    Inspector com o Animation Type em Humanoid e o botão Apply ativo. Moldura e seta vermelhas destacam o botão Apply

  4. Passo 19 de 46

    Aviso do mapa de normais

    Depois do Apply, o Unity mostra um aviso: A Material is using the texture as a normal map, que quer dizer "um material está usando a textura como mapa de normais". Na lista aparecem os arquivos Remy_Body_Normal.png, Remy_Hair_Normal.png, Remy_Bottom_Normal.png, Remy_Top_Normal.png e Remy_Shoes_Normal.png. Clique em Fix now, que quer dizer "arrumar agora", e o Unity ajusta tudo sozinho.

    Ver como ficaEsconder
    Janela de aviso do Unity dizendo que um material usa a textura como mapa de normais, com a lista dos arquivos Remy_Body_Normal, Remy_Hair_Normal, Remy_Bottom_Normal, Remy_Top_Normal e Remy_Shoes_Normal, e os botões Fix now e Ignore. Moldura e seta vermelhas destacam o botão Fix now

  5. Passo 20 de 46

    Humanoid aplicado

    Pronto! O botão Apply ficou cinza, o que quer dizer que a mudança foi aplicada. O Animation Type está em Humanoid, e ao lado do botão Configure... apareceu um sinal de certo, mostrando que o Unity montou o Avatar do personagem com sucesso.

    Ver como ficaEsconder
    Inspector com o Animation Type em Humanoid, o botão Apply cinza e um sinal de certo ao lado do botão Configure. Moldura e seta vermelhas destacam o sinal de certo e o botão Configure

Parte 4

Ajustando o tamanho do Remy

Passos 21 a 35

  1. Passo 21 de 46

    Colocar o Remy na Hierarchy

    Hora de ver o Remy no seu mundo! No painel Project, clique no Remy, aquele com a miniatura do personagem, e, segurando o botão do mouse, arraste até o espaço vazio da Hierarchy. Solte o botão sem ficar em cima do nome de outro objeto, senão o Remy ficaria guardado dentro dele. Pronto: o Remy entra na lista, logo abaixo do Cenário.

    Ver como ficaEsconder
    Painel Hierarchy com o Remy no fim da lista, logo abaixo do Cenário, e painel Project com a pasta Personagens aberta e o Remy selecionado. Molduras e selos vermelhos numerados destacam o Remy no Project (1) e o Remy na Hierarchy (2)

  2. Passo 22 de 46

    Selecionar o Remy

    Agora clique no nome Remy, na Hierarchy. A linha dele fica com o fundo cinza, e isso mostra que ele está selecionado, ou seja, é o objeto que o Unity está "segurando" agora. Na Scene, por enquanto aparece só a lava, porque a visão está olhando para outro lugar.

    Ver como ficaEsconder
    Painel Hierarchy com o Remy selecionado, de fundo cinza, no fim da lista, e a Scene mostrando só a lava. Moldura e seta vermelhas destacam o Remy

  3. Passo 23 de 46

    Achar o Remy na Scene

    Com o Remy selecionado, passe o mouse por cima da Scene e aperte a tecla F. O Unity leva a visão até o objeto selecionado, e o Remy aparece com uma borda laranja. Ele está de braços abertos, na pose chamada T-Pose, a mesma que escolhemos lá no Mixamo.

    Ver como ficaEsconder
    Scene com o Remy selecionado, de braços abertos, sobre o chão de grama, com borda laranja. Moldura e seta vermelhas destacam o Remy

  4. Passo 24 de 46

    Os pés afundados

    Olhando o Remy de perto, repare nos pés: eles ficam enfiados no chão. Isso acontece porque ele nasceu na altura Y 0, e o topo do chão fica em Y 0.5, meio metro mais alto.

    Ver como ficaEsconder
    Remy visto de perto, de braços abertos, com as pernas enfiadas no chão de grama. Moldura e seta vermelhas destacam as pernas e os pés

  5. Passo 25 de 46

    Valores do Remy

    Com o Remy selecionado, olhe o Inspector. Na linha Position, os campos X, Y e Z estão em 0, e por isso ele nasceu no centro do mundo, com os pés afundados. A Rotation está em 0, 0, 0 e a Scale em 1, 1, 1. Logo abaixo, o componente Animator já mostra o RemyAvatar, o avatar que o Unity montou quando você escolheu Humanoid.

    Ver como ficaEsconder
    Inspector do Remy com Position 0, 0, 0, Rotation 0, 0, 0 e Scale 1, 1, 1, e o componente Animator com o Avatar RemyAvatar. Moldura e seta vermelhas destacam a linha Position

  6. Passo 26 de 46

    Remy ao lado do Ethan

    Vamos comparar o tamanho dos dois! O personagem atual do jogo se chama Ethan e está em Position 0, 0.5, 44. Para colocar o Remy ao lado dele, no Inspector, na linha Position, clique no campo X, apague o número, digite 1.5 e aperte Enter. Faça o mesmo no campo Y, com 0.5, e no campo Z, com 44. O 0.5 apoia o Remy no topo do chão, e o 44 deixa ele na mesma linha do Ethan, só um pouquinho para o lado. Olha só: na Scene, o Remy aparece bem maior que o Ethan, lá do lado esquerdo.

    Ver como ficaEsconder
    Scene com o Remy, grande e com borda laranja, ao lado do Ethan, bem menor, e Inspector do Remy com Position 1.5, 0.5 e 44. Molduras e selos vermelhos numerados destacam os campos X (1), Y (2) e Z (3) da linha Position

  7. Passo 27 de 46

    Selecionar o ThirdPersonController

    Agora vamos olhar o Ethan de perto. Na Hierarchy, clique em ThirdPersonController. Na Scene, o Ethan ganha uma borda laranja e uma cápsula verde em volta, que mostra o espaço que ele ocupa para o Unity na hora de esbarrar nas coisas. Do lado dele, o Remy parece um gigante!

    Ver como ficaEsconder
    Hierarchy com o ThirdPersonController selecionado e, na Scene, o Ethan pequeno, com borda laranja e cápsula verde, ao lado do Remy, bem maior. Moldura e seta vermelhas destacam o ThirdPersonController na Hierarchy

  8. Passo 28 de 46

    Abrir o EthanBody

    Clique na setinha ao lado do ThirdPersonController para abrir a lista de partes dele. Aparecem o EthanBody, o EthanGlasses e o EthanSkeleton. Clique em EthanBody, que é o corpo do Ethan.

    Ver como ficaEsconder
    Hierarchy com o ThirdPersonController aberto, mostrando EthanBody, EthanGlasses e EthanSkeleton, e o EthanBody selecionado. Moldura e seta vermelhas destacam o EthanBody

  9. Passo 29 de 46

    Medir o Ethan

    No Inspector, o EthanBody mostra o Skinned Mesh Renderer, o componente que desenha o corpo. Em Bounds, que é uma caixa invisível em volta do corpo, a linha Extents mostra a metade do tamanho dessa caixa em cada direção. O maior valor é 0.8023984, e dobrando dá uns 1,6 metro, porque no Unity 1 unidade equivale a 1 metro. Essa é a medida do Ethan.

    Ver como ficaEsconder
    Inspector do EthanBody com o Skinned Mesh Renderer e, em Bounds, Extents X 0.8023984, Y 0.23827 e Z 0.5723474. Moldura e seta vermelhas destacam a linha Extents

  10. Passo 30 de 46

    Abrir o Body do Remy

    Agora vamos medir o Remy do mesmo jeito. Na Hierarchy, clique na setinha ao lado do Remy para abrir a lista de partes dele e clique em Body, o corpo do Remy.

    Ver como ficaEsconder
    Hierarchy com o Remy aberto, mostrando Body, Bottoms, Eyelashes, Eyes, Hair, mixamorig:Hips, Shoes e Tops, e o Body selecionado. Moldura e seta vermelhas destacam o Body

  11. Passo 31 de 46

    Medir o Remy

    No Inspector, o Body do Remy também tem o Skinned Mesh Renderer. Olhe de novo a linha Extents, em Bounds: o maior valor é 1.946991. Dobrando, dá uns 3,9 metros, mais que o dobro dos 1,6 metro do Ethan.

    Ver como ficaEsconder
    Inspector do Body do Remy com o Skinned Mesh Renderer e, em Bounds, Extents X 1.946991, Y 1.935097 e Z 0.5158645. Moldura e seta vermelhas destacam a linha Extents

  12. Passo 32 de 46

    Os dois lado a lado

    Veja os dois lado a lado, na Scene. O Remy, com a borda laranja, é bem mais alto que o Ethan, que aparece pequeno ao lado dele. Os números de Extents que você acabou de ver confirmam o que os olhos já mostravam.

    Ver como ficaEsconder
    Scene com o Remy, grande e com borda laranja, e o Ethan, bem menor, ao lado dele, vistos de frente. Moldura e seta vermelhas destacam o Ethan

  13. Passo 33 de 46

    Selecionar o Remy no Project

    Na aba Project, dentro da pasta Personagens, clique no Remy para selecioná-lo.

    Ver como ficaEsconder
    Aba Project com a pasta Personagens aberta e o Remy selecionado, com destaque azul. Moldura e seta vermelhas destacam o Remy

  14. Passo 34 de 46

    Ajustar o Scale Factor

    No Inspector, no campo Scale Factor, digite o valor 0.4. É esse número que vai diminuir o tamanho do Remy.

    Ver como ficaEsconder
    Inspector Remy Import Settings, aba Model, com o valor 0.4 digitado no campo Scale Factor. Moldura e seta vermelhas destacam o campo

  15. Passo 35 de 46

    Comparar os tamanhos

    Agora sim! O Remy, à esquerda, ficou com uma altura bem parecida com a do Ethan, à direita. Dá para comparar os dois de perto.

    Ver como ficaEsconder
    Scene com o Remy, à esquerda, e o Ethan, à direita, quase da mesma altura. Uma moldura vermelha envolve cada personagem

Parte 5

Colocando o Remy no lugar do Ethan

Passos 36 a 43

  1. Passo 36 de 46

    Arrastar o Remy para o ThirdPersonController

    Na Hierarchy, clique no Remy e segure. Depois arraste até o ThirdPersonController e solte quando a linha dele ficar com a moldura azul.

    Ver como ficaEsconder
    Hierarchy com o Remy selecionado e o ThirdPersonController com moldura azul, indicando onde soltar. Selo 1 no Remy e selo 2 com seta no ThirdPersonController

  2. Passo 37 de 46

    Remy dentro do ThirdPersonController

    Olha só: o Remy agora aparece mais para a direita, dentro do ThirdPersonController, junto com o EthanBody, o EthanGlasses e o EthanSkeleton. Ele virou filho do controlador.

    Ver como ficaEsconder
    Hierarchy com o Remy dentro do ThirdPersonController, depois do EthanSkeleton, e com as partes dele abertas. Moldura e seta vermelhas destacam o Remy

  3. Passo 38 de 46

    Valores do Remy como filho

    Com o Remy selecionado, o Inspector mostra Position 0, 0, 0, Rotation 0, 0, 0 e Scale 1, 1, 1. Por ser filho do ThirdPersonController, ele já ficou no mesmo lugar do Ethan.

    Ver como ficaEsconder
    Scene com o Remy selecionado, com borda laranja, e o Inspector do Remy com Position 0, 0, 0, Rotation 0, 0, 0 e Scale 1, 1, 1. Moldura e seta vermelhas destacam Position e Rotation

  4. Passo 39 de 46

    Selecionar o EthanBody

    Hora de esconder o Ethan. Na Hierarchy, clique em EthanBody.

    Ver como ficaEsconder
    Hierarchy com o EthanBody selecionado, dentro do ThirdPersonController. Moldura e seta vermelhas destacam o EthanBody

  5. Passo 40 de 46

    Desligar o EthanBody

    No Inspector, no alto, desmarque a caixinha ao lado do nome EthanBody.

    Ver como ficaEsconder
    Inspector do EthanBody com a caixinha ao lado do nome, no alto. Moldura e seta vermelhas destacam a caixinha

  6. Passo 41 de 46

    Selecionar o EthanGlasses

    Repare que o EthanBody ficou com o nome cinza na Hierarchy: ele está desligado. Agora clique em EthanGlasses, o óculos do Ethan.

    Ver como ficaEsconder
    Hierarchy com o EthanBody em cinza e o EthanGlasses selecionado. Moldura e seta vermelhas destacam o EthanGlasses

  7. Passo 42 de 46

    Desligar o EthanGlasses

    Faça o mesmo: no Inspector, desmarque a caixinha ao lado do nome EthanGlasses.

    Ver como ficaEsconder
    Inspector do EthanGlasses com a caixinha ao lado do nome, no alto. Moldura e seta vermelhas destacam a caixinha

  8. Passo 43 de 46

    Voltar ao ThirdPersonController

    Pronto: EthanBody e EthanGlasses estão cinza, desligados. Agora clique no ThirdPersonController.

    Ver como ficaEsconder
    Hierarchy com o ThirdPersonController selecionado e as linhas EthanBody e EthanGlasses em cinza. Moldura e seta vermelhas destacam o ThirdPersonController

Parte 6

Trocando o Avatar

Passos 44 a 46

  1. Passo 44 de 46

    Ver o Animator

    No Inspector, olhe o componente Animator. O campo Avatar ainda mostra EthanAvatar. Clique no círculo pequeno no fim desse campo para escolher outro.

    Ver como ficaEsconder
    Inspector do ThirdPersonController com o Animator, Controller ThirdPersonAnimatorController e Avatar EthanAvatar. Moldura e seta vermelhas destacam o círculo ao lado do campo Avatar

  2. Passo 45 de 46

    Escolher o RemyAvatar

    Na janela Select Avatar, clique em RemyAvatar, que fica no fim da lista.

    Ver como ficaEsconder
    Janela Select Avatar aberta sobre o Inspector, com a lista de avatares e o RemyAvatar selecionado no fim. Moldura e seta vermelhas destacam o RemyAvatar

  3. Passo 46 de 46

    Testar com o Play

    Aperte o botão Play. Na aba Game, o Remy aparece em pé no cenário, no lugar do Ethan, com a altura certa. Deu certo!

    Ver como ficaEsconder
    Aba Game com o jogo em Play: o Remy em pé na grama, de costas, com as plataformas de pedra sobre a lava à frente