Implemente uma animação de caminhada para um personagem de sprite de 4 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.

• Apresentando o pacote do sistema de entrada
• Alinhar a câmera (2D) com a tela

Site de referência

• Fazendo um RPG com Unity Parte 1 Walking Animation and Operation

Elaboração de gráficos de caminhada

Em primeiro lugar, a animação de caminhada é alcançada alternando constantemente entre várias imagens para fazer parecer que você está andando. Portanto, é necessário preparar quantas imagens forem necessárias para mostrar a direção do movimento e da caminhada.

Para conseguir a animação de caminhada mais simples, é comum preparar a imagem a seguir. Esse padrão também é usado em muitos RPGs.

Em primeiro lugar, ele é dividido em quatro linhas acima e abaixo, mas mostra a direção que você enfrentará quando caminhar. De cima, é "para baixo, esquerda, direita, para cima".

E para a esquerda e a direita, será um movimento de caminhada nessa direção. O fluxo geral é "meio, esquerda, meio, direita, meio...".

O tamanho de uma célula do caractere preparado desta vez é 32x32px. Uma vez que é preparado para quadrados 3x4, o tamanho real do arquivo de imagem é 96x128px. A propósito, não há limite para o tamanho de um caractere, então 32x48px ou 64x64px também é possível.

* A imagem preparada desta vez é Iwamaru-kun, que fiz há muito tempo. Você pode usá-lo como uma verificação de comportamento.

Criar um projeto e preparar imagens

No exemplo que criaremos desta vez, assumiremos que você pode colocar um caractere e movê-lo com as teclas do cursor no teclado.

O primeiro passo é criar um novo projeto 2D. Adicione a imagem do personagem que você preparou para o seu projeto.

Selecione a imagem que você acabou de adicionar e defina as seguintes configurações no inspetor:

Após a configuração, clique no botão "Aplicar" na parte inferior.

Em seguida, divida a imagem para que você possa alternar entre elas no Unity. Há um botão "Sprite Editor" no inspetor, então clique nele.

Quando a caixa de diálogo Sprite Editor aparecer, clique no menu suspenso "Fatia", defina o "Tipo" como "Grade por tamanho de célula", Insira um tamanho de pixel de 32 (dependendo do tamanho do seu personagem) e clique no botão Fatia.

Em seguida, a imagem será dividida pelo tamanho especificado. Se estiver confuso, pressione a tecla Ctrl para ver uma linha divisória.

Após a divisão, clique no botão "Aplicar" para fechá-lo.

Se você clicar no botão direito do círculo do arquivo de imagem no projeto para expandi-lo, poderá ver que a imagem está dividida.

Criando dados de animação

Solte a imagem criada na seção anterior no modo de exibição.

Em seguida, em vez de adicionar a imagem, uma caixa de diálogo de salvamento será exibida. Isso salvará as configurações de animação, portanto, por enquanto, salve-o como "< nome da imagem >Animation.anim".

Isso criará dois arquivos no projeto, com a imagem dividida na exibição e a imagem posterior na exibição.

Aliás, se você rodar o jogo nesse estado, acho que o personagem vai animar por conta própria. Este é um estado em que 12 imagens são alternadas e exibidas a qualquer momento.

Se o jogo estiver em execução, encerre-o e selecione a guia Animações. Caso contrário, selecione "Window -> Animation -> Animation" no menu.

Você selecionou o objeto criado na hierarquia (neste caso, Iwamaru_0).

Já existe uma animação gerada automaticamente, mas eu não preciso dela, então vou excluí-la mais tarde. Há um drop-down chamado "IwamaruAnimation" que eu nomeei desta vez, então clique nele e selecione "Criar novo clipe".

Em seguida, a caixa de diálogo Salvar aparecerá. Como vamos criar uma animação do movimento down, vamos deixá-lo como "Iwamaru Down".

Selecione "Iwamaru_0" na hierarquia e altere a animação para "IwamaruDown".

Desta vez, vamos repetir a animação em "esquerda, meio, direita, meio", então vamos definir o número de amostras para 4. Em seguida, a linha do tempo à direita será dividida em 4 partes.

Solte a Iwamaru_0, a imagem no canto superior esquerdo do projeto, em 0,0 na linha do tempo da animação.

Em seguida, solte o "Iwamaru_1" na imagem do meio acima para 0,1 e 0,3.

Finalmente, solte o "Iwamaru_2" na imagem superior direita para 0,2.

Quando terminar, clique no botão de reprodução. Você pode ver que o personagem na vista está andando e animando. (Esta imagem de exemplo é um pouco difícil de entender, mas...)

Siga as mesmas etapas para criar animações à esquerda, à direita e superiores.

O resultado final deve ser semelhante ao da imagem abaixo.

Certifique-se de que cada direção anima corretamente.

Configurações de transição de animação

Em seguida, clique duas vezes em "Iwamaru_0.controller" do projeto para abri-lo.

Em seguida, a guia Animador será aberta e você verá uma tela como a mostrada na figura. Isso porque a animação que você acabou de criar é ". controlador".

Clique com o botão direito do mouse em um espaço vazio e selecione Criar estado -> Da nova árvore de amigos.

Uma nova "Blend Tree" será criada, clique com o botão direito do mouse sobre ela e selecione "Set Layer as Default State".

A Entrada examinará a Blend Tree. Isso significa que, quando a animação se mover, a Blend Tree será a primeira coisa a se mover.

Vamos configurar animações no Blend Tree, então excluiremos todas as animações existentes.

Há uma guia "Parâmetros" à esquerda, então selecione-a e adicione "Float" no botão +.

Como existem dois parâmetros, eles são chamados de "X" e "Y", respectivamente.

Clique duas vezes na Blend Tree.

Selecione a Blend Tree que aparece.

No Inspetor, altere o tipo de mesclagem para 2D Simple Dictional.

Defina os parâmetros como "x" e "y".

No botão + em Movimento, selecione Adicionar Campo de Movimento 4 vezes.

O valor inicial pode ser diferente, mas deve se parecer com a figura.

Para os quatro itens de movimento que adicionamos, definiremos os .anims superior, inferior, esquerdo e direito no projeto.

Em seguida, especifique qual direção cada animação deve mover.

Isso conclui a configuração da animação.

Finalmente, você pode excluir o arquivo de animação gerado automaticamente porque não precisa dele.

Controle de movimento

O movimento é feito pressionando uma tecla no teclado, para que você possa criar um script para controlá-lo. Desta vez, o roteiro será anexado ao personagem, então vamos deixá-lo como "CharacterMove".

O script tem a seguinte aparência:

using UnityEngine;
using UnityEngine.InputSystem;

public class CharacterMove : MonoBehaviour
{
  // あらかじめ Animator コンポーネントを持っておくようにする
  private Animator _animator;

  // 最初のフレーム更新の前に開始が呼び出されます
  void Start()
  {
    // オブジェクトに紐付いている Animator を取得する
    _animator = GetComponent<Animator>();

    // 最初の向き (下) を設定する
    _animator.SetFloat("X", 0);
    _animator.SetFloat("Y", -1);
  }

  /// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
  void FixedUpdate()
  {
    // キーボードの入力方向を取得
    var move = GetMove();

    if (move != Vector2.zero)
    {
      // 入力されている場合はアニメーターに方向を設定
      _animator.SetFloat("X", move.x);
      _animator.SetFloat("Y", move.y);

      // 入力した方向に移動
      transform.Translate(move * 0.2f);
    }
  }

  /// <summary>キーボード入力による移動方向を取得します。</summary>
  /// <returns>キーボード入力による移動方向。</returns>
  private Vector2 GetMove()
  {
    Vector2 move = Vector2.zero;
    if (Keyboard.current.upArrowKey.isPressed)
    {
      move += new Vector2(0, 1);
    }
    if (Keyboard.current.downArrowKey.isPressed)
    {
      move += new Vector2(0, -1);
    }
    if (Keyboard.current.leftArrowKey.isPressed)
    {
      move += new Vector2(-1, 0);
    }
    if (Keyboard.current.rightArrowKey.isPressed)
    {
      move += new Vector2(1, 0);
    }

    // 入力した値がある場合は正規化して返す
    return move == Vector2.zero ? move : move.normalized;
  }
}

A seguir, uma explicação de cada parte.

// あらかじめ Animator コンポーネントを持っておくようにする
private Animator _animator;

// 最初のフレーム更新の前に開始が呼び出されます
void Start()
{
  // オブジェクトに紐付いている Animator を取得する
  _animator = GetComponent<Animator>();

  // 最初の向き (下) を設定する
  _animator.SetFloat("X", 0);
  _animator.SetFloat("Y", -1);
}

Start Primeiro, obtenha o Animator componente no método. Update Isso será usado no , então tenha com antecedência.

Animator.SetFloat O método pode definir um valor para o nome do parâmetro especificado. Nas configurações de animação, definimos qual animação usar de acordo com os valores X e Y. Se você definir a direção dos parâmetros X e Y, a animação será executada nessa direção. No estado inicial, queremos ficar virados para baixo, então especificamos (X: 0, Y: -1). A propósito, observe que os nomes de parâmetros diferenciam maiúsculas de minúsculas.

/// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
void FixedUpdate()
{
  // キーボードの入力方向を取得
  var move = GetMove();

  if (move != Vector2.zero)
  {
    // 入力されている場合はアニメーターに方向を設定
    _animator.SetFloat("X", move.x);
    _animator.SetFloat("Y", move.y);

    // 入力した方向に移動
    transform.Translate(move * 0.2f);
  }
}

FixedUpdate No método, verificamos periodicamente o status de entrada do teclado e o processamos quando há entrada.

GetMove O método é projetado para retornar direções como as entradas do teclado. O conteúdo de processamento é baseado no que está descrito em Dicas de entrada do teclado, então vou omiti-lo.

Quando houver entrada de teclado, Animator.SetFloat defina a direção para o método. Isso permite a animação na direção em que você se moveu. transform.Translate Depois disso, estamos movendo o objeto com o método.

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.