Pastaigas animācijas ieviešana 4 virzienu sprite personāžam

Verifikācijas vide

Windows

• Operētājsistēmā Windows 11

Vienotības redaktors

• 2020.3.25f1

Ievades sistēmas pakotnes

• 1.2.0

Priekšnoteikumi šim padomam

Tālāk norādītie iestatījumi ir iepriekš konfigurēti kā priekšnosacījums šo padomu skaidrojumam.

• Ievades sistēmas paketes ieviešana
• Izlīdziniet kameru (2D) ar audeklu

Atsauces vietne

• RPG veidošana ar Unity 1. daļas staigāšanas animāciju un darbību

Pastaigu grafikas sagatavošana

Pirmkārt, staigāšanas animācija tiek panākta, pastāvīgi pārslēdzoties starp vairākiem attēliem, lai tas izskatītos kā staigājošs. Tāpēc ir nepieciešams sagatavot tik daudz attēlu, cik nepieciešams, lai parādītu kustības virzienu un staigāšanu.

Lai sasniegtu vienkāršāko pastaigas animāciju, parasti ir jāsagatavo šāds attēls. Šo modeli izmanto arī daudzos RPG.

Pirmkārt, tas ir sadalīts četrās rindās virs un zem, bet tas parāda virzienu, ar kuru jūs saskarsities, ejot. No augšas tas ir "uz leju, pa kreisi, pa labi, uz augšu".

Un kreisajam un labajam tas būs gājiens tajā virzienā. Vispārējā plūsma ir "vidējais, kreisais, vidējais, labais, vidējais...".

Šoreiz sagatavotās rakstzīmes vienas šūnas izmērs ir 32x32px. Tā kā tas ir sagatavots 3x4 kvadrātiem, attēla faila faktiskais izmērs ir 96x128px. Starp citu, vienas rakstzīmes lielumam nav ierobežojumu, tāpēc ir iespējams arī 32x48px vai 64x64px.

* Šoreiz sagatavotais attēls ir Iwamaru-kun, kuru es uztaisīju jau sen. To var izmantot kā uzvedības verifikāciju.

Izveidojiet projektu un sagatavojiet attēlus

Paraugā, ko mēs šoreiz izveidosim, mēs pieņemsim, ka jūs varat ievietot rakstzīmi un pārvietot to ar kursora taustiņiem uz tastatūras.

Pirmais solis ir izveidot jaunu 2D projektu. Pievienojiet savam projektam sagatavoto rakstzīmes attēlu.

Atlasiet tikko pievienoto attēlu un inspektorā konfigurējiet šādus iestatījumus:

Pēc iestatīšanas noklikšķiniet uz pogas "Lietot" apakšā.

Pēc tam sadaliet attēlu, lai jūs varētu pārslēgties starp tiem vienotībā. Inspektorā ir poga "Sprite Editor", tāpēc noklikšķiniet uz tā.

Kad parādās dialoglodziņš Sprite Editor, noklikšķiniet uz nolaižamās izvēlnes "Sektors", iestatiet "Tips" uz "Režģis pēc šūnas lieluma", Ievadiet pikseļu lielumu 32 (atkarībā no rakstzīmes lieluma) un noklikšķiniet uz pogas Sektors.

Pēc tam attēls tiks sadalīts ar norādīto izmēru. Ja tas ir mulsinoši, nospiediet taustiņu Ctrl, lai redzētu sadalošo līniju.

Pēc sadalīšanas noklikšķiniet uz pogas "Lietot", lai to aizvērtu.

Ja projektā noklikšķināt uz attēla faila apļa labās pogas, lai to izvērstu, var redzēt, ka attēls ir sadalīts.

Animācijas datu izveide

Nometiet iepriekšējā sadaļā izveidoto attēlu skatā.

Pēc tam attēla pievienošanas vietā tiks parādīts saglabāšanas dialoglodziņš. Tas saglabās animācijas iestatījumus, tāpēc pagaidām saglabājiet to kā "< attēla nosaukumu >Animation.anim".

Tādējādi projektā tiks izveidoti divi faili ar sadalīto attēlu skatā un vēlāko attēlu skatā.

Starp citu, ja jūs vadāt spēli šajā stāvoklī, es domāju, ka varonis animēsies pats. Tas ir stāvoklis, kurā 12 attēli tiek pārslēgti un parādīti jebkurā laikā.

Ja spēle darbojas, aizveriet to un atlasiet cilni Animācijas. Ja nē, izvēlnē atlasiet "Window -> Animation -> Animation".

Jūs esat atlasījis objektu, kuru izveidojāt no hierarhijas (šajā gadījumā Iwamaru_0).

Jau ir automātiski ģenerēta animācija, bet man tā nav vajadzīga, tāpēc vēlāk to izdzēsīšu. Ir nolaižamā izvēlne ar nosaukumu "IwamaruAnimation", kuru es šoreiz nosaucu, tāpēc noklikšķiniet uz tā un atlasiet "Izveidot jaunu klipu".

Tad parādīsies saglabāšanas dialoglodziņš. Tā kā mēs izveidosim kustības uz leju animāciju, mēs to atstāsim kā "Iwamaru Down".

Hierarhijā atlasiet "Iwamaru_0" un mainiet animāciju uz "IwamaruDown".

Šoreiz mēs atkārtosim animāciju "pa kreisi, vidū, pa labi, vidēji", tāpēc paraugu skaitu iestatīsim uz 4. Tad labajā pusē esošais laika grafiks tiks sadalīts 4 daļās.

Nometiet Iwamaru_0, attēlu projekta augšējā kreisajā stūrī, uz 0,0 animācijas laika skalā.

Pēc tam nometiet "Iwamaru_1" vidējā attēlā līdz 0,1 un 0,3.

Visbeidzot, augšējā labajā attēlā nometiet "Iwamaru_2" uz 0,2.

Kad esat pabeidzis, noklikšķiniet uz atskaņošanas pogas. Jūs varat redzēt, ka skata varonis staigā un animē. (Šis parauga attēls ir nedaudz grūti saprotams, bet ...)

Veiciet tās pašas darbības, lai izveidotu kreisās, labās un augšējās animācijas.

Gala rezultātam vajadzētu izskatīties līdzīgi zemāk redzamajam attēlam.

Pārliecinieties, vai katrs virziens ir animēts pareizi.

Animācijas pārejas iestatījumi

Pēc tam veiciet dubultklikšķi uz "Iwamaru_0.controller" no projekta, lai to atvērtu.

Tad tiks atvērta cilne Animators, un jūs redzēsiet ekrānu, kas līdzīgs attēlā redzamajam. Tas ir tāpēc, ka tikko izveidotā animācija ir ". pārziņa" failu.

Ar peles labo pogu noklikšķiniet uz tukšas vietas un atlasiet Izveidot stāvokli > no jauna draugu koka.

Tiks izveidots jauns "Blend Tree", ar peles labo pogu noklikšķiniet uz tā un atlasiet "Iestatīt slāni kā noklusējuma stāvokli".

Pēc tam ierakstā tiks apskatīts Blend Tree. Tas nozīmē, ka, animācijai pārvietojoties, Blend Tree būs pirmā lieta, kas pārvietosies.

Mēs iestatīsim animācijas Blend Tree, tāpēc mēs izdzēsīsim visas esošās animācijas.

Kreisajā pusē ir cilne "Parametri", tāpēc atlasiet to un pievienojiet pogu + "Float".

Tā kā ir divi parametri, tie tiek nosaukti attiecīgi par "X" un "Y".

Veiciet dubultklikšķi uz sapludināšanas koka.

Atlasiet sapludināšanas koku, kas tiek parādīts.

No inspektora mainiet maisījuma tipu uz 2D Simple Dictional.

Iestatiet parametrus uz "X" un "Y".

No pogas + sadaļā Kustība atlasiet Pievienot kustības lauku 4 reizes.

Sākotnējā vērtība var būt atšķirīga, bet tai vajadzētu izskatīties kā skaitlim.

Četriem kustības vienumiem, kurus pievienojām, projektā iestatīsim augšējo, apakšējo, kreiso un labo .anims.

Pēc tam norādiet, kurā virzienā katrai animācijai jāpārvietojas.

Tas pabeidz animācijas iestatīšanu.

Visbeidzot, varat izdzēst automātiski ģenerēto animācijas failu, jo tas nav nepieciešams.

Kustības vadība

Kustība tiek veikta, nospiežot tastatūras taustiņu, lai jūs varētu izveidot skriptu, lai to kontrolētu. Šoreiz skripts tiks pievienots rakstzīmei, tāpēc mēs to atstāsim kā "CharacterMove".

Skripts izskatās šādi:

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

Tālāk ir sniegts katras daļas skaidrojums.

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

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

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

Start Pirmkārt, iegūstiet komponentu Animator metodē. Update Tas tiks izmantots , tāpēc veiciet to iepriekš.

Animator.SetFloat Metode var iestatīt norādītā parametra nosaukuma vērtību. Animācijas iestatījumos mēs iestatām, kuru animāciju izmantot atbilstoši X un Y vērtībām. Ja iestatāt X un Y parametru virzienu, animācija tiks izpildīta šajā virzienā. Sākotnējā stāvoklī mēs vēlamies saskarties ar leju, tāpēc mēs norādām (X: 0, Y: -1). Starp citu, ņemiet vērā, ka parametru nosaukumi ir reģistrjutīgi.

/// <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 Metodē mēs periodiski pārbaudām tastatūras ievades statusu un apstrādājam to, kad ir ievade.

GetMove Metode ir paredzēta, lai atgrieztu virzienus, kad tastatūra ieejas. Apstrādes saturs ir balstīts uz to, kas aprakstīts tastatūras ievades padomos, tāpēc es to izlaidīšu.

Ja ir tastatūras ievade, Animator.SetFloat iestatiet metodes virzienu. Tas iespējo animāciju virzienā, kurā pārvietojāties. transform.Translate Pēc tam mēs pārvietojam objektu ar metodi.

Kad skripts ir izveidots, pievienojiet to rakstzīmes objektam.

Izpildes

Tas pabeidz visu procesu. Mēģiniet palaist spēli un nospiest tastatūras kursora taustiņus, lai to pārvietotu. Ja rakstzīme pārvietojas virzienā, kurā to nospiedāt, un staigāšanas animācija pārvietojas, kamēr grafika maina virzienu uz virzienu, kurā jūs saskaraties, esat pabeidzis.