Implementar una animación de caminar para un personaje de sprite de 4 vías

Entorno de verificación

Windows

• Windows 11

Unity Editor

• 2020.3.25f1

Paquetes del sistema de entrada

• 1.2.0

Requisitos previos para esta sugerencia

Los siguientes ajustes están preconfigurados como requisito previo para la explicación de estos consejos.

• Presentación del paquete del sistema de entrada
• Alinear la cámara (2D) con el lienzo

Sitio de referencia

• Hacer un juego de rol con Unity, parte 1: Animación y operación de caminar

Elaboración de gráficos de marcha

En primer lugar, la animación de caminar se logra cambiando constantemente entre varias imágenes para que parezca que estás caminando. Por lo tanto, es necesario preparar tantas imágenes como sean necesarias para mostrar la dirección del movimiento y la marcha.

Para lograr la animación de caminar más simple, es común preparar la siguiente imagen. Este patrón también se utiliza en muchos juegos de rol.

En primer lugar, está dividido en cuatro líneas arriba y abajo, pero muestra la dirección en la que mirarás cuando camines. Desde arriba, es "abajo, izquierda, derecha, arriba".

Y para la izquierda y la derecha, será un movimiento de caminar en esa dirección. El flujo general es "medio, izquierda, centro, derecha, centro...".

El tamaño de una celda del personaje preparado esta vez es de 32x32px. Dado que está preparado para cuadrados de 3x4, el tamaño real del archivo de imagen es de 96x128px. Por cierto, no hay límite para el tamaño de un carácter, por lo que también es posible 32x48px o 64x64px.

* La imagen preparada en esta ocasión es Iwamaru-kun, que hice hace mucho tiempo. Puede usarlo como verificación de comportamiento.

Crear un proyecto y preparar imágenes

En el ejemplo que crearemos esta vez, asumiremos que puedes colocar un personaje y moverlo con las teclas del cursor en el teclado.

El primer paso es crear un nuevo proyecto 2D. Añade la imagen del personaje que preparaste para tu proyecto.

Selecciona la imagen que acabas de añadir y configura los siguientes ajustes en el inspector:

Después de configurar, haga clic en el botón "Aplicar" en la parte inferior.

A continuación, divide la imagen para que puedas cambiar entre ellas en Unity. Hay un botón "Editor de sprites" en el inspector, así que haz clic en él.

Cuando aparezca el cuadro de diálogo Editor de sprites, haga clic en el menú desplegable "Corte", establezca el "Tipo" en "Cuadrícula por tamaño de celda", Introduce un tamaño de píxel de 32 (dependiendo del tamaño de tu personaje) y haz clic en el botón Cortar.

Luego, la imagen se dividirá por el tamaño especificado. Si es confuso, presione la tecla Ctrl para ver una línea divisoria.

Después de dividir, haga clic en el botón "Aplicar" para cerrarlo.

Si hace clic en el botón derecho circular del archivo de imagen en el proyecto para expandirlo, puede ver que la imagen está dividida.

Creación de datos de animación

Suelte la imagen creada en la sección anterior en la vista.

Luego, en lugar de agregar la imagen, se mostrará un cuadro de diálogo para guardar. Esto guardará la configuración de la animación, por lo que, por el momento, guárdela como "< nombre de imagen >Animation.anim".

Esto creará dos archivos en el proyecto, con la imagen dividida en la vista y la imagen posterior en la vista.

Por cierto, si ejecutas el juego en este estado, creo que el personaje se animará por sí solo. Se trata de un estado en el que se cambian 12 imágenes y se muestran en cualquier momento.

Si el juego se está ejecutando, ciérralo y selecciona la pestaña Animaciones. De lo contrario, seleccione "Ventana -> Animación -> Animación" en el menú.

Ha seleccionado el objeto que ha creado de la jerarquía (en este caso, Iwamaru_0).

Ya hay una animación generada automáticamente, pero no la necesito, así que la eliminaré más tarde. Hay un menú desplegable llamado "IwamaruAnimation" que nombré esta vez, así que haz clic en él y selecciona "Crear nuevo clip".

A continuación, aparecerá el cuadro de diálogo de guardado. Como crearemos una animación del movimiento hacia abajo, lo dejaremos como "Iwamaru Down".

Seleccione "Iwamaru_0" de la jerarquía y cambie la animación a "IwamaruDown".

Esta vez, repetiremos la animación en "izquierda, centro, derecha, medio", por lo que estableceremos el número de muestras en 4. Luego, la línea de tiempo de la derecha se dividirá en 4 partes.

Suelte el Iwamaru_0, la imagen en la esquina superior izquierda del proyecto, en 0.0 en la línea de tiempo de animación.

A continuación, suelte el "Iwamaru_1" en la imagen central de arriba a 0.1 y 0.3.

Finalmente, suelte el "Iwamaru_2" en la imagen superior derecha a 0.2.

Cuando hayas terminado, haz clic en el botón de reproducción. Puede ver que el personaje de la vista camina y se anima. (Esta imagen de muestra es un poco difícil de entender, pero ...)

Siga los mismos pasos para crear animaciones a la izquierda, a la derecha y arriba.

El resultado final debería ser similar al de la imagen de abajo.

Asegúrese de que cada dirección se anime correctamente.

Configuración de la transición de animación

A continuación, haga doble clic en "Iwamaru_0.controller" del proyecto para abrirlo.

Luego se abrirá la pestaña Animador y verá una pantalla como la que se muestra en la figura. Esto se debe a que la animación que acaba de crear es ". controlador".

Haga clic con el botón derecho en un espacio vacío y seleccione Crear estado -> desde nuevo árbol de amigos.

Se creará un nuevo "Árbol de mezcla", haga clic derecho sobre él y seleccione "Establecer capa como estado predeterminado".

A continuación, la entrada examinará el árbol de mezclas. Esto significa que cuando la animación se mueva, el árbol de mezcla será lo primero en moverse.

Vamos a configurar animaciones en Blend Tree, por lo que eliminaremos todas las animaciones existentes.

Hay una pestaña de "Parámetros" a la izquierda, así que selecciónela y agregue "Flotar" desde el botón +.

Dado que hay dos parámetros, se denominan "X" e "Y" respectivamente.

Haga doble clic en el árbol de mezclas.

Seleccione el árbol de mezcla que aparece.

En el Inspector, cambia el tipo de mezcla a Diccionario simple 2D.

Establezca los parámetros en "X" e "Y".

En el botón + de Motion, selecciona "Añadir campo de movimiento" 4 veces.

El valor inicial puede ser diferente, pero debe parecerse a la figura.

Para los cuatro elementos de Motion que agregamos, estableceremos los .anims superior, inferior, izquierdo y derecho en el proyecto.

A continuación, especifique en qué dirección debe moverse cada animación.

Esto completa la configuración de la animación.

Finalmente, puede eliminar el archivo de animación generado automáticamente porque no lo necesita.

Control de movimiento

El movimiento se realiza presionando una tecla en el teclado, por lo que puede crear un script para controlarlo. Esta vez, el script se adjuntará al personaje, por lo que lo dejaremos como "CharacterMove".

El script tiene el siguiente aspecto:

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;
  }
}

La siguiente es una explicación de cada parte.

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

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

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

Start En primer lugar, obtenga el componente en el Animator método. Update Esto se usará en , así que téngalo de antemano.

Animator.SetFloat El método puede establecer un valor para el nombre del parámetro especificado. En la configuración de animación, establecemos qué animación usar de acuerdo con los valores X e Y. Si establece la dirección de los parámetros X e Y, la animación se ejecutará en esa dirección. En el estado inicial, queremos mirar hacia abajo, por lo que especificamos (X: 0, Y: -1). Por cierto, tenga en cuenta que los nombres de los parámetros distinguen entre mayúsculas y 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 En el método, comprobamos periódicamente el estado de entrada del teclado y lo procesamos cuando hay entrada.

GetMove El método está diseñado para devolver direcciones como entradas de teclado. El contenido de procesamiento se basa en lo que se describe en Sugerencias de entrada de teclado, por lo que lo omitiré.

Cuando haya entrada de teclado, Animator.SetFloat establezca la dirección del método. Esto permite la animación en la dirección en la que se movió. transform.Translate Después de eso, estamos moviendo el objeto con el método.

Una vez que haya creado el script, adjúntelo al objeto de carácter.

ejecución

Con esto se completa todo el proceso. Intenta ejecutar el juego y presionar las teclas del cursor en tu teclado para moverlo. Si el personaje se mueve en la dirección en la que lo presionaste y la animación de caminar se mueve mientras el gráfico cambia de dirección a la dirección en la que estás mirando, has terminado.