Sétaanimáció megvalósítása 4-utas sprite karakterhez

Ellenőrzési környezet

Windows

• Windows 11 esetén

Unity-szerkesztő

• 2020.3.25f1

Bemeneti rendszercsomagok

• 1.2.0

A tipp előfeltételei

A következő beállítások előre konfigurálva vannak a tippek magyarázatának előfeltételeként.

• Bemutatjuk a beviteli rendszer csomagot
• A kamera (2D) igazítása a vászonhoz

Referencia oldal

• RPG készítése egységgel 1. rész: Séta animáció és működés

Gyalogos grafika készítése

Először is, a gyalogos animációt úgy érik el, hogy folyamatosan váltanak több kép között, hogy úgy tűnjön, mintha sétálna. Ezért annyi képet kell készíteni, amennyi szükséges a mozgás és a gyaloglás irányának megjelenítéséhez.

A legegyszerűbb gyalogos animáció elérése érdekében gyakori a következő kép elkészítése. Ezt a mintát számos RPG-ben is használják.

Először is négy sorra oszlik fent és lent, de megmutatja azt az irányt, amellyel járni fog. Felülről "lefelé, balra, jobbra, felfelé".

És balra és jobbra ez egy sétáló mozgás lesz ebbe az irányba. Az általános áramlás "közép, bal, közép, jobb, középső...".

Az ezúttal elkészített karakter egy cellájának mérete 32x32px. Mivel 3x4 négyzetre van előkészítve, a képfájl tényleges mérete 96x128px. Egyébként nincs korlátozva egy karakter mérete, így 32x48px vagy 64x64px is lehetséges.

* Az ezúttal készített kép Iwamaru-kun, amelyet régen készítettem. Használhatja viselkedés-ellenőrzésként.

Projekt létrehozása és rendszerképek előkészítése

Az ezúttal létrehozott mintában feltételezzük, hogy elhelyezhet egy karaktert, és mozgathatja azt a billentyűzet kurzorgombjaival.

Az első lépés egy új 2D projekt létrehozása. Adja hozzá a projekthez előkészített karakterképet.

Válassza ki az imént hozzáadott rendszerképet, és konfigurálja a következő beállításokat a vizsgálóban:

A beállítás után kattintson az alján található "Alkalmaz" gombra.

Ezután ossza fel a képet, hogy válthasson közöttük a Unityben. Van egy "Sprite Editor" gomb az ellenőrben, ezért kattintson rá.

Amikor megjelenik a Sprite Editor párbeszédpanel, kattintson a "Szelet" legördülő menüre, állítsa a "Típus" beállítást "Rács cellaméret szerint" értékre, Adjon meg egy 32-es pixelméretet (a karakter méretétől függően), majd kattintson a Szelet gombra.

Ezután a képet a megadott méretre osztják. Ha zavaró, nyomja le a Ctrl billentyűt az elválasztó vonal megjelenítéséhez.

A felosztás után kattintson az "Alkalmaz" gombra a bezárásához.

Ha a projektben a képfájl jobb oldali körgombjára kattint annak kibontásához, láthatja, hogy a kép fel van osztva.

Animációs adatok létrehozása

Húzza az előző szakaszban létrehozott képet a nézetbe.

Ezután a kép hozzáadása helyett egy mentési párbeszédpanel jelenik meg. Ez elmenti az animációs beállításokat, így egyelőre mentse el "< képnév >Animation.anim" néven.

Ez két fájlt hoz létre a projektben, az osztott kép a nézetben, a későbbi kép pedig a nézetben.

Egyébként, ha ebben az állapotban futtatja a játékot, azt hiszem, a karakter önmagában animálódik. Ez egy olyan állapot, amelyben 12 kép bármikor felcserélődik és megjelenik.

Ha a játék fut, lépjen ki belőle, és válassza az Animációk lapot. Ha nem, válassza az "Ablak -> animáció -> animáció" lehetőséget a menüből.

Kiválasztotta a hierarchiából létrehozott objektumot (ebben az esetben Iwamaru_0).

Már van egy automatikusan generált animáció, de nincs rá szükségem, ezért később törlöm. Van egy "IwamaruAnimation" nevű legördülő menü, amelyet ezúttal neveztem el, ezért kattintson rá, és válassza az "Új klip létrehozása" lehetőséget.

Ezután megjelenik a mentési párbeszédpanel. Mivel animációt készítünk a lefelé irányuló mozgásról, "Iwamaru Down" néven hagyjuk.

Válassza ki a "Iwamaru_0" lehetőséget a hierarchiából, és módosítsa az animációt "IwamaruDown" -ra.

Ezúttal megismételjük az animációt "balra, középre, jobbra, közepesre", így a minták számát 4-re állítjuk. Ezután a jobb oldali idővonal 4 részre oszlik.

Húzza a Iwamaru_0, a projekt bal felső sarkában lévő képet az animáció idővonalának 0.0-ra.

Ezután dobja a fenti középső képen látható "Iwamaru_1" értéket 0,1-re és 0,3-ra.

Végül dobja a jobb felső képen látható "Iwamaru_2" értéket 0,2-re.

Ha végzett, kattintson a lejátszás gombra. Láthatja, hogy a nézetben látható karakter sétál és animál. (Ezt a mintaképet kissé nehéz megérteni, de ...)

Kövesse ugyanezeket a lépéseket bal, jobb és felső animációk létrehozásához.

A végeredménynek az alábbi képhez hasonlóan kell kinéznie.

Győződjön meg arról, hogy minden irány megfelelően animálódik.

Animáció áttűnési beállításai

Ezután kattintson duplán a "Iwamaru_0.controller" elemre a projektből annak megnyitásához.

Ezután megnyílik az Animátor fül, és az ábrán láthatóhoz hasonló képernyőt fog látni. Ez azért van, mert az imént létrehozott animáció ". vezérlő" fájlt.

Kattintson a jobb gombbal egy üres helyre, és válassza a Create State -> from New Friend Tree lehetőséget.

Létrejön egy új "Blend Tree", kattintson rá jobb gombbal, és válassza a "Réteg beállítása alapértelmezett állapotként" lehetőséget.

A bejegyzés ezután megnézi a Blend Tree-t. Ez azt jelenti, hogy amikor az animáció mozog, a Blend Tree lesz az első dolog, ami mozog.

Animációkat fogunk beállítani a Blend Tree-ben, ezért töröljük az összes meglévő animációt.

A bal oldalon található egy "Paraméterek" fül, ezért válassza ki, és adja hozzá a "Float" -ot a + gombhoz.

Mivel két paraméter van, ezeket "X" és "Y" -nek nevezik.

Kattintson duplán a keverőfára.

Válassza ki a megjelenő Blend Tree (Keverésfa) lehetőséget.

A vizsgálóban módosítsa a keverés típusát 2D egyszerű szótárra.

Állítsa a paramétereket "X" és "Y" értékre.

A Mozgás + gombján válassza ki a Mozgásmező hozzáadása lehetőséget 4 alkalommal.

A kezdeti érték eltérő lehet, de úgy kell kinéznie, mint az ábra.

Az általunk hozzáadott négy Motion elemhez beállítjuk a projekt felső, alsó, bal és jobb .anims fájlját.

Ezután adja meg, hogy az egyes animációk milyen irányba mozogjanak.

Ezzel befejeződik az animáció beállítása.

Végül törölheti az automatikusan létrehozott animációs fájlt, mert nincs rá szüksége.

Mozgásvezérlés

A mozgás a billentyűzet egyik gombjának megnyomásával történik, így létrehozhat egy szkriptet annak vezérléséhez. Ezúttal a szkript a karakterhez lesz csatolva, így "CharacterMove" néven hagyjuk.

A szkript így néz ki:

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

Az alábbiakban az egyes részek magyarázata található.

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

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

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

Start Először szerezze be az összetevőt a Animator módszerben. Update Ezt a -ben fogják használni, ezért legyen előre.

Animator.SetFloat A metódus beállíthatja a megadott paraméternév értékét. Az animációs beállításokban beállítjuk, hogy melyik animációt használjuk az X és Y értékek szerint. Ha beállítja az X és Y paraméterek irányát, az animáció ebben az irányban lesz végrehajtva. A kezdeti állapotban lefelé akarunk nézni, ezért megadjuk (X: 0, Y: -1). Egyébként vegye figyelembe, hogy a paraméternevek megkülönböztetik a kis- és nagybetűket.

/// <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 A módszerben rendszeresen ellenőrizzük a billentyűzet bemeneti állapotát, és feldolgozzuk, ha van bemenet.

GetMove A módszer úgy van kialakítva, hogy a billentyűzet bemeneteként visszaadja az utasításokat. A feldolgozási tartalom a Billentyűzetbeviteli tippekben leírtakon alapul, ezért kihagyom.

Ha van billentyűzet bemenet, Animator.SetFloat állítsa be a módszer irányát. Ez lehetővé teszi az animációt abban az irányban, amerre mozogtál. transform.Translate Ezután mozgatjuk az objektumot a módszerrel.

Miután létrehozta a parancsfájlt, csatolja azt a karakterobjektumhoz.

kivégzés

Ezzel befejeződik az egész folyamat. Próbálja meg futtatni a játékot, és mozgassa a kurzorbillentyűket a billentyűzeten. Ha a karakter abba az irányba mozog, amerre megnyomta, és a sétáló animáció elmozdul, miközben a grafika irányt vált az Ön felé néző irányra, akkor kész.