Implementa un'animazione di camminata per un personaggio sprite a 4 vie

Ambiente di verifica

Finestre

• finestre 11

Unity Editor

• 2020.3.25f1

Pacchetti del sistema di input

• 1.2.0

Prerequisiti per questo suggerimento

Le seguenti impostazioni sono preconfigurate come prerequisito per la spiegazione di questi suggerimenti.

• Presentazione del pacchetto del sistema di input
• Allineare la videocamera (2D) con l'area di lavoro

Sito di riferimento

• Realizzare un gioco di ruolo con Unity Parte 1 Animazione e funzionamento a piedi

Preparazione della grafica a piedi

Prima di tutto, l'animazione della camminata si ottiene passando costantemente da un'immagine all'altra per far sembrare che tu stia camminando. Pertanto, è necessario preparare tutte le immagini necessarie per mostrare la direzione del movimento e della camminata.

Per ottenere l'animazione di camminata più semplice, è comune preparare la seguente immagine. Questo modello è utilizzato anche in molti giochi di ruolo.

Innanzitutto, è diviso in quattro linee sopra e sotto, ma mostra la direzione in cui ti troverai quando camminerai. Dall'alto, è "giù, sinistra, destra, su".

E per la sinistra e la destra, sarà un movimento di camminata in quella direzione. Il flusso generale è "mezzo, sinistra, centro, destra, centro...".

La dimensione di una cella del carattere preparato questa volta è 32x32px. Poiché è preparato per quadrati 3x4, la dimensione effettiva del file immagine è 96x128px. A proposito, non c'è limite alla dimensione di un personaggio, quindi è possibile anche 32x48px o 64x64px.

* L'immagine preparata questa volta è Iwamaru-kun, che ho fatto molto tempo fa. È possibile utilizzarlo come verifica del comportamento.

Creare un progetto e preparare le immagini

Nell'esempio che creeremo questa volta, supporremo che sia possibile posizionare un carattere e spostarlo con i tasti cursore sulla tastiera.

Il primo passo consiste nel creare un nuovo progetto 2D. Aggiungi l'immagine del personaggio che hai preparato per il tuo progetto.

Seleziona l'immagine che hai appena aggiunto e configura le seguenti impostazioni nell'ispettore:

Dopo l'impostazione, fai clic sul pulsante "Applica" in basso.

Quindi, dividi l'immagine in modo da poter passare da una all'altra in Unity. C'è un pulsante "Sprite Editor" nell'ispettore, quindi fai clic su di esso.

Quando viene visualizzata la finestra di dialogo Sprite Editor, fai clic sul menu a discesa "Sezione", imposta "Tipo" su "Griglia per dimensione cella", Immettere una dimensione in pixel di 32 (a seconda delle dimensioni del carattere) e fare clic sul pulsante Sezione.

Quindi, l'immagine verrà divisa in base alle dimensioni specificate. Se è confuso, premi il tasto Ctrl per vedere una linea di divisione.

Dopo la divisione, fai clic sul pulsante "Applica" per chiuderlo.

Se si fa clic sul pulsante destro del cerchio del file immagine nel progetto per espanderlo, è possibile vedere che l'immagine è divisa.

Creazione di dati di animazione

Rilascia l'immagine creata nella sezione precedente nella vista.

Quindi, invece di aggiungere l'immagine, verrà visualizzata una finestra di dialogo di salvataggio. Questo salverà le impostazioni dell'animazione, quindi per il momento salvalo come "nome immagine < >Animation.anim".

In questo modo verranno creati due file nel progetto, con l'immagine divisa nella vista e l'immagine successiva nella vista.

A proposito, se esegui il gioco in questo stato, penso che il personaggio si animerà da solo. Si tratta di uno stato in cui 12 immagini vengono commutate e visualizzate in qualsiasi momento.

Se il gioco è in esecuzione, chiudilo e seleziona la scheda Animazioni. In caso contrario, seleziona "Finestra -> Animazione -> Animazione" dal menu.

L'oggetto creato è stato selezionato dalla gerarchia (in questo caso, Iwamaru_0).

C'è già un'animazione generata automaticamente, ma non ne ho bisogno, quindi la eliminerò in seguito. C'è un menu a discesa chiamato "IwamaruAnimation" che ho chiamato questa volta, quindi fai clic su di esso e seleziona "Crea nuova clip".

Quindi apparirà la finestra di dialogo di salvataggio. Dal momento che creeremo un'animazione del movimento verso il basso, lo lasceremo come "Iwamaru Down".

Seleziona "Iwamaru_0" dalla gerarchia e cambia l'animazione in "IwamaruDown".

Questa volta, ripeteremo l'animazione in "sinistra, centro, destra, medio", quindi imposteremo il numero di campioni a 4. Quindi la timeline a destra sarà divisa in 4 parti.

Rilascia il Iwamaru_0, ovvero l'immagine nell'angolo in alto a sinistra del progetto, su 0.0 nella timeline dell'animazione.

Quindi, rilascia il "Iwamaru_1" nell'immagine centrale sopra a 0,1 e 0,3.

Infine, abbassa il "Iwamaru_2" nell'immagine in alto a destra a 0,2.

Quando hai finito, fai clic sul pulsante di riproduzione. Puoi vedere che il personaggio nella vista cammina e si anima. (Questa immagine di esempio è un po' difficile da capire, ma ...)

Segui gli stessi passaggi per creare animazioni a sinistra, a destra e in alto.

Il risultato finale dovrebbe essere simile all'immagine qui sotto.

Accertatevi che ogni direzione venga animata correttamente.

Impostazioni di transizione dell'animazione

Quindi, fai doppio clic su "Iwamaru_0.controller" dal progetto per aprirlo.

Quindi si aprirà la scheda Animator e vedrai una schermata come quella mostrata in figura. Questo perché l'animazione che hai appena creato è ". controllore".

Fare clic con il pulsante destro del mouse su uno spazio vuoto e selezionare Crea stato -> dal nuovo albero degli amici.

Verrà creato un nuovo "Albero Blend", fare clic con il pulsante destro del mouse su di esso e selezionare "Imposta livello come stato predefinito".

La voce esaminerà quindi l'albero di fusione. Ciò significa che quando l'animazione viene spostata, l'albero di blend sarà la prima cosa a muoversi.

Imposteremo le animazioni in Blend Tree, quindi elimineremo tutte le animazioni esistenti.

C'è una scheda "Parametri" a sinistra, quindi selezionala e aggiungi "Float" dal pulsante +.

Poiché ci sono due parametri, sono denominati rispettivamente "X" e "Y".

Fate doppio clic sull'albero di raccordo.

Selezionate l'albero di blend visualizzato.

Dall'Ispettore, modificare il tipo di fusione in Dizionale semplice 2D.

Impostare i parametri su "X" e "Y".

Dal pulsante + in Movimento, seleziona Aggiungi campo di movimento 4 volte.

Il valore iniziale potrebbe essere diverso, ma dovrebbe essere simile alla figura.

Per i quattro elementi di movimento che abbiamo aggiunto, imposteremo i .anim in alto, in basso, a sinistra e a destra nel progetto.

Quindi, specificare la direzione in cui deve muoversi ogni animazione.

In questo modo si completa l'impostazione dell'animazione.

Infine, puoi eliminare il file di animazione generato automaticamente perché non ne hai bisogno.

Controllo del movimento

Il movimento viene eseguito premendo un tasto sulla tastiera, in modo da poter creare uno script per controllarlo. Questa volta, lo script sarà allegato al personaggio, quindi lo lasceremo come "CharacterMove".

Lo script è simile al seguente:

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

Quella che segue è una spiegazione di ciascuna parte.

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

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

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

Start Innanzitutto, ottenere il Animator componente nel metodo. Update Questo verrà utilizzato in , quindi tienilo in anticipo.

Animator.SetFloat Il metodo può impostare un valore per il nome del parametro specificato. Nelle impostazioni dell'animazione, impostiamo l'animazione da utilizzare in base ai valori X e Y. Se si imposta la direzione dei parametri X e Y, l'animazione verrà eseguita in quella direzione. Nello stato iniziale, vogliamo essere a faccia in giù, quindi specifichiamo (X: 0, Y: -1). A proposito, si noti che i nomi dei parametri fanno distinzione tra maiuscole e minuscole.

/// <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 Nel metodo, controlliamo periodicamente lo stato di input della tastiera e lo elaboriamo quando c'è input.

GetMove Il metodo è progettato per restituire le indicazioni come input da tastiera. Il contenuto dell'elaborazione si basa su quanto descritto in Suggerimenti per l'input da tastiera, quindi lo ometterò.

Quando è presente l'input da tastiera, Animator.SetFloat impostare la direzione sul metodo. In questo modo viene abilitata l'animazione nella direzione in cui ci si è spostati. transform.Translate Dopodiché, stiamo spostando l'oggetto con il metodo.

Una volta creato lo script, allegalo all'oggetto carattere.

esecuzione

Questo completa l'intero processo. Prova a eseguire il gioco e a premere i tasti cursore sulla tastiera per spostarlo. Se il personaggio si sposta nella direzione in cui è stato premuto e l'animazione di camminata si sposta mentre l'elemento grafico cambia direzione nella direzione in cui sei rivolto, il gioco è fatto.