Apresentando a linha do tempo na Unity

[O tutorial possui cerca de 50 MB de imagens, incluindo GIFs animados]

Os desenvolvedores costumam usar cenas para contar parte do enredo do jogo ou cativar o jogador. Alguns jogos criam cenas animadas especialmente renderizadas com modelos altamente detalhados, enquanto outros usam modelos reais no jogo. Graças ao uso de modelos no jogo, você pode economizar muito dinheiro e tempo, porque não precisa criar novos modelos, plataformas e animações exclusivamente para cenas. Mas mesmo se você usar modelos prontos, isso não significa que você precisa sacrificar efeitos especiais ou drama! O Unity tem uma ferramenta poderosa para criar cenas emocionantes - Linha do tempo da unidade!

Neste tutorial, você conhecerá a Linha do tempo e aprenderá a criar cenas com animações e trocas de câmera.

Começando a trabalhar

Faça o download do projeto preliminar e do projeto finalizado aqui .

Abra o arquivo Starter Project e carregue a cena principal. Ela será nossa base. Há um herói nele, parado em uma torre e olhando o mundo:


Com sua ajuda, ele será capaz de pular da torre, virar-se, ir ao baú do tesouro e abri-lo com um chute. Com essas animações, a câmera também mudará de posição. Aqui está a aparência da cena final:

O que é a linha do tempo?

Neste tutorial, trabalharemos com a Linha do tempo do Unity - mas o que é a linha do tempo? Linha do tempo é um GameObject com um componente da linha do tempo que pode ser editado na janela Linha do tempo da Unity, que controla os quadros-chave da animação e os ciclos de vida dos objetos. Ao criar uma cena usando a Linha do tempo do Unity, definimos as teclas de animação e determinamos quando elas devem funcionar. Neste tutorial, também usaremos o AnimationController, que pode ser considerado um superconjunto de quadros-chave da animação.

Quando um personagem executa uma animação, como caminhar, cada vértice individual de um objeto deve indicar seu caminho. Neste tutorial, não estaremos envolvidos na criação de um modelo e animações de rigging - tudo já foi feito por nós. Mas é útil saber que, quando você define manualmente um quadro-chave para uma animação ou usa um AnimationController, eles são essencialmente a mesma coisa: a posição dos objetos em um determinado momento. A linha do tempo controla todos esses movimentos para criar a cena. Você entenderá tudo isso quando começar a entender a Linha do tempo da Unidade.

Porém, antes de mergulhar no estudo, é útil fornecer uma breve visão geral da janela Linha do tempo. Olhe para a imagem e leia as descrições sob os números:

1. Ativo da linha do tempo: esta é uma faixa que é mapeada para um GameObject na hierarquia. Ele armazena os quadros-chave associados a este GameObject, usados ​​para executar animações ou determinar se o GameObject está ativo.
2. GameObject associado: este é o GameObject ao qual a faixa está associada.
3. Quadro: este é o quadro da Linha do tempo definido atualmente. Quando precisamos alterar as animações, definimos os quadros-chave nos quadros inicial e final.
4. Grupo de faixas: aumentar a escala da cena também aumenta o número de faixas. Você pode organizar as faixas agrupando-as.
5. Botão Gravar: quando este botão está ativo, podemos alterar o quadro atual e definir a posição e / ou rotação do GameObject na cena. As alterações serão gravadas.
6. Ícone Curvas: clicar neste ícone abrirá a janela Curvas, na qual é possível ajustar os detalhes dos quadros-chave associados da animação para alterá-los da maneira desejada.

Não se preocupe se essa informação parecer muito complicada para você até agora - no processo de conclusão do tutorial, retornaremos a ela. Nesse estágio, é mais importante lembrar onde está a janela Linha do tempo e que, quando você seleciona a Linha do tempo do GameObject, pode acessar a janela Linha do tempo.

Luz, câmera, MOTOR!

Depois de carregar a cena principal, clique em Reproduzir. Você deve ver um herói parado no topo de uma torre:


Essa é a animação padrão especificada no controlador de animação. Neste tutorial, usaremos animações pré-criadas, para que você não precise se preocupar com a estrutura interna de modelos, animações ou controladores. Mas se você quiser entender esse processo, pode estudar o nosso tutorial Introdução à Animação do Unity .

Criando um GameObject do tipo Timeline

O primeiro passo é criar uma linha do tempo do GameObject. Crie um GameObject vazio clicando com o botão direito do mouse (em um Mac com o Comando pressionado) na janela Hierarquia e selecionando Criar Vazio . Então, adicionamos um GameObject à cena e selecionamos:


Sem remover a seleção do GameObject, abra o menu Janela e selecione Linha do tempo . A janela Linha do tempo é aberta. Clique no botão Criar para abrir a caixa de diálogo Salvar. Mude o nome do arquivo para Timeline e clique em Save:


Renomeie GameObject para Timeline clicando nele, pressionando a tecla F2 e digitando Timeline :


Criamos uma linha do tempo do GameObject que coordenará todas as animações e alterações de câmera na cena. Dentro do mecanismo, o Unity salvou um arquivo de ativo chamado Timeline.playable em disco. Na linha do tempo do GameObject, o Unity adicionou os componentes Playable Director e Animator .

O componente Playable Director contém um campo Playable anexado ao ativo Timeline que acabamos de salvar. O componente Animator adicionado pelo Unity em teoria deve permitir animar a Linha do tempo do GameObject, mas não faremos isso, portanto você pode simplesmente ignorá-lo.

Antes de prosseguir, quero arrastar a guia Linha do tempo para a parte inferior da tela. Isso nos permitirá abrir simultaneamente as janelas Cena e Linha do tempo:


Selecione GameObject Timeline e retorne à janela Timeline. No momento, temos uma faixa de animação para a linha do tempo do GameObject. Não precisamos disso, então você pode selecioná-lo e pressionar Excluir para excluir:

Animando o salto!

Agora estamos prontos para iniciar animações. Expanda GameObject Hero para ver GameObject Model . Selecione Linha do tempo do GameObject. Arraste GameObject Modelo na janela Timeline; isso abrirá o menu da faixa, então selecione Faixa de animação . Repita esta etapa para o GameObject Hero :

Nota: adicionamos Hero e Model para usar corretamente o espaço local zero. O GameObject Hero é um contêiner para o GameObject Model, que permite reproduzir animações sem afetar a posição em que são reproduzidas. Quando precisamos mover o herói, animaremos o GameObject Hero. Quando um personagem precisar ser animado - o que pode ser feito enquanto se move -, usaremos o Modelo GameObject. Sem esse relacionamento pai-filho, as animações reproduzidas pelo objeto Modelo substituirão incorretamente os parâmetros de movimento do objeto Herói, se você não o configurar como filho.

Gravar quadros-chave

Como a trilha do GameObject Hero representa a posição do herói, precisamos definir sua posição como o quadro-chave inicial.

Selecione a faixa Hero na janela Timeline e clique no botão Record (círculo vermelho) para iniciar a gravação. Selecione GameObject Hero na janela Hierarchy e defina sua posição X como -1 e, em seguida, defina imediatamente sua posição X como 0 .

Volte à janela Timeline e pressione o botão Record na trilha Hero para concluir a gravação . Então, adicionamos um quadro-chave para a posição inicial do herói:


Em nosso projeto, o herói já está na posição em que deve começar. No entanto, até mudarmos de posição, ela não será registrada ao gravar como quadro principal. Portanto, se você precisar definir um quadro-chave ao gravar para uma posição que já tenha um quadro-chave, mova-o e retorne-o para registrar.

A maneira mais fácil de fazer isso é definir a posição X do objeto como -1 em relação à sua posição atual e retornar o valor ao seu lugar. Neste tutorial, usaremos esse truque várias vezes.

Em seguida, precisamos que o herói espere 100 quadros antes de pular da torre. No momento, definimos apenas a posição inicial do herói, mas precisamos dar ao herói a mesma posição (ou seja, no topo da torre) após 100 quadros. Caso contrário, a Unidade começará imediatamente a interpolar o movimento.

Como antes, selecione GameObject Timeline , mas desta vez você precisa clicar no campo de quadro na parte superior da janela e inserir "100" . Então, movemos o quadro-chave para o quadro 100.

Pressione o botão Record para a faixa Hero. Selecione GameObject Hero e, no campo Transform da janela Inspector, defina sua posição X para -1 e, em seguida, retorne imediatamente para 0 . Pressione o botão Gravar novamente para parar a gravação.


Assim, configuramos o quadro-chave inicial do Hero e estamos prontos para continuar trabalhando com animações.

Adicionar clipes animados

Definindo dados de posição

Primeiro, precisamos definir os dados da posição.

Clique em GameObject Timeline para selecioná-lo. Na janela Linha do tempo, adicione Animação à trilha Modelo, clicando com o botão direito do mouse (em um Mac - clicando em Comando) na trilha Modelo e selecionando Adicionar do clipe de animação . Agora selecione a animação inativa :


Em seguida, animamos o salto do herói da torre, mas primeiro precisamos movê-lo para cima e por cima dos trilhos e depois para o chão.

Para fazer isso, primeiro selecione a janela Linha do tempo e depois vá para o quadro 138 . Pressione o botão Gravar na faixa Hero. Agora selecione GameObject Hero . No campo Transformar da janela Inspetor, defina a posição Y como 3.934 e a posição Z como 1.97 .

Volte à janela Timeline e vá para o quadro 176 . Selecione GameObject Hero novamente e defina a posição Y como 0 e a posição Z como 5.159 . Termine a gravação pressionando o botão Gravar :


Salve a cena e clique em Reproduzir para ver o resultado do seu trabalho!


Adicionar animações

Definimos essas posições, mas não as animações executadas com elas. Agora vamos fazer isso.

Com a janela Linha de tempo selecionada, clique com o botão direito do mouse (em um Mac, mantenha pressionada a tecla Command) na faixa Modelo e clique em Adicionar do clipe de animação e selecione Ir . Então você adiciona a animação Jump imediatamente após a animação Idle.

Arraste o lado direito da animação Jump para que fique no quadro 176 . Agora adicionaremos outro clipe de animação , mas desta vez adicionaremos a animação Land (não é necessário alterar o tamanho, basta adicioná-lo):


Salve a cena, clique em Reproduzir e veja o resultado!

Adicionar câmeras

É um pouco difícil seguir a ação após o salto do herói da torre, por isso é o momento certo para trabalhar com câmeras.

Na janela Hierarquia, renomeie MainCamera para Camera1 . Selecione Linha do tempo do GameObject. Arraste Camera1 para a janela Timeline, isso abrirá o menu de seleção de faixa; selecione Faixa de ativação . Arraste a pista Ativa da Camera1 para que ela termine no quadro 157 :

Dica: o marcador de quadro atual pode ser definido usando o campo de contador de quadros no Timeline Inspector. Se você definir o marcador no quadro no qual deseja arrastar a faixa, a faixa será anexada ao marcador do quadro.

A atividade ou inatividade do GameObject durante uma cena é controlada pela Faixa de Ativação . Nossa câmera principal agora será desligada após o quadro 157. Clique em Reproduzir e veja o resultado:


Agora vamos adicionar outra câmera, mas ela mostrará o herói depois de pular o parapeito da torre.

Na janela Hierarquia, selecione Câmera1 e duplique-a pressionando Control-D (Command-D no Mac). Renomeie a duplicata para Camera2 e desative -a.

Neste tutorial, usamos mais duas câmeras, então vamos criá-las agora, repetindo o mesmo algoritmo; renomeie-os para Camera3 e Camera4 e desconecte-os. Depois disso, todos os objetos do jogo Câmera, exceto Câmera1, devem ser desativados. Aqui está a aparência da hierarquia:


Agora vamos colocar o Camera2. Selecione Câmera2 e, no campo Transformar da janela Inspetor, defina a posição Y como 10,75 e a posição Z como 2,84 . Defina a rotação X para 79,5 :


Quanto à Camera1, selecione a janela Timeline e arraste o objeto Camera2 para dentro da Hierarquia; o menu de seleção de faixa aparece novamente, então selecione Faixa de ativação . Arraste a barra Ativa para que inicie imediatamente após a conclusão da ativação da Câmera1 (quadro 158). Arraste o lado direito da faixa Ativa da Câmera2 para que ela termine no quadro 216 .

Salve a cena, clique em Reproduzir e assista a troca de câmeras na sua cena.

É hora de chegar ao tesouro!

Nós olhamos para o peito

Agora que nosso herói caiu no chão, ele deve se virar para o baú do tesouro e começar a andar.

Selecione GameObject Timeline e defina o quadro 202 . Pressione o botão Gravar na faixa Hero para iniciar a gravação.

Selecione GameObject Hero e, no campo Transform da janela Inspector, defina Y Rotation como -1 e, imediatamente, altere o valor de volta para 0 para definir o quadro-chave inicial da rotação do GameObject Hero.

Quando terminar, selecione GameObject Timeline novamente e defina o quadro 216 . Selecione GameObject Hero novamente e, no campo Transform da janela Inspector, defina Y Rotation para -90 .

Nota: os quadros principais da posição e rotação são definidos independentemente um do outro. Anteriormente, quando definíamos a posição inicial do herói, o quadro-chave do turno não era salvo, portanto, precisamos definir um novo quadro antes de avançar para o turno desejado na direção do tesouro.

Além disso, o herói deve estar em um estado de espera neste momento. Portanto, adicione animação inativa à trilha de animação do modelo e faça com que ela dure até o quadro 216 :


Então, nosso herói chegou e está pronto para procurar um tesouro. É hora de ir até ele e abrir o baú!

Dica: Se a faixa Timeline ficar muito grande, é possível girar a roda do mouse para mudar a escala. Para mover para a esquerda ou direita, pressione e segure o botão do meio do mouse enquanto o move para a esquerda ou direita.

Estamos nos aproximando do tesouro

Selecione GameObject Timeline e defina o quadro 216 . Pressione o botão Gravar na faixa Hero para iniciar a gravação.

Selecione GameObject Hero e defina a posição X como -1 no campo Transform da janela Inspector e, em seguida, retorne a 0 novamente para definir o quadro-chave para a posição inicial. Em seguida, na Linha do tempo, selecione o quadro 361 na trilha Hero.

Retorne ao GameObject Hero e defina a posição X para -6 no campo Transform da janela Inspector. Volte à faixa Hero e termine a gravação.

Finalmente, dê ao objeto Model uma animação Walk , seguindo as mesmas etapas de antes, e depois estique-o para o quadro 361 :


Você pode perceber que o herói parece passar pelo tesouro, mas na verdade é um problema com a visualização da Linha do tempo, porque, como veremos em breve, o herói vai diretamente ao baú e para.

Para impedir que a Câmera2 siga todo o caminho do herói, agora podemos usar a Câmera3 para fotografar pelas costas do herói.

Para fazer isso, no menu principal da janela Hierarquia, selecione e arraste Camera3 para o GameObject Model , localizado dentro do GameObject Hero, para tornar a câmera sua filha.

Defina a posição Câmera3 (X: 0, Y: 2,06, Z: -2,5) . Dê uma volta (X: 0, Y: 0, Z: 0) . A hierarquia deve ficar assim:


Devido ao fato de que o Camera3 agora é filho do GameObject Model, ele repetirá todos os movimentos do GameObject Model, olhando-o por trás. No entanto, o Camera3 ainda precisa de uma faixa de ativação para que seja ativada no momento certo.

Arraste GameObject Camera3 para Timeline e selecione Activation Track , como fizemos com Camera1 e Camera2. Defina o quadro inicial da Câmera3 como o quadro final da Câmera2 e defina o quadro final como Câmera3 como 361 :


Agora salve a cena, clique em Reproduzir e veja como tudo acontece:


Já fizemos quase tudo! Agora o herói só precisa abrir o baú ... é claro, chutá-lo!

Abra o baú

Para a visualização final, usamos o Camera4, configurando-o da maneira que fizemos com o Camera1 e o Camera2.

Arraste Camera4 para a Linha do tempo e adicione Faixa de ativação . Defina o quadro inicial da Câmera4 no final da fase de atividade da Câmera3 e estenda-o para o quadro 555 . Deve ficar assim:


Adicione uma animação Kick . Clique com o botão direito do mouse (em um Mac, mantenha pressionada a tecla Command) na trilha Modelo. Selecione Adicionar animação do clipe e selecione Kick . Não mude a duração. A trilha Modelo deve ficar assim:


Precisamos abrir o baú, então agora vamos adicionar uma animação de sua capa. A configuração dessa animação é semelhante ao que fizemos antes.

Expanda GameObject ChestBottom na janela Hierarquia. Arraste GameObject ChestLid para Timeline e selecione Animation Track . Na Linha do tempo, defina o quadro 389 . Agora selecione a faixa ChestLid . Clique no botão Gravar .

Agora que a gravação está em andamento , selecione GameObject ChestLid na janela Hierarchy e defina a Posição X como -1 e depois retorne a 0 para definir a posição inicial. Na janela Linha do tempo, defina o quadro 555 . Finalmente, no campo Transformar da janela Inspetor, defina Y Position ChestLid como 6 . Pressione o botão Gravar na faixa novamente para finalizar a gravação.


Então, animamos a tampa do peito para que ele voe através da parede.

Agora você precisa colocar o Camera4 para que fique acima do peito quando a tampa se abrir. Repetiremos os mesmos passos novamente para a câmera anterior, portanto não descreverei cada ação em detalhes.

Dê ao objeto Camera4 uma posição (X: -9.00, Y: 5.4, Z: 5.18) . Defina Camera4 para girar (X: 90, Y: 0, Z: 0) .


Como em todas as outras câmeras adicionadas, a adição de uma animação torna a cena mais interessante; portanto, você deve ampliar a câmera depois de abrir o baú.

Selecione a janela Timeline . Arraste GameObject Camera4 para ele e crie uma faixa de animação . Defina a faixa 389 para acompanhar. Clique na faixa Camera4 e, em seguida, clique no botão Gravar . Selecione GameObject Camera4 . No campo Transformar da janela Inspetor, defina X Position como 0 e -9 novamente .

Na janela Linha do tempo , arraste a trilha de animação para o quadro 555 .

Por fim, defina a posição Y da câmera4 como 3,74 :


A cena finalmente acabou. Clique em Play e avalie-o!

Gerenciando com complexidade: agrupando trilhas

Foi uma curta animação de tudo com alguns "atores", por isso foi muito fácil rastrear objetos e faixas do jogo. Porém, ao criar cenas mais complexas com muitas partes e atores em movimento, torna-se muito difícil de controlar. É por isso que a encomenda é muito necessária. Embora a cena esteja pronta, vamos dedicar alguns minutos para organizá-la - no futuro você ainda se agradecerá por isso.

Uma maneira de organizar seu trabalho é agrupando faixas. Primeiro, clique com o botão direito do mouse nas faixas na janela Linha do tempo e selecione Grupo de faixas . Clique em Grupo de trilhas e no Inspetor altere seu nome para Ativações :


Repita esse processo e crie um grupo de trilhas chamado animações . A linha do tempo agora deve ficar assim:


Agora arraste todas as faixas com seções Ativas para o grupo Ativações e todo o resto para o grupo Animações . Agora você pode abrir e fechar cada grupo para a conveniência de trabalhar com eles:


Não esqueça de salvar seu trabalho. Sente-se na cadeira de seu diretor e se elogie - você terminou sua primeira linha do tempo.

Para onde ir a seguir

Se você perdeu algumas partes do tutorial, não esqueça que pode fazer o download da peça e do projeto finalizado aqui .

Nós trabalhamos duro e criamos uma cena usando animações de modelo, trocando câmeras e atualizando o ciclo de vida dos objetos, mas muito mais pode ser aprendido aqui. Um dos aspectos mais importantes relacionados à Linha do tempo é a criação de seus próprios scripts, nos quais você pode associar animações a códigos que podem ser executados com elas. Saiba mais sobre scripts aqui . Se você já se sentir confortável, tente adicionar um script à cena depois de abrir a arca do tesouro.

Se você estiver interessado em aprender mais sobre animações no Unity em geral, confira nosso ótimo tutorial Introdução à animação do Unity.

Para saber mais sobre a criação de modelos 3D e a janela Animação, confira a série detalhada de tutoriais para desenvolvedores do Unity apresentados aqui .

E a última - se você estiver interessado em criar jogos, poderá comprar o nosso livro Unity Games By Tutorial . Ele fala sobre a criação de quatro tipos de jogos a partir do zero, com uma descrição detalhada de cada estágio do processo.