Implementați o animație de mers pe jos pentru un personaj personaj personaj sprite cu 4 căi

Mediul de verificare

Windows

• Ferestre 11

Unity Editor

• 2020.3.25F1

Pachete de sisteme de intrare

• 1.2.0

Cerințe preliminare pentru acest sfat

Următoarele setări sunt preconfigurate ca o condiție prealabilă pentru explicarea acestor sfaturi.

• Vă prezentăm pachetul sistemului de intrare
• Alinierea camerei (2D) cu pânza

Site de referință

• Realizarea unui RPG cu Unity Partea 1: Animație și funcționare de mers pe jos

Pregătirea graficelor de mers pe jos

În primul rând, animația de mers pe jos se realizează prin comutarea constantă între mai multe imagini pentru a face să pară că mergeți. Prin urmare, este necesar să se pregătească cât mai multe imagini necesare pentru a arăta direcția de mișcare și de mers pe jos.

Pentru a obține cea mai simplă animație de mers pe jos, este obișnuit să pregătiți următoarea imagine. Acest model este, de asemenea, utilizat în multe RPG-uri.

În primul rând, este împărțit în patru linii deasupra și dedesubt, dar arată direcția cu care vă veți confrunta atunci când mergeți. De sus, este "jos, stânga, dreapta, sus".

Și pentru stânga și dreapta, va fi o mișcare de mers în acea direcție. Fluxul general este "mijloc, stânga, mijloc, dreapta, mijloc ...".

Dimensiunea unei celule a personajului pregătit de data aceasta este de 32x32px. Deoarece este pregătit pentru pătrate 3x4, dimensiunea reală a fișierului imagine este de 96x128px. Apropo, nu există nicio limită la dimensiunea unui caracter, deci este posibilă și 32x48px sau 64x64px.

* Imaginea pregătită de data aceasta este Iwamaru-kun, pe care am făcut-o cu mult timp în urmă. Îl puteți folosi ca verificare a comportamentului.

Crearea unui proiect și pregătirea imaginilor

În eșantionul pe care îl vom crea de data aceasta, vom presupune că puteți plasa un caracter și îl puteți muta cu tastele cursorului de pe tastatură.

Primul pas este crearea unui nou proiect 2D. Adăugați imaginea personajului pe care ați pregătit-o pentru proiectul dvs.

Selectați imaginea pe care tocmai ați adăugat-o și configurați următoarele setări în inspector:

După setare, faceți clic pe butonul "Aplicați" din partea de jos.

Apoi, împărțiți imaginea astfel încât să puteți comuta între ele în Unity. Există un buton "Editor Sprite" în inspector, deci faceți clic pe el.

Când apare dialogul Sprite Editor, faceți clic pe meniul derulant "Felie", setați "Tip" la "Grilă după dimensiunea celulei", Introduceți o dimensiune în pixeli de 32 (în funcție de dimensiunea caracterului) și faceți clic pe butonul Felie.

Apoi, imaginea va fi împărțită la dimensiunea specificată. Dacă este confuz, apăsați tasta Ctrl pentru a vedea o linie de divizare.

După divizare, faceți clic pe butonul "Aplicați" pentru ao închide.

Dacă faceți clic pe butonul cerc din dreapta al fișierului imagine din proiect pentru a-l extinde, puteți vedea că imaginea este împărțită.

Crearea datelor de animație

Plasați imaginea creată în secțiunea anterioară în vizualizare.

Apoi, în loc să adăugați imaginea, va fi afișat un dialog de salvare. Aceasta va salva setările de animație, așa că, deocamdată, salvați-o ca "< nume imagine >Animation.anim".

Aceasta va crea două fișiere în proiect, cu imaginea divizată în vizualizare și imaginea ulterioară în vizualizare.

Apropo, dacă rulați jocul în această stare, cred că personajul se va anima singur. Aceasta este o stare în care 12 imagini sunt comutate și afișate în orice moment.

Dacă jocul rulează, părăsiți-l și selectați fila Animații. Dacă nu, selectați "Window -> Animation -> Animation" din meniu.

Ați selectat obiectul pe care l-ați creat din ierarhie (în acest caz, Iwamaru_0).

Există deja o animație generată automat, dar nu am nevoie de ea, așa că o voi șterge mai târziu. Există un meniu derulant numit "IwamaruAnimation" pe care l-am numit de data aceasta, așa că faceți clic pe el și selectați "Creați un clip nou".

Apoi va apărea dialogul de salvare. Deoarece vom crea o animație a mișcării în jos, o vom lăsa ca "Iwamaru Down".

Selectați "Iwamaru_0" din ierarhie și schimbați animația în "IwamaruDown".

De data aceasta, vom repeta animația în "stânga, mijloc, dreapta, mediu", așa că vom seta numărul de eșantioane la 4. Apoi, cronologia din dreapta va fi împărțită în 4 părți.

Plasați Iwamaru_0, imaginea din colțul din stânga sus al proiectului, pe 0,0 în cronologia animației.

Apoi, aruncați "Iwamaru_1" din imaginea din mijloc de mai sus la 0,1 și 0,3.

În cele din urmă, aruncați "Iwamaru_2" din imaginea din dreapta sus la 0,2.

Când ați terminat, faceți clic pe butonul de redare. Puteți vedea că personajul din vedere merge și se animă. (Acest exemplu de imagine este puțin greu de înțeles, dar ...)

Urmați aceiași pași pentru a crea animații la stânga, la dreapta și sus.

Rezultatul final ar trebui să arate similar cu imaginea de mai jos.

Asigurați-vă că fiecare direcție se animă corect.

Setări de tranziție pentru animație

Apoi, faceți dublu clic pe "Iwamaru_0.controller" din proiect pentru al deschide.

Apoi se va deschide fila Animator și veți vedea un ecran ca cel prezentat în figură. Acest lucru se datorează faptului că animația pe care tocmai ați creat-o este ". controler".

Faceți clic dreapta pe un spațiu gol și selectați Creare stare -> Din noul copac de prieteni.

Va fi creat un nou "Blend Tree", faceți clic dreapta pe el și selectați "Set Layer as Default State".

Intrarea se va uita apoi la arborele de amestec. Aceasta înseamnă că atunci când animația se mișcă, arborele de amestec va fi primul lucru care se mișcă.

Vom configura animații în Blend Tree, așa că vom șterge toate animațiile existente.

Există o filă "Parametri" în stânga, deci selectați-o și adăugați "Float" din butonul +.

Deoarece există doi parametri, aceștia sunt numiți "X" și, respectiv, "Y".

Faceți dublu clic pe arborele amestecului.

Selectați arborele de amestec care apare.

Din Inspector, schimbați tipul de amestec în 2D Simple Dictional.

Setați parametrii la "X" și "Y".

Din butonul + din Mișcare, selectați Adăugați câmp de mișcare de 4 ori.

Valoarea inițială poate fi diferită, dar ar trebui să arate ca figura.

Pentru cele patru elemente de mișcare pe care le-am adăugat, vom seta anim-urile de sus, de jos, din stânga și din dreapta în proiect.

Apoi, specificați în ce direcție ar trebui să se deplaseze fiecare animație.

Aceasta finalizează configurarea animației.

În cele din urmă, puteți șterge fișierul de animație generat automat, deoarece nu aveți nevoie de el.

Controlul mișcării

Mișcarea se face prin apăsarea unei taste de pe tastatură, astfel încât să puteți crea un script pentru a o controla. De data aceasta, scenariul va fi atașat personajului, așa că îl vom lăsa ca "CharacterMove".

Scenariul arată astfel:

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

Următoarea este o explicație a fiecărei părți.

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

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

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

Start Mai întâi, obțineți componenta în Animator metodă. Update Acest lucru va fi folosit în , deci faceți-l în avans.

Animator.SetFloat Metoda poate seta o valoare pentru numele parametrului specificat. În setările de animație, setăm ce animație să folosim în funcție de valorile X și Y. Dacă setați direcția parametrilor X și Y, animația va fi executată în acea direcție. În starea inițială, vrem să ne confruntăm cu fața în jos, așa că specificăm (X: 0, Y: -1). Apropo, rețineți că numele parametrilor sunt sensibile la majuscule și minuscule.

/// <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 În metodă, verificăm periodic starea de intrare a tastaturii și o procesăm atunci când există intrare.

GetMove Metoda este concepută pentru a returna indicații de orientare pe măsură ce tastatura intră. Conținutul de procesare se bazează pe ceea ce este descris în Sfaturi de introducere a tastaturii, așa că îl voi omite.

Când există o intrare de la tastatură, Animator.SetFloat setați direcția metodei. Acest lucru permite animația în direcția în care v-ați mutat. transform.Translate După aceea, mutăm obiectul cu metoda.

După ce ați creat scriptul, atașați-l la obiectul personaj.

execuție

Acest lucru finalizează întregul proces. Încercați să rulați jocul și să apăsați tastele cursorului de pe tastatură pentru a-l muta. Dacă personajul se mișcă în direcția în care l-ați apăsat, iar animația de mers se mișcă în timp ce graficul își schimbă direcția în direcția cu care vă confruntați, ați terminat.