Toteuta kävelyanimaatio 4-suuntaiselle sprite-hahmolle

Varmennusympäristö

Windows

• Windows 11

Unity-editori

• 2020.3.25F1

Syöttöjärjestelmän paketit

• 1.2.0

Tämän vinkin edellytykset

Seuraavat asetukset on määritetty valmiiksi näiden vihjeiden selityksen edellytykseksi.

• Syöttöjärjestelmäpaketin esittely
• Kohdista kamera (2D) piirtoalueeseen

Referenssi sivusto

• RPG: n tekeminen Unity: Osa 1: Kävelyanimaatio ja toiminta

Kävelygrafiikan valmistelu

Ensinnäkin kävelyanimaatio saavutetaan vaihtamalla jatkuvasti useiden kuvien välillä, jotta se näyttää kävelemältä. Siksi on tarpeen valmistaa niin monta kuvaa kuin on tarpeen liikkeen ja kävelyn suunnan osoittamiseksi.

Yksinkertaisimman kävelyanimaation saavuttamiseksi on tavallista valmistaa seuraava kuva. Tätä mallia käytetään myös monissa roolipeleissä.

Ensinnäkin se on jaettu neljään riviin ylä- ja alapuolella, mutta se näyttää suunnan, jonka kohtaat kävellessäsi. Ylhäältä se on "alas, vasemmalle, oikealle, ylös".

Ja vasemmalle ja oikealle se on kävelyliike siihen suuntaan. Yleinen virtaus on "keskellä, vasemmalla, keskellä, oikealla, keskellä...".

Tällä kertaa valmistetun merkin yhden solun koko on 32x32px. Koska se on valmistettu 3x4 neliöille, kuvatiedoston todellinen koko on 96x128px. Muuten, yhden merkin kokoa ei ole rajoitettu, joten myös 32x48px tai 64x64px on mahdollista.

* Tällä kertaa valmistettu kuva on Iwamaru-kun, jonka tein kauan sitten. Voit käyttää sitä käyttäytymisen vahvistuksena.

Luo projekti ja valmistele kuvat

Tällä kertaa luomassamme näytteessä oletamme, että voit sijoittaa merkin ja siirtää sitä näppäimistön nuolinäppäimillä.

Ensimmäinen askel on luoda uusi 2D-projekti. Lisää projektia varten valmistelemasi hahmokuva.

Valitse juuri lisäämäsi kuva ja määritä seuraavat asetukset inspektorissa:

Asetuksen tekemisen jälkeen napsauta alareunassa olevaa Käytä-painiketta.

Jaa seuraavaksi kuva, jotta voit vaihtaa niiden välillä Unityssa. Inspektorissa on "Sprite Editor" -painike, joten napsauta sitä.

Kun Sprite Editor -valintaikkuna tulee näkyviin, napsauta avattavaa "Viipaloi" -valikkoa, aseta "Tyyppi" -asetukseksi "Ruudukko solun koon mukaan", Kirjoita kuvapistekooksi 32 (hahmosi koosta riippuen) ja osoita Leikkaa-painiketta.

Sitten kuva jaetaan määritetyllä koolla. Jos se on hämmentävää, paina Ctrl-näppäintä nähdäksesi jakoviivan.

Kun olet jakanut, sulje se napsauttamalla "Käytä" -painiketta.

Jos laajennat projektin kuvatiedoston oikean ympyrän painikkeen osoittamalla sitä, näet, että kuva on jaettu.

Animaatiotietojen luominen

Pudota edellisessä osassa luotu kuva näkymään.

Sitten kuvan lisäämisen sijaan näyttöön tulee tallennusikkuna. Tämä tallentaa animaatioasetukset, joten tallenna se toistaiseksi nimellä "< kuvan nimi >Animation.anim".

Tämä luo projektiin kaksi tiedostoa, joissa jaettu kuva on näkymässä ja myöhempi kuva näkymässä.

Muuten, jos suoritat pelin tässä tilassa, mielestäni hahmo animoituu yksin. Tämä on tila, jossa 12 kuvaa vaihdetaan ja näytetään milloin tahansa.

Jos peli on käynnissä, sulje se ja valitse Animaatiot-välilehti. Jos ei, valitse valikosta "Ikkuna -> Animaatio -> Animaatio".

Olet valinnut luomasi objektin hierarkiasta (tässä tapauksessa Iwamaru_0).

Automaattisesti luotu animaatio on jo olemassa, mutta en tarvitse sitä, joten poistan sen myöhemmin. Siellä on avattava valikko nimeltä "IwamaruAnimation", jonka nimesin tällä kertaa, joten napsauta sitä ja valitse "Luo uusi leike".

Sitten tallennusikkuna tulee näkyviin. Koska luomme animaation alaspäin suuntautuvasta liikkeestä, jätämme sen nimellä "Iwamaru Down".

Valitse hierarkiasta "Iwamaru_0" ja muuta animaatioksi "IwamaruDown".

Tällä kertaa toistamme animaation "vasen, keskimmäinen, oikea, keskikokoinen", joten asetamme näytteiden lukumääräksi 4. Sitten oikealla oleva aikajana jaetaan 4 osaan.

Pudota Iwamaru_0, projektin vasemmassa yläkulmassa oleva kuva, kohtaan 0,0 animaation aikajanalla.

Pudota seuraavaksi "Iwamaru_1" yllä olevassa keskimmäisessä kuvassa arvoon 0,1 ja 0,3.

Lopuksi pudota "Iwamaru_2" oikeassa yläkulmassa olevaan kuvaan arvoon 0,2.

Kun olet valmis, napsauta toistopainiketta. Voit nähdä, että näkymän hahmo kävelee ja animoi. (Tätä esimerkkikuvaa on hieman vaikea ymmärtää, mutta...)

Luo vasemman, oikean ja ylimmän animaation noudattamalla samoja ohjeita.

Lopputuloksen pitäisi näyttää samanlaiselta kuin alla oleva kuva.

Varmista, että jokainen suunta animoituu oikein.

Animaation siirtymäasetukset

Seuraavaksi kaksoisnapsauta "Iwamaru_0.controller" projektista avataksesi sen.

Sitten Animator-välilehti avautuu ja näet kuvassa olevan kaltaisen näytön. Tämä johtuu siitä, että juuri luomasi animaatio on ". ohjain" tiedosto.

Napsauta hiiren kakkospainikkeella tyhjää tilaa ja valitse Luo tila -> uudesta ystäväpuusta.

Uusi "Blend Tree" luodaan, napsauta sitä hiiren kakkospainikkeella ja valitse "Aseta kerros oletustilaksi".

Merkintä tarkastelee sitten sekoituspuuta. Tämä tarkoittaa, että kun animaatio liikkuu, sekoituspuu on ensimmäinen asia, joka liikkuu.

Aiomme määrittää animaatiot Blend Treessä, joten poistamme kaikki olemassa olevat animaatiot.

Vasemmalla on "Parametrit" -välilehti, joten valitse se ja lisää "Float" + -painikkeesta.

Koska parametreja on kaksi, niiden nimet ovat "X" ja "Y".

Kaksoisnapsauta sekoituspuuta.

Valitse näkyviin tuleva sekoituspuu.

Muuta inspektorissa sekoitustyypiksi 2D Simple Dictional.

Aseta parametrit "x" ja "y".

Valitse Motion-kohdan +-painikkeesta Lisää liikekenttä 4 kertaa.

Alkuarvo voi olla erilainen, mutta sen pitäisi näyttää luvulta.

Neljälle lisäämällemme Motion-kohteelle asetamme projektin ylä-, ala-, vasemman- ja oikean .anim-tiedostot.

Määritä sitten, mihin suuntaan kunkin animaation tulisi liikkua.

Tämä viimeistelee animaation asetukset.

Lopuksi voit poistaa automaattisesti luodun animaatiotiedoston, koska et tarvitse sitä.

Liikkeen ohjaus

Liike tapahtuu painamalla näppäimistön näppäintä, joten voit luoda komentosarjan sen ohjaamiseksi. Tällä kertaa käsikirjoitus liitetään hahmoon, joten jätämme sen nimellä "CharacterMove".

Skripti näyttää tältä:

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

Seuraavassa on selitys jokaisesta osasta.

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

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

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

Start Hanki ensin komponentti menetelmäänAnimator. Update Tätä käytetään , joten pidä se etukäteen.

Animator.SetFloat Menetelmä voi asettaa arvon määritetylle parametrin nimelle. Animaatioasetuksissa määritämme käytettävän animaation X- ja Y-arvojen mukaan. Jos asetat X- ja Y-parametrien suunnan, animaatio suoritetaan tähän suuntaan. Alkutilassa haluamme kuvapuoli alaspäin, joten määritämme (X: 0, Y: -1). Huomaa muuten, että parametrien nimissä kirjainkoolla on merkitystä.

/// <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 Menetelmässä tarkistamme säännöllisesti näppäimistön syöttötilan ja käsittelemme sen, kun tuloa on.

GetMove Menetelmä on suunniteltu palauttamaan ohjeet näppäimistön syöttäessä. Käsittelysisältö perustuu siihen, mitä on kuvattu kohdassa Näppäimistön syöttövinkit, joten jätän sen pois.

Kun näppäimistöä tulee, Animator.SetFloat aseta menetelmän suunta. Tämä mahdollistaa animaation liikkumasi suunnan mukaan. transform.Translate Sen jälkeen siirrämme objektia menetelmällä.

Kun olet luonut skriptin, liitä se merkkiobjektiin.

teloitus

Tämä täydentää koko prosessia. Yritä suorittaa peli ja siirtää sitä painamalla näppäimistön nuolinäppäimiä. Jos hahmo liikkuu siihen suuntaan, johon painoit sitä, ja kävelyanimaatio liikkuu, kun grafiikka muuttaa suuntaa suuntaan, olet valmis.