Izvedba animacije za hojo za 4-smerni lik duhovnika

Okolje za preverjanje

Windows

• Windows 11

Urejevalnik Unity

• 2020.3.25F1

Paketi vhodnih sistemov

• 1.2.0

Predpogoji za ta nasvet

Naslednje nastavitve so vnaprej konfigurirane kot predpogoj za razlago teh nasvetov.

• Predstavitev paketa vhodnih sistemov
• Fotoaparat (2D) poravnajte s platnom

Referenčno mesto

• Izdelava RPG z Unity 1. del: animacija in delovanje hoje

Priprava sprehajalne grafike

Prvič, animacija hoje se doseže z nenehnim preklapljanjem med več slikami, da je videti, kot da hodite. Zato je treba pripraviti toliko slik, kot je potrebno, da se prikaže smer gibanja in hoje.

Da bi dosegli najpreprostejšo animacijo hoje, je običajno pripraviti naslednjo sliko. Ta vzorec se uporablja tudi v številnih RPG-jih.

Najprej je razdeljen na štiri vrstice zgoraj in spodaj, vendar kaže smer, s katero se boste soočili, ko boste hodili. Z vrha je "dol, levo, desno, navzgor".

Za levo in desno pa bo to gibanje v tej smeri. Splošni tok je "srednji, levi, srednji, desni, srednji ...".

Velikost ene celice znaka, pripravljenega tokrat, je 32x32px. Ker je pripravljen za kvadrate 3x4, je dejanska velikost slikovne datoteke 96x128px. Mimogrede, velikost enega znaka ni omejena, zato je možna tudi 32x48px ali 64x64px.

* Podoba, ki sem jo tokrat pripravil, je Iwamaru-kun, ki sem jo naredil že zdavnaj. Uporabite ga lahko kot preverjanje vedenja.

Ustvarjanje projekta in priprava slik

V vzorcu, ki ga bomo ustvarili tokrat, bomo domnevali, da lahko postavite znak in ga premaknete s tipkami kazalca na tipkovnici.

Prvi korak je ustvariti nov 2D projekt. Dodajte sliko znaka, ki ste jo pripravili za projekt.

Izberite sliko, ki ste jo pravkar dodali, in konfigurirajte naslednje nastavitve v inšpektorju:

Po nastavitvi kliknite gumb "Uporabi" na dnu.

Nato razdelite sliko, tako da lahko v aplikaciji Unity preklapljate med njimi. V inšpektorju je gumb "Sprite Editor", zato ga kliknite.

Ko se prikaže pogovorno okno Sprite Editor, kliknite spustni meni »Rezina«, nastavite »Vrsta« na »Mreža po velikosti celice«, Vnesite velikost slikovnih pik 32 (odvisno od velikosti znaka) in kliknite gumb Rezice.

Nato bo slika razdeljena glede na določeno velikost. Če je to zmedeno, pritisnite tipko Ctrl, da se prikaže ločilna črta.

Po razdelitvi kliknite gumb »Uporabi«, da ga zaprete.

Če kliknete desni krog slikovne datoteke v projektu, da jo razširite, lahko vidite, da je slika razdeljena.

Ustvarjanje animacijskih podatkov

Spustite sliko, ustvarjeno v prejšnjem razdelku, v pogled.

Nato se namesto dodajanja slike prikaže pogovorno okno za shranjevanje. S tem boste shranili nastavitve animacije, zato jih zaenkrat shranite kot »< ime slike >Animation.anim«.

S tem boste ustvarili dve datoteki v projektu, z razdeljeno sliko v pogledu in poznejšo sliko v pogledu.

Mimogrede, če zaženete igro v tem stanju, mislim, da bo lik animiral sam. To je stanje, v katerem se 12 slik kadar koli preklopi in prikaže.

Če se igra izvaja, jo zaprite in izberite zavihek Animacije. Če ne, v meniju izberite "Okno -> Animacija -> Animacija".

Izbrali ste predmet, ki ste ga ustvarili iz hierarhije (v tem primeru Iwamaru_0).

Obstaja že samodejno ustvarjena animacija, vendar je ne potrebujem, zato jo bom pozneje izbrisal. Obstaja spustni meni z imenom "IwamaruAnimation", ki sem ga tokrat poimenoval, zato kliknite nanj in izberite "Ustvari nov posnetek".

Nato se prikaže pogovorno okno za shranjevanje. Ker bomo ustvarili animacijo gibanja navzdol, jo bomo pustili kot "Iwamaru Down".

V hierarhiji izberite »Iwamaru_0« in spremenite animacijo v »IwamaruDown«.

Tokrat bomo animacijo ponovili v "levo, srednja, desna, srednja", tako da bomo število vzorcev nastavili na 4. Nato bo časovnica na desni razdeljena na 4 dele.

Spustite Iwamaru_0, sliko v zgornjem levem kotu projekta, na 0,0 na časovnici animacije.

Nato spustite "Iwamaru_1" na srednji sliki zgoraj na 0, 1 in 0, 3.

Na koncu spustite "Iwamaru_2" v zgornjem desnem kotu slike na 0, 2.

Ko končate, kliknite gumb za predvajanje. Vidite lahko, da lik v pogledu hodi in animira. (Ta vzorčna slika je nekoliko težko razumljiva, vendar ...)

Če želite ustvariti levo, desno in zgornjo animacijo, sledite istim korakom.

Končni rezultat bi moral biti podoben spodnji sliki.

Prepričajte se, da se vsaka smer pravilno animira.

Nastavitve prehoda animacije

Nato dvokliknite »Iwamaru_0.controller« iz projekta, da ga odprete.

Nato se odpre zavihek Animator in videli boste zaslon, kot je prikazan na sliki. To je zato, ker je animacija, ki ste jo pravkar ustvarili, ". datoteka krmilnika.

Z desno miškino tipko kliknite prazen prostor in izberite Ustvari stanje -> iz drevesa novih prijateljev.

Ustvarjeno bo novo "Blend Tree", z desno miškino tipko kliknite nanj in izberite "Nastavi plast kot privzeto stanje".

Vnos si bo nato ogledal drevo mešanice. To pomeni, da ko se animacija premakne, bo Blend Tree prva stvar, ki jo je treba premakniti.

Animacije bomo nastavili v Blend Tree, zato bomo izbrisali vse obstoječe animacije.

Na levi je zavihek »Parametri«, zato ga izberite in dodajte »Float« z gumba +.

Ker obstajata dva parametra, se imenujeta "X" oziroma "Y".

Dvokliknite drevo mešanja.

Izberite Blend Tree (Drevo mešanice), ki se prikaže.

V inšpektorju spremenite vrsto mešanice v 2D preprost slovar.

Parametre nastavite na "X" in "Y".

Na gumbu + v gibanju 4-krat izberite Dodaj polje gibanja.

Začetna vrednost je lahko drugačna, vendar mora izgledati kot slika.

Za štiri elemente gibanja, ki smo jih dodali, bomo v projektu nastavili zgornje, spodnje, levo in desno .anime.

Nato določite, v katero smer naj se premika posamezna animacija.

S tem se zaključi nastavitev animacije.

Na koncu lahko izbrišete samodejno ustvarjeno animacijsko datoteko, ker je ne potrebujete.

Nadzor gibanja

Premikanje se izvede s pritiskom tipke na tipkovnici, tako da lahko ustvarite skript za nadzor. Tokrat bo skript priložen liku, zato ga bomo pustili kot "CharacterMove".

Scenarij izgleda takole:

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

V nadaljevanju je razlaga vsakega dela.

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

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

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

Start Najprej dobite komponento v metodiAnimator. Update To bo uporabljeno v , zato ga imejte vnaprej.

Animator.SetFloat Metoda lahko nastavi vrednost za določeno ime parametra. V nastavitvah animacije nastavimo, katero animacijo uporabiti glede na vrednosti X in Y. Če nastavite smer parametrov X in Y, bo animacija izvedena v tej smeri. V začetnem stanju želimo obrniti navzdol, zato določimo (X: 0, Y: -1). Mimogrede, upoštevajte, da imena parametrov razlikujejo med velikimi in malimi črkami.

/// <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 Pri metodi občasno preverjamo stanje vnosa tipkovnice in ga obdelujemo, ko je vnos.

GetMove Metoda je zasnovana tako, da vrne navodila za pot, ko tipkovnica vhodi. Vsebina obdelave temelji na tem, kar je opisano v nasvetih za vnos tipkovnice, zato jo bom izpustil.

Ko je na voljo vnos s tipkovnico, Animator.SetFloat nastavite smer na metodo. To omogoča animacijo v smeri, v katero ste se premaknili. transform.Translate Po tem premikamo predmet z metodo.

Ko ustvarite skript, ga priložite predmetu znaka.

usmrtitev

S tem se zaključi celoten proces. Poskusite zagnati igro in pritisniti tipke kazalca na tipkovnici, da jo premaknete. Če se znak premika v smeri, v katero ste ga pritisnili, in se animacija hoje premika, medtem ko grafika spremeni smer v smer, v katero ste obrnjeni, ste končali.