Implementujte animáciu chôdze pre 4-smernú sprite postavu

Prostredie overovania

Windows

• Windows 11

Editor jednoty

• 2020.3.25f1

Vstupné systémové balíky

• 1.2.0

Predpoklady pre tento tip

Nasledujúce nastavenia sú vopred nakonfigurované ako predpoklad na vysvetlenie týchto tipov.

• Predstavujeme balík vstupného systému
• Zarovnanie fotoaparátu (2D) s plátnom

Referenčné miesto

• Vytvorenie RPG s Unity Part 1 Walking Animation and Operation

Príprava vychádzkovej grafiky

Po prvé, animácia chôdze sa dosahuje neustálym prepínaním medzi viacerými obrázkami, aby to vyzeralo, že kráčate. Preto je potrebné pripraviť toľko obrázkov, koľko je potrebné na zobrazenie smeru pohybu a chôdze.

Aby sa dosiahla čo najjednoduchšia animácia chôdze, je bežné pripraviť nasledujúci obrázok. Tento vzor sa používa aj v mnohých RPG.

Po prvé, je rozdelený do štyroch čiar nad a pod, ale ukazuje smer, ktorému budete čeliť pri chôdzi. Zhora je to "dole, vľavo, vpravo, hore".

A pre ľavicu a pravicu to bude chôdza týmto smerom. Všeobecný tok je "stredný, ľavý, stredný, pravý, stredný...".

Veľkosť jednej bunky tentokrát pripravenej postavy je 32x32px. Pretože je pripravený pre štvorce 3x4, skutočná veľkosť obrazového súboru je 96x128px. Mimochodom, veľkosť jedného znaku nie je obmedzená, takže je možné aj 32x48px alebo 64x64px.

* Obrázok pripravený tentokrát je Iwamaru-kun, ktorý som urobil už dávno. Môžete ho použiť ako overenie správania.

Vytvorenie projektu a príprava obrázkov

Vo vzorke, ktorú tentoraz vytvoríme, budeme predpokladať, že môžete umiestniť postavu a presunúť ju kurzorovými klávesmi na klávesnici.

Prvým krokom je vytvorenie nového 2D projektu. Pridajte obrázok znaku, ktorý ste pripravili pre svoj projekt.

Vyberte obrázok, ktorý ste práve pridali, a nakonfigurujte nasledujúce nastavenia v inšpektorovi:

Po nastavení kliknite na tlačidlo "Použiť" v dolnej časti.

Potom rozdeľte obrázok tak, aby ste medzi nimi mohli prepínať v Unity. V inšpektorovi je tlačidlo "Sprite Editor", takže naň kliknite.

Keď sa zobrazí dialógové okno Sprite Editor, kliknite na rozbaľovaciu ponuku "Plátok", nastavte "Typ" na "Mriežka podľa veľkosti bunky", Zadajte veľkosť pixela 32 (v závislosti od veľkosti postavy) a kliknite na tlačidlo Výsek.

Potom sa obrázok rozdelí podľa zadanej veľkosti. Ak je to mätúce, stlačením klávesu Ctrl zobrazte deliacu čiaru.

Po rozdelení kliknite na tlačidlo "Použiť", aby ste ho zatvorili.

Ak kliknete na pravé kruhové tlačidlo súboru obrázka v projekte, aby ste ho rozbalili, môžete vidieť, že obrázok je rozdelený.

Vytváranie údajov animácie

Presuňte obrázok vytvorený v predchádzajúcej časti do zobrazenia.

Potom sa namiesto pridania obrázka zobrazí dialógové okno uloženia. Tým sa uložia nastavenia animácie, takže zatiaľ ich uložte ako "< názov obrázka >Animation.anim".

Tým sa v projekte vytvoria dva súbory, pričom rozdelený obrázok sa zobrazí v zobrazení a neskorší obrázok v zobrazení.

Mimochodom, ak hru spustíte v tomto stave, myslím si, že postava sa bude animovať sama. Toto je stav, v ktorom sa kedykoľvek prepína a zobrazuje 12 obrázkov.

Ak je hra spustená, ukončite ju a vyberte kartu Animácie. Ak nie, vyberte z ponuky "Window -> Animation -> Animation".

Z hierarchie ste vybrali objekt, ktorý ste vytvorili (v tomto prípade Iwamaru_0).

Automaticky generovaná animácia už existuje, ale nepotrebujem ju, takže ju neskôr odstránim. Existuje rozbaľovacia ponuka s názvom "IwamaruAnimation", ktorú som tentokrát pomenoval, takže na ňu kliknite a vyberte možnosť "Vytvoriť nový klip".

Potom sa zobrazí dialógové okno uloženia. Keďže vytvoríme animáciu pohybu nadol, necháme ho ako "Iwamaru Down".

Vyberte "Iwamaru_0" z hierarchie a zmeňte animáciu na "IwamaruDown".

Tentokrát zopakujeme animáciu v "ľavej, strednej, pravej, strednej časti", takže počet vzoriek nastavíme na 4. Potom bude časová os vpravo rozdelená na 4 časti.

Presuňte Iwamaru_0, obrázok v ľavom hornom rohu projektu, na časovej osi animácie na hodnotu 0.0.

Potom umiestnite "Iwamaru_1" na strednom obrázku vyššie na 0,1 a 0,3.

Nakoniec znížte "Iwamaru_2" na pravom hornom obrázku na 0,2.

Po dokončení kliknite na tlačidlo prehrávania. Môžete vidieť, že postava v zobrazení chodí a animuje. (Tento ukážkový obrázok je trochu ťažké pochopiť, ale ...)

Pri vytváraní animácií vľavo, vpravo a hore postupujte rovnako.

Konečný výsledok by mal vyzerať podobne ako na obrázku nižšie.

Uistite sa, že každý smer animuje správne.

Nastavenie prechodu animácie

Potom dvakrát kliknite na "Iwamaru_0.controller" z projektu, aby ste ho otvorili.

Potom sa otvorí karta Animátor a uvidíte obrazovku podobnú tej, ktorá je znázornená na obrázku. Je to preto, že animácia, ktorú ste práve vytvorili, je ". kontrolór".

Kliknite pravým tlačidlom myši na prázdne miesto a vyberte položku Vytvoriť štát -> Z nového stromu priateľov.

Vytvorí sa nový "Blend Tree", kliknite naň pravým tlačidlom myši a vyberte možnosť "Nastaviť vrstvu ako predvolený stav".

Záznam sa potom pozrie na Blend Tree. To znamená, že keď sa animácia pohne, Blend Tree bude prvá vec, ktorá sa pohne.

V Blend Tree nastavíme animácie, takže odstránime všetky existujúce animácie.

Vľavo je karta "Parametre", takže ju vyberte a pridajte "Float" z tlačidla +.

Pretože existujú dva parametre, sú pomenované "X" a "Y".

Dvakrát kliknite na strom zmiešania.

Vyberte strom zmiešania, ktorý sa zobrazí.

V časti Inšpektor zmeňte typ zmesi na 2D Simple Dictional.

Nastavte parametre na "X" a "Y".

V tlačidle + v časti Pohyb vyberte 4-krát položku Pridať pole pohybu.

Počiatočná hodnota sa môže líšiť, ale mala by vyzerať ako na obrázku.

Pre štyri položky pohybu, ktoré sme pridali, nastavíme horný, dolný, ľavý a pravý .anims v projekte.

Potom určite, ktorým smerom sa majú jednotlivé animácie pohybovať.

Tým sa dokončí nastavenie animácie.

Nakoniec môžete automaticky generovaný súbor animácie odstrániť, pretože ho nepotrebujete.

Ovládanie pohybu

Pohyb sa vykonáva stlačením klávesu na klávesnici, takže môžete vytvoriť skript na jeho ovládanie. Tentokrát bude skript pripojený k postave, takže ho necháme ako "CharacterMove".

Skript vyzerá 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;
  }
}

Nasleduje vysvetlenie každej časti.

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

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

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

Start Najprv získajte komponent v metódeAnimator. Update Toto bude použité v , takže ho majte vopred.

Animator.SetFloat Metóda môže nastaviť hodnotu pre zadaný názov parametra. V nastaveniach animácie nastavíme, ktorá animácia sa má použiť podľa hodnôt X a Y. Ak nastavíte smer parametrov X a Y, animácia sa vykoná v tomto smere. V počiatočnom stave chceme smerom nadol, preto špecifikujeme (X: 0, Y: -1). Mimochodom, všimnite si, že názvy parametrov rozlišujú veľké a malé písmená.

/// <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 metóde pravidelne kontrolujeme vstupný stav klávesnice a spracovávame ho, keď je vstup.

GetMove Metóda je navrhnutá tak, aby vracala smery ako vstupy klávesnice. Obsah spracovania je založený na tom, čo je popísané v tipoch na vstup z klávesnice, takže ho vynechám.

Ak je vstup z klávesnice, Animator.SetFloat nastavte smer metódy. To umožní animáciu v smere, v ktorom ste sa pohybovali. transform.Translate Potom objekt presúvame metódou.

Po vytvorení skriptu ho pripojte k objektu znaku.

poprava

Týmto sa celý proces zavŕšuje. Skúste hru spustiť a stlačením kurzorových klávesov na klávesnici ju presunúť. Ak sa postava pohybuje v smere, ktorým ste ju stlačili, a animácia chôdze sa pohybuje, zatiaľ čo grafika mení smer smeru, ktorým čelíte, máte hotovo.