Implemente a animação de caminhada de personagens de sprite de 8 vias
Ambiente de verificação
- Windows
-
- Janelas 11
- Unity Editor
-
- 25.3.2020F1
- Pacotes do sistema de entrada
-
- 1.2.0
Pré-requisitos para esta dica
As configurações a seguir são pré-configuradas como um pré-requisito para a explicação dessas dicas.
Site de referência
Sobre a animação 4-Way Walking
Mostramos como fazer uma animação de caminhada a quatro em nossas dicas anteriores. Neste artigo, vamos explicar as 8 direções, mas a maioria dos passos são os mesmos da animação de caminhada de 4 vias, então só explicaremos as diferenças aqui.
Elaboração de gráficos de caminhada
Da última vez, preparamos gráficos para 4 direções, mas desta vez vamos preparar gráficos para 8 direções da seguinte maneira. "Inferior esquerdo", "Inferior direito", "Superior esquerdo" e "Superior direito" foram adicionados.
Quanto à ordem de orientação, parece que as 8 direções não são tão claramente determinadas em comparação com as 4 direções. No entanto, os seguintes formatos são relativamente comuns, então vamos prosseguir com esse arranjo desta vez.
| debaixo | canto inferior esquerdo |
| Esquerda | Canto inferior direito |
| Direita | Canto superior esquerdo |
| Início | Canto superior direito |
Criar um projeto e preparar imagens
Desta vez, vou tentar criar algo que possa colocar um personagem e movê-lo com as teclas do cursor no teclado. Como são 8 direções, se você se mover diagonalmente, os gráficos serão exibidos na orientação diagonal.
O primeiro passo é criar um novo projeto 2D. Adicione a imagem do personagem que você preparou para o seu projeto.
Selecione a imagem adicionada e defina as configurações do inspetor. Essa configuração é a mesma de 4 direções.
Divida a imagem no editor de sprite. O número de imagens aumentará, mas as tarefas serão as mesmas.
Tudo bem se a imagem no projeto for exibida da seguinte maneira.
Criando dados de animação
O que você faz aqui é o mesmo que a animação de caminhada de 4 vias. No final, tudo bem se você puder criar uma animação em 8 direções. Observe que os números na imagem estão fora de sincronia com o tempo nas quatro direções.
Imagem de| configuração do | nome do arquivo de animação |
|---|---|
| IwamaruDown | Iwamaru_0, Iwamaru_1, Iwamaru_2 Iwamaru_1 |
| IwamaruEsquerda | Iwamaru_6, Iwamaru_7, Iwamaru_8 Iwamaru_7 |
| IwamaruDireito | Iwamaru_12, Iwamaru_13, Iwamaru_14 Iwamaru_13 |
| IwamaruUp | Iwamaru_18, Iwamaru_19, Iwamaru_20 Iwamaru_19 |
| IwamaruLeftDown | Iwamaru_3, Iwamaru_4, Iwamaru_5 Iwamaru_4 |
| IwamaruDireitaDown | Iwamaru_9, Iwamaru_10, Iwamaru_11 Iwamaru_10 |
| IwamaruLeftUp | Iwamaru_15, Iwamaru_16, Iwamaru_17 Iwamaru_16 |
| IwamaruRightUp | Iwamaru_21, Iwamaru_22, Iwamaru_23 Iwamaru_22 |
Certifique-se de que cada direção anima corretamente.
Configurações de transição de animação
As configurações são as mesmas de quando está em 4 direções até o meio, então vou omiti-lo.
Depois de configurar a Blend Tree, você precisará criar 8 movimentos.
Vamos definir o .anim adicionado ao projeto para os 8 itens em movimento.
Especifique a direção de cada animação numericamente.
| Direção | X | Y |
|---|---|---|
| debaixo | 0 | -1 |
| Início | 0 | 1 |
| Esquerda | -1 | 0 |
| Direita | 1 | 0 |
| canto inferior esquerdo | -1 | -1 |
| Canto inferior direito | 1 | -1 |
| Canto superior esquerdo | -1 | 1 |
| Canto superior direito | 1 | 1 |
Isso conclui a configuração da animação.
Controle de movimento
O movimento é feito pressionando uma tecla no teclado, para que você possa criar um script para controlá-lo. O conteúdo deste script é exatamente o mesmo que o criado nas 4 direções, então por favor, consulte-o. O nome do script deve ser "CharacterMove".
Depois de criar o script, anexe-o ao objeto de caractere.
execução
Isso completa todo o processo. Tente executar o jogo e pressionar as teclas do cursor no teclado para movê-lo. Se o personagem se mover na direção que você pressionou, e a animação de caminhada se mover enquanto o gráfico muda de direção para a direção que você está enfrentando, você está pronto. Desta vez, ele suporta 8 direções, portanto, verifique se o gráfico também é aplicado diagonalmente quando você se move diagonalmente.