Įdiekite vaikščiojimo animaciją 4 krypčių "sprite" personažui

Tikrinimo aplinka

Windows

• Langai 11

"Unity" redaktorius

• 2020.3.25f1

Įvesties sistemos paketai

• 1.2.0

Būtinos šio patarimo sąlygos

Toliau nurodyti parametrai yra iš anksto sukonfigūruoti kaip būtina šių patarimų paaiškinimo sąlyga.

• Pristatome įvesties sistemos paketą
• Sulygiuokite fotoaparatą (2D) su drobe

Informacinė svetainė

• RPG kūrimas naudojant "Unity" 1 dalies vaikščiojimo animaciją ir veikimą

Pėsčiųjų grafikos paruošimas

Visų pirma, vaikščiojimo animacija pasiekiama nuolat perjungiant kelis vaizdus, kad atrodytų, jog vaikštote. Todėl būtina paruošti tiek vaizdų, kiek reikia, kad būtų parodyta judėjimo ir vaikščiojimo kryptis.

Norint pasiekti paprasčiausią vaikščiojimo animaciją, įprasta paruošti šį vaizdą. Šis modelis taip pat naudojamas daugelyje RPG.

Visų pirma, jis yra padalintas į keturias eilutes aukščiau ir žemiau, tačiau jis rodo kryptį, su kuria susidursite eidami. Iš viršaus jis yra "žemyn, kairėn, dešinėn, aukštyn".

O kairei ir dešinei tai bus ėjimas ta kryptimi. Bendras srautas yra "vidurys, kairė, vidurys, dešinė, vidurys...".

Vieno šį kartą paruošto simbolio langelio dydis yra 32x32px. Kadangi jis paruoštas 3x4 kvadratams, tikrasis vaizdo failo dydis yra 96x128px. Beje, vieno simbolio dydžiui nėra ribų, todėl galimas ir 32x48px arba 64x64px.

* Šį kartą parengtas vaizdas yra Iwamaru-kun, kurį padariau seniai. Galite naudoti jį kaip elgesio patvirtinimą.

Sukurkite projektą ir paruoškite vaizdus

Pavyzdyje, kurį sukursime šį kartą, manysime, kad galite įdėti simbolį ir perkelti jį klaviatūros žymeklio klavišais.

Pirmas žingsnis yra sukurti naują 2D projektą. Pridėkite simbolio vaizdą, kurį paruošėte savo projektui.

Pasirinkite ką tik pridėtą vaizdą ir sukonfigūruokite šiuos inspektoriaus parametrus:

Po nustatymo spustelėkite apačioje esantį mygtuką "Taikyti".

Tada padalinkite vaizdą, kad galėtumėte perjungti juos vienybėje. Inspektoriuje yra mygtukas "Sprite Editor", todėl spustelėkite jį.

Kai pasirodys "Sprite Editor" dialogo langas, spustelėkite išskleidžiamąjį meniu "Pjūvis", nustatykite "Tipas" į "Tinklelis pagal ląstelių dydį", Įveskite pikselių dydį 32 (atsižvelgiant į jūsų simbolio dydį) ir spustelėkite mygtuką Pjaustyti.

Tada vaizdas bus padalintas pagal nurodytą dydį. Jei tai painu, paspauskite klavišą Ctrl, kad pamatytumėte skiriamąją liniją.

Po padalijimo spustelėkite mygtuką "Taikyti", kad jį uždarytumėte.

Jei spustelėsite apskritimo dešinįjį vaizdo failo mygtuką projekte, kad jį išplėstumėte, pamatysite, kad vaizdas yra padalintas.

Animacijos duomenų kūrimas

Numeskite ankstesniame skyriuje sukurtą vaizdą į rodinį.

Tada, užuot pridėję vaizdą, bus rodomas išsaugojimo dialogo langas. Tai išsaugos animacijos nustatymus, todėl kol kas išsaugokite jį kaip "< vaizdo pavadinimą >Animation.anim".

Taip projekte bus sukurti du failai su padalintu vaizdu rodinyje ir vėlesniu vaizdu rodinyje.

Beje, jei paleisite žaidimą tokioje būsenoje, manau, kad personažas animuos pats. Tai būsena, kai bet kuriuo metu perjungiami ir rodomi 12 vaizdų.

Jei žaidimas veikia, uždarykite jį ir pasirinkite skirtuką Animacijos. Jei ne, meniu pasirinkite "Window -> Animation -> Animation".

Pasirinkote objektą, kurį sukūrėte iš hierarchijos (šiuo atveju Iwamaru_0).

Jau yra automatiškai sugeneruota animacija, bet man jos nereikia, todėl vėliau ją ištrinsiu. Yra išskleidžiamasis meniu pavadinimu "IwamaruAnimation", kurį pavadinau šį kartą, todėl spustelėkite jį ir pasirinkite "Sukurti naują klipą".

Tada pasirodys išsaugojimo dialogo langas. Kadangi sukursime judėjimo žemyn animaciją, paliksime ją kaip "Iwamaru Down".

Hierarchijoje pasirinkite "Iwamaru_0" ir pakeiskite animaciją į "IwamaruDown".

Šį kartą animaciją pakartosime "kairėje, viduryje, dešinėje, terpėje", todėl mėginių skaičių nustatysime į 4. Tada dešinėje esanti laiko juosta bus padalinta į 4 dalis.

Numeskite Iwamaru_0, vaizdą viršutiniame kairiajame projekto kampe, ant 0,0 animacijos laiko juostoje.

Tada numeskite "Iwamaru_1" aukščiau esančiame viduriniame paveikslėlyje iki 0,1 ir 0,3.

Galiausiai numeskite "Iwamaru_2" viršutiniame dešiniajame paveikslėlyje iki 0,2.

Baigę spustelėkite paleidimo mygtuką. Matote, kad rodinio veikėjas vaikšto ir animuoja. (Šį pavyzdinį vaizdą šiek tiek sunku suprasti, bet ...)

Atlikite tuos pačius veiksmus, kad sukurtumėte animaciją kairėje, dešinėje ir viršuje.

Galutinis rezultatas turėtų atrodyti panašus į toliau pateiktą paveikslėlį.

Įsitikinkite, kad kiekviena kryptis animuojama teisingai.

Animacijos perėjimo nustatymai

Tada dukart spustelėkite "Iwamaru_0.controller" iš projekto, kad jį atidarytumėte.

Tada atsidarys skirtukas "Animatorius" ir pamatysite ekraną, panašų į parodytą paveikslėlyje. Taip yra todėl, kad ką tik sukurta animacija yra ". kontrolierius" failą.

Dešiniuoju pelės mygtuku spustelėkite tuščią vietą ir pasirinkite Sukurti būseną -> Iš naujo draugų medžio.

Bus sukurtas naujas "Maišymo medis", dešiniuoju pelės mygtuku spustelėkite jį ir pasirinkite "Nustatyti sluoksnį kaip numatytąją būseną".

Tada įrašas pažvelgs į "Blend Tree". Tai reiškia, kad kai animacija juda, "Blend Tree" bus pirmas dalykas, kurį reikia perkelti.

Ketiname nustatyti animacijas "Blend Tree", todėl ištrinsime visas esamas animacijas.

Kairėje yra skirtukas "Parametrai", todėl pasirinkite jį ir + mygtuke pridėkite "Float".

Kadangi yra du parametrai, jie atitinkamai vadinami "X" ir "Y".

Dukart spustelėkite suliejimo medį.

Pasirinkite pasirodžiusį suliejimo medį.

Iš inspektoriaus pakeiskite mišinio tipą į 2D Simple Dictional.

Nustatykite parametrus į "X" ir "Y".

Iš mygtuko +, esančio judesyje, pasirinkite Pridėti judesio lauką 4 kartus.

Pradinė vertė gali skirtis, tačiau ji turėtų atrodyti kaip paveikslas.

Keturiems "Motion" elementams, kuriuos pridėjome, projekte nustatysime viršų, apačią, kairę ir dešinę.

Tada nurodykite, kuria kryptimi turėtų judėti kiekviena animacija.

Tai užbaigia animacijos sąranką.

Galiausiai galite ištrinti automatiškai sugeneruotą animacijos failą, nes jums jo nereikia.

Judėjimo kontrolė

Judėjimas atliekamas paspaudus klaviatūros klavišą, todėl galite sukurti scenarijų, kad jį valdytumėte. Šį kartą scenarijus bus pridėtas prie personažo, todėl paliksime jį kaip "CharacterMove".

Scenarijus atrodo taip:

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

Toliau pateikiamas kiekvienos dalies paaiškinimas.

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

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

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

Start Pirma, gaukite metodo komponentąAnimator. Update Tai bus naudojama , todėl turėkite jį iš anksto.

Animator.SetFloat Metodas gali nustatyti nurodyto parametro pavadinimo reikšmę. Animacijos nustatymuose nustatome, kurią animaciją naudoti pagal X ir Y reikšmes. Jei nustatysite X ir Y parametrų kryptį, animacija bus vykdoma ta kryptimi. Pradinėje būsenoje norime atsigręžti žemyn, todėl nurodome (X: 0, Y: -1). Beje, atkreipkite dėmesį, kad parametrų pavadinimuose skiriamos didžiosios ir mažosios raidės.

/// <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 Taikydami šį metodą, periodiškai tikriname klaviatūros įvesties būseną ir apdorojame ją, kai yra įvestis.

GetMove Šis metodas skirtas grąžinti kryptis kaip klaviatūros įvestis. Apdorojimo turinys pagrįstas tuo, kas aprašyta klaviatūros įvesties patarimuose, todėl aš jį praleisiu.

Kai yra klaviatūros įvestis, Animator.SetFloat nustatykite metodo kryptį. Tai įgalina animaciją ta kryptimi, kuria judėjote. transform.Translate Po to mes perkeliame objektą su metodu.

Sukūrę scenarijų, pridėkite jį prie simbolio objekto.

Vykdymo

Tai užbaigia visą procesą. Pabandykite paleisti žaidimą ir paspausti žymeklio klaviatūros klavišus, kad jį perkeltumėte. Jei veikėjas juda ta kryptimi, kuria jį paspaudėte, o ėjimo animacija juda, o grafika keičia kryptį į kryptį, į kurią nukreipite, viskas.