Rakendage kõndimisanimatsioon 4-suunalise spraitmärgi jaoks

Kontrollimise keskkond

Windows

• Windows 11

Ühtsuse toimetaja

• 2020.3.25f1

Sisendsüsteemi paketid

• 1.2.0

Selle näpunäite eeltingimused

Järgmised sätted on eelkonfigureeritud nende näpunäidete selgitamise eeltingimusena.

• Sisendsüsteemi paketi tutvustus
• Joondage kaamera (2D) lõuendiga

Viitesait

• RPG tegemine Ühtsusega, 1. osa Kõndimine, animatsioon ja toimimine

Kõndimisgraafika ettevalmistamine

Esiteks saavutatakse kõndimisanimatsioon, vahetades pidevalt mitme pildi vahel, et see näeks välja nagu kõnniksite. Seetõttu on vaja valmistada nii palju pilte kui vaja, et näidata liikumise ja kõndimise suunda.

Lihtsaima kõndimisanimatsiooni saavutamiseks on tavaline valmistada järgmine pilt. Seda mustrit kasutatakse ka paljudes RPG-des.

Esiteks on see jagatud neljaks reaks ülalt ja alt, kuid see näitab suunda, millega kõndides silmitsi seisate. Ülevalt on see "alla, vasakule, paremale, üles".

Ja vasakule ja paremale on see kõndiv liikumine selles suunas. Üldine vool on "keskmine, vasak, keskmine, parem, keskmine ...".

Seekord valmistatud märgi ühe lahtri suurus on 32x32px. Kuna see on ette valmistatud 3x4 ruutude jaoks, on pildifaili tegelik suurus 96x128px. Muide, ühe tähemärgi suurusele pole piiranguid, seega on võimalik ka 32x48px või 64x64px.

* Seekord tehtud pilt on Iwamaru-kun, mille tegin juba ammu. Saate seda kasutada käitumise kinnitamiseks.

Looge projekt ja valmistage ette pildid

Seekord loodavas näidises eeldame, et saate paigutada märgi ja liigutada seda klaviatuuri kursoriklahvidega.

Esimene samm on uue 2D-projekti loomine. Lisage märgipilt, mille oma projekti jaoks ette valmistasite.

Valige äsja lisatud pilt ja konfigureerige inspektoris järgmised sätted:

Pärast seadistamist klõpsake allosas nuppu "Rakenda".

Seejärel jagage pilt nii, et saaksite neid Unitys vahetada. Inspektoril on nupp "Sprite Editor", nii et klõpsake seda.

Kui ilmub dialoog Sprite Editor, klõpsake rippmenüüd "Viil", määrake "Tüüp" väärtuseks "Grid By Cell Size", Sisestage pikslisuurus 32 (sõltuvalt märgi suurusest) ja klõpsake nuppu Viilu.

Seejärel jagatakse pilt määratud suurusega. Kui see on segadusttekitav, vajutage eraldusjoone kuvamiseks juhtklahvi (Ctrl).

Pärast jagamist klõpsake selle sulgemiseks nuppu "Rakenda".

Kui klõpsate projekti pildifaili parempoolsele ringile selle laiendamiseks, näete, et pilt on jagatud.

Animatsiooniandmete loomine

Kukutage eelmises jaotises loodud pilt vaatesse.

Seejärel kuvatakse pildi lisamise asemel salvestamisdialoog. See salvestab animatsiooni seaded, nii et praegu salvestage see kui "< pildi nimi >Animation.anim".

See loob projektis kaks faili, mille vaates on jagatud pilt ja vaates hilisem pilt.

Muide, kui käivitate mängu selles olekus, arvan, et tegelane animeerib iseenesest. See on olek, kus 12 pilti vahetatakse ja kuvatakse igal ajal.

Kui mäng töötab, sulgege see ja valige vahekaart Animatsioonid. Kui ei, siis valige menüüst "Window -> Animation -> Animation".

Olete valinud loodud objekti hierarhiast (antud juhul Iwamaru_0).

Automaatselt loodud animatsioon on juba olemas, kuid mul pole seda vaja, nii et kustutan selle hiljem. Seal on rippmenüü nimega "IwamaruAnimation", mille ma seekord nimetasin, nii et klõpsake seda ja valige "Loo uus klipp".

Seejärel ilmub salvestamise dialoog. Kuna loome animatsiooni allaliikumisest, jätame selle "Iwamaru Downiks".

Valige hierarhiast "Iwamaru_0" ja muutke animatsioon väärtuseks "IwamaruDown".

Seekord kordame animatsiooni "vasakule, keskele, paremale, keskmisele", nii et seame proovide arvuks 4. Seejärel jagatakse paremal asuv ajajoon 4 osaks.

Kukutage Iwamaru_0, pilt projekti vasakus ülanurgas, animatsiooni ajaskaalal 0.0-le.

Seejärel kukutage ülaltoodud keskmises pildis olev "Iwamaru_1" 0, 1 ja 0, 3.

Lõpuks kukutage paremas ülanurgas olev "Iwamaru_2" 0,2-ni.

Kui olete lõpetanud, klõpsake esitusnuppu. Näete, et vaates olev tegelane kõnnib ja animeerib. (Seda näidispilti on veidi raske mõista, kuid ...)

Järgige samu juhiseid vasak-, parem- ja ülemiste animatsioonide loomiseks.

Lõpptulemus peaks välja nägema sarnane alloleva pildiga.

Veenduge, et iga suund animeeritakse õigesti.

Animatsiooni ülemineku sätted

Seejärel topeltklõpsake selle avamiseks projektist "Iwamaru_0.controller".

Seejärel avaneb vahekaart Animaator ja näete ekraani, nagu joonisel näidatud. Seda seetõttu, et äsja loodud animatsioon on ". kontroller" fail.

Paremklõpsake tühjal alal ja valige Create State -> From New Friend Tree.

Luuakse uus "Blend Tree", paremklõpsake seda ja valige "Set Layer as Default State".

Seejärel vaatab sissekanne segupuud. See tähendab, et kui animatsioon liigub, on Blend Tree esimene asi, mida liigutada.

Seadistame Blend Tree's animatsioonid, nii et kustutame kõik olemasolevad animatsioonid.

Vasakul on vahekaart "Parameetrid", nii et valige see ja lisage nupust + "Float".

Kuna parameetreid on kaks, nimetatakse neid vastavalt "X" ja "Y".

Topeltklõpsake nuppu Segupuu.

Valige kuvatav segupuu.

Muutke inspektorilt segu tüüp 2D Simple Dictionaliks.

Seadke parameetrid "X" ja "Y".

Valige liikumises oleva nupu + kaudu käsk Lisa liikumisväli 4 korda.

Algväärtus võib olla erinev, kuid see peaks välja nägema nagu joonis.

Nelja meie lisatud motion-üksuse jaoks seame projektis ülemise, alumise, vasaku ja parema .anims.

Seejärel määrake, millises suunas iga animatsioon peaks liikuma.

See lõpetab animatsiooni seadistamise.

Lõpuks saate automaatselt loodud animatsioonifaili kustutada, kuna te ei vaja seda.

Liikumise kontroll

Liikumine toimub klaviatuuri klahvi vajutamisega, nii et saate selle juhtimiseks luua skripti. Seekord lisatakse skript tegelasele, nii et jätame selle "CharacterMove".

Skript näeb välja selline:

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

Järgnevalt on toodud iga osa selgitus.

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

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

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

Start Esiteks hankige Animator meetodi komponent. Update Seda kasutatakse , nii et hoidke seda eelnevalt.

Animator.SetFloat Meetod võib määrata määratud parameetri nime väärtuse. Animatsiooni seadetes määrame, millist animatsiooni kasutada vastavalt X ja Y väärtustele. Kui määrate parameetrite X ja Y suuna, käivitatakse animatsioon selles suunas. Esialgses olekus tahame vaadata allapoole, nii et me täpsustame (X: 0, Y: -1). Muide, pange tähele, et parameetrite nimed on tõstutundlikud.

/// <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 Meetodis kontrollime perioodiliselt klaviatuuri sisendolekut ja töötleme seda sisendi olemasolul.

GetMove Meetod on mõeldud juhiste tagastamiseks klaviatuuri sisenditena. Töötlemissisu põhineb klaviatuuri sisendnõuannetes kirjeldatule, nii et ma jätan selle välja.

Klaviatuuri sisendi Animator.SetFloat korral määrake meetodi suund. See võimaldab animatsiooni teie liikunud suunas. transform.Translate Pärast seda liigutame objekti meetodiga.

Kui olete skripti loonud, manustage see märgiobjektile.

Täitmise

See lõpetab kogu protsessi. Proovige mängu käivitada ja vajutage selle liigutamiseks klaviatuuri kursoriklahve. Kui märk liigub suunas, kuhu vajutasite, ja kõndimisanimatsioon liigub, samal ajal kui graafika muudab suunda teie ees, siis ongi valmis.