Implementeu una animació a peu per a un personatge de sprite de 4 vies

Entorn de verificació

Windows

• Finestres 11

Editor d'unitat

• 25.3.2020

Paquets del sistema d'entrada

• 1.2.0

Requisits previs per a aquest consell

Els següents paràmetres estan preconfigurats com a requisit previ per a l'explicació d'aquests consells.

• Presentació del paquet del sistema d'entrada
• Alinear la càmera (2D) amb el llenç

Lloc de referència

• Fer un joc de rol amb Unity Part 1 Walking Animation and Operation

Elaboració d'gràfics per caminar

En primer lloc, l'animació caminant s'aconsegueix canviant constantment entre diverses imatges perquè sembli que camines. Per tant, cal preparar tantes imatges com siguin necessàries per mostrar la direcció del moviment i la marxa.

Per tal d'aconseguir l'animació de caminar més senzilla, és habitual preparar la següent imatge. Aquest patró també s'utilitza en molts jocs de rol.

En primer lloc, es divideix en quatre línies per sobre i per sota, però mostra la direcció a la qual t'enfrontaràs quan caminis. Des de dalt, és "avall, esquerra, dreta, amunt".

I per a l'esquerra i la dreta, serà un moviment de marxa en aquesta direcció. El flux general és "mig, esquerra, mig, dreta, mig...".

La mida d'una cel·la del personatge preparada aquesta vegada és de 32x32px. Com que està preparat per a quadrats de 3x4, la mida real del fitxer d'imatge és de 96x128px. Per cert, no hi ha límit en la mida d'un caràcter, de manera que també és possible 32x48px o 64x64px.

* La imatge preparada aquesta vegada és Iwamaru-kun, que vaig fer fa molt de temps. Podeu utilitzar-lo com a verificació del comportament.

Crear un projecte i preparar imatges

A la mostra que crearem aquest temps, suposarem que podeu col·locar un personatge i moure'l amb les tecles del cursor del teclat.

El primer pas és crear un nou projecte 2D. Afegiu la imatge de personatge que heu preparat per al vostre projecte.

Seleccioneu la imatge que acabeu d'afegir i configureu els paràmetres següents a l'inspector:

Després de configurar-lo, feu clic al botó "Aplica" a la part inferior.

A continuació, dividiu la imatge perquè pugueu canviar entre elles a Unity. Hi ha un botó "Editor de personatges" a l'inspector, així que feu-hi clic.

Quan aparegui el diàleg Editor de personatges, feu clic al menú desplegable "Slice", configureu el "Tipus" a "Graella per mida de cel·la", Introdueix una mida de píxel de 32 (en funció de la mida del personatge) i fes clic al botó Slice.

A continuació, la imatge es dividirà per la mida especificada. Si és confús, premeu la tecla Ctrl per veure una línia divisòria.

Després de dividir, feu clic al botó "Aplica" per tancar-lo.

Si feu clic al botó dret del cercle del fitxer d'imatge del projecte per expandir-lo, podreu veure que la imatge està dividida.

Creació de dades d'animació

Deixeu anar la imatge creada a la secció anterior a la vista.

A continuació, en lloc d'afegir la imatge, es mostrarà un diàleg de desar. Això desarà la configuració de l'animació, de manera que, de moment, deseu-la com a "< nom de la imatge >Animation.anim".

Això crearà dos fitxers al projecte, amb la imatge dividida a la vista i la imatge posterior a la vista.

Per cert, si executeu el joc en aquest estat, crec que el personatge animarà per si mateix. Aquest és un estat en què es commuten i es mostren 12 imatges en qualsevol moment.

Si el joc s'està executant, sortiu-lo i seleccioneu la pestanya Animacions. Si no, seleccioneu "Finestra -> Animació -> Animació" al menú.

Heu seleccionat l'objecte que heu creat a partir de la jerarquia (en aquest cas, Iwamaru_0).

Ja hi ha una animació generada automàticament, però no la necessito, així que l'esborraré més endavant. Hi ha un menú desplegable anomenat "IwamaruAnimation" que he anomenat aquesta vegada, així que feu-hi clic i seleccioneu "Crea un clip nou".

A continuació, apareixerà el diàleg de desar. Com que crearem una animació del moviment cap avall, ho deixarem com "Iwamaru Down".

Seleccioneu "Iwamaru_0" de la jerarquia i canvieu l'animació a "IwamaruDown".

Aquesta vegada, repetirem l'animació en "left, middle, right, medium", de manera que posarem el nombre de mostres a 4. A continuació, la línia de temps de la dreta es dividirà en 4 parts.

Deixeu anar el Iwamaru_0, la imatge a l'extrem superior esquerre del projecte, a 0.0 a la línia de temps d'animació.

A continuació, deixeu caure el "Iwamaru_1" de la imatge central a 0.1 i 0.3.

Finalment, deixeu caure el "Iwamaru_2" de la imatge superior dreta a 0.2.

Quan hagis acabat, fes clic al botó Reproduir. Podeu veure que el personatge de la vista camina i anima. (Aquesta imatge de mostra és una mica difícil d'entendre, però ...)

Segueix els mateixos passos per crear animacions a l'esquerra, a la dreta i a la part superior.

El resultat final hauria de ser similar a la imatge següent.

Assegureu-vos que cada direcció anima correctament.

Configuració de transició d'animació

A continuació, feu doble clic a "Iwamaru_0.controller" del projecte per obrir-lo.

A continuació, s'obrirà la pestanya Animador i veureu una pantalla com la que es mostra a la figura. Això es deu al fet que l'animació que acabes de crear és ". Fitxer del controlador".

Feu clic amb el botó dret en un espai buit i seleccioneu Crea estat -> des de l'arbre nou amic.

Es crearà un nou "Arbre de barreja", feu-hi clic amb el botó dret i seleccioneu "Estableix la capa com a estat predeterminat".

A continuació, l'entrada mirarà l'arbre de barreja. Això vol dir que quan l'animació es mogui, l'arbre de barreja serà el primer a moure's.

Configurarem animacions a Blend Tree, de manera que suprimirem totes les animacions existents.

Hi ha una pestanya "Paràmetres" a l'esquerra, així que seleccioneu-la i afegiu "Float" des del botó +.

Com que hi ha dos paràmetres, s'anomenen "X" i "Y" respectivament.

Feu doble clic a l'arbre de mescla.

Seleccioneu l'arbre de barreja que apareix.

Des de l'inspector, canvieu el tipus de barreja a 2D Simple Dictional.

Establiu els paràmetres a "X" i "Y".

Des del botó + en moviment, seleccioneu Afegeix camp de moviment 4 vegades.

El valor inicial pot ser diferent, però hauria de semblar la xifra.

Per als quatre elements de moviment que hem afegit, establirem els .anims superior, inferior, esquerre i dret al projecte.

A continuació, especifiqueu quina direcció ha de moure cada animació.

Això completa la configuració de l'animació.

Finalment, podeu eliminar el fitxer d'animació generat automàticament perquè no el necessiteu.

Control del moviment

El moviment es realitza prement una tecla del teclat, de manera que podeu crear un script per controlar-lo. Aquesta vegada, el guió s'adjuntarà al personatge, de manera que el deixarem com "CharacterMove".

El guió té aquest aspecte:

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 continuació s'explica cada part.

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

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

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

Start Primer, obteniu el component del mètodeAnimator. Update Això s'utilitzarà en , així que tenir-lo amb antelació.

Animator.SetFloat El mètode pot establir un valor per al nom del paràmetre especificat. A la configuració de l'animació, definim quina animació utilitzarem segons els valors X i Y. Si establiu la direcció dels paràmetres X i Y, l'animació s'executarà en aquesta direcció. En l'estat inicial, volem cara avall, de manera que especifiquem (X: 0, Y: -1). Per cert, tingueu en compte que els noms dels paràmetres distingeixen entre majúscules i minúscules.

/// <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ètode, comprovem periòdicament l'estat d'entrada del teclat i el processem quan hi ha entrada.

GetMove El mètode està dissenyat per retornar indicacions a mesura que s'introdueix el teclat. El contingut de processament es basa en el que es descriu a Keyboard Input Tips, de manera que l'ometo.

Quan hi hagi entrada de teclat, Animator.SetFloat definiu la direcció al mètode. Això permet l'animació en la direcció en què us heu mogut. transform.Translate Després d'això, estem movent l'objecte amb el mètode.

Un cop hagis creat l'script, adjunta'l a l'objecte caràcter.

execució

Això completa tot el procés. Proveu d'executar el joc i prémer les tecles del cursor del teclat per moure'l. Si el personatge es mou en la direcció en què l'has premut i l'animació de marxa es mou mentre el gràfic canvia de direcció cap a la direcció cap a on t'enfrontes, ja està.