Implementace animace chůze pro postavu pohyblivého symbolu se 4 směry

Ověřovací prostředí

Windows

• Systém Windows 11

Unity Editor

• 2020.3.25f1

Balíčky vstupního systému

• 1.2.0

Předpoklady pro tento tip

Následující nastavení jsou předem nakonfigurovaná jako předpoklad pro vysvětlení těchto tipů.

• Představujeme balíček vstupního systému
• Zarovnejte kameru (2D) s plátnem

Referenční stránka

• Tvorba RPG s Unity Část 1 Animace chůze a operace

Příprava chodící grafiky

Za prvé, animace chůze je dosažena neustálým přepínáním mezi více obrázky, aby to vypadalo, že jdete. Proto je nutné připravit tolik obrázků, kolik je potřeba, aby znázornily směr pohybu a chůze.

Aby bylo dosaženo co nejjednodušší animace chůze, je běžné připravit následující obrázek. Tento vzor se také používá v mnoha RPG.

Nejprve je rozdělena do čtyř čar nahoře a dole, ale ukazuje směr, kterým se budete při chůzi dívat. Shora je to "dolů, doleva, doprava, nahoru".

A pro levou a pravou stranu to bude pohyb chůze tímto směrem. Obecný tok je "střed, levý, střední, pravý, střední...".

Velikost jedné buňky tentokrát připraveného znaku je 32x32px. Vzhledem k tomu, že je připraven pro čtverce 3x4, skutečná velikost souboru obrázku je 96x128px. Mimochodem, velikost jednoho znaku není nijak omezena, takže je možné i 32x48px nebo 64x64px.

* Tentokrát připravený obrázek je Iwamaru-kun, který jsem vytvořil už dávno. Můžete ho použít jako ověření chování.

Vytvoření projektu a příprava imagí

V ukázce, kterou vytvoříme tentokrát, budeme předpokládat, že můžete umístit znak a přesunout jej pomocí kurzorových kláves na klávesnici.

Prvním krokem je vytvoření nového 2D projektu. Přidejte obrázek postavy, který jste si připravili pro svůj projekt.

Vyberte obrázek, který jste právě přidali, a v inspektoru nakonfigurujte následující nastavení:

Po nastavení klikněte na tlačítko "Použít" ve spodní části.

Dále rozdělte image, abyste mezi nimi mohli přepínat v Unity. V inspektoru je tlačítko "Editor pohyblivých symbolů", takže na něj klikněte.

Když se objeví dialogové okno Editor pohyblivých symbolů, klikněte na rozbalovací nabídku "Řez", nastavte "Typ" na "Mřížka podle velikosti buňky", Zadejte velikost 32 obrazových bodů (v závislosti na velikosti postavy) a klepněte na tlačítko Řez.

Poté bude obrázek rozdělen podle zadané velikosti. Pokud je to matoucí, stiskněte klávesu Ctrl, aby se zobrazila dělicí čára.

Po rozdělení jej zavřete kliknutím na tlačítko "Použít".

Pokud kliknete na pravé tlačítko s kolečkem v souboru obrázku v projektu, abyste jej rozbalili, uvidíte, že obrázek je rozdělen.

Vytváření dat animace

Přetáhněte obrázek vytvořený v předchozí části do zobrazení.

Poté se místo přidání obrázku zobrazí dialogové okno pro uložení. Tím se uloží nastavení animace, takže ji prozatím uložte jako "< název obrázku >Animation.anim".

Tím se v projektu vytvoří dva soubory, s rozděleným obrázkem v pohledu a pozdějším obrázkem v pohledu.

Mimochodem, pokud hru spustíte v tomto stavu, myslím, že se postava bude animovat sama. Jedná se o stav, ve kterém se kdykoli přepne a zobrazí 12 snímků.

Pokud je hra spuštěná, ukončete ji a vyberte kartu Animace. Pokud ne, vyberte z nabídky "Okno -> Animace -> Animace".

Vybrali jste objekt, který jste vytvořili z hierarchie (v tomto případě Iwamaru_0).

Automaticky generovaná animace již existuje, ale nepotřebuji ji, takže ji později smažu. K dispozici je rozbalovací nabídka s názvem "IwamaruAnimation", kterou jsem tentokrát pojmenoval, takže na ni klikněte a vyberte "Vytvořit nový klip".

Poté se zobrazí dialogové okno pro uložení. Vzhledem k tomu, že vytvoříme animaci pohybu dolů, ponecháme ji jako "Iwamaru Down".

V hierarchii vyberte "Iwamaru_0" a změňte animaci na "IwamaruDown".

Tentokrát budeme animaci opakovat v "vlevo, uprostřed, vpravo, střední", takže počet vzorků nastavíme na 4. Poté bude časová osa vpravo rozdělena na 4 části.

Přetáhněte Iwamaru_0, obrázek v levém horním rohu projektu, na 0,0 na časové ose animace.

Dále přetáhněte "Iwamaru_1" na prostředním obrázku výše na 0,1 a 0,3.

Nakonec přetáhněte "Iwamaru_2" na obrázku vpravo nahoře na 0,2.

Až budete hotovi, klikněte na tlačítko Přehrát. Můžete vidět, že postava v pohledu chodí a animuje. (Tento ukázkový obrázek je trochu obtížně pochopitelný, ale...)

Stejným postupem vytvořte levé, pravé a horní animace.

Konečný výsledek by měl vypadat podobně jako na obrázku níže.

Ujistěte se, že se každý směr správně animuje.

Nastavení přechodu animace

Dále poklepejte na "Iwamaru_0.controller" z projektu a otevřete jej.

Poté se otevře karta Animátor a uvidíte obrazovku podobnou té, která je znázorněna na obrázku. Je to proto, že animace, kterou jste právě vytvořili, je ". controller" soubor.

Klikněte pravým tlačítkem myši na prázdné místo a vyberte Vytvořit stav -> Z nového stromu přátel.

Vytvoří se nový "Blend Tree", klikněte na něj pravým tlačítkem myši a vyberte "Nastavit vrstvu jako výchozí stav".

Položka se pak podívá na strom prolnutí. To znamená, že když se animace pohne, strom prolnutí bude první věcí, která se pohne.

Chystáme se nastavit animace ve stromu prolnutí, takže odstraníme všechny existující animace.

Vlevo je záložka "Parametry", takže ji vyberte a přidejte "Float" z tlačítka +.

Vzhledem k tomu, že existují dva parametry, jsou pojmenovány "X" a "Y".

Poklepejte na strom prolnutí.

Vyberte strom prolnutí, který se zobrazí.

Ve správci změňte typ přechodu na 2D jednoduchý slovník.

Nastavte parametry na "X" a "Y".

Z tlačítka + v Pohybu vyberte 4krát Přidat pohybové pole.

Počáteční hodnota se může lišit, ale měla by vypadat jako obrázek.

U čtyř položek pohybu, které jsme přidali, nastavíme v projektu horní, dolní, levý a pravý .anims.

Poté určete, kterým směrem se mají jednotlivé animace pohybovat.

Tím je nastavení animace dokončeno.

Nakonec můžete automaticky generovaný soubor animace odstranit, protože jej nepotřebujete.

Ovládání pohybu

Pohyb se provádí stisknutím klávesy na klávesnici, takže si můžete vytvořit skript pro jeho ovládání. Tentokrát bude skript připojen ke znaku, takže jej ponecháme jako "CharacterMove".

Skript vypadá takto:

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

Následuje vysvětlení každé části.

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

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

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

Start Nejprve získejte komponentu v metoděAnimator. Update To bude použito v , takže si to připravte předem.

Animator.SetFloat Metoda může nastavit hodnotu pro zadaný název parametru. V nastavení animace nastavíme na tom, která animace se má použít podle hodnot X a Y. Pokud nastavíte směr parametrů X a Y, animace se provede v tomto směru. V počátečním stavu chceme lícem dolů, takže určíme (X: 0, Y: -1). Mimochodem, všimněte si, že v názvech parametrů se rozlišují velká a malá písmena.

/// <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 V metodě pravidelně kontrolujeme stav vstupu klávesnice a zpracováváme jej, když je zadání.

GetMove Metoda je navržena tak, aby vracela směry při zadávání klávesnice. Obsah zpracování je založen na tom, co je popsáno v Tipy pro zadávání klávesnice, takže to vynechám.

Pokud je k dispozici vstup z klávesnice, Animator.SetFloat nastavte směr metody. To umožňuje animaci ve směru, kterým jste se pohybovali. transform.Translate Poté objekt přesuneme metodou.

Jakmile skript vytvoříte, připojte ho k objektu znaku.

poprava

Tím je celý proces dokončen. Zkuste hru spustit a stisknutím kurzorových kláves na klávesnici ji přesunout. Pokud se postava pohybuje ve směru, kterým jste ji stiskli, a animace chůze se pohybuje, zatímco grafika mění směr do směru, kterým se díváte, máte hotovo.