Zaimplementuj animację chodzenia dla 4-kierunkowej postaci duszka

Środowisko weryfikacyjne

Windows

• Okna 11

Edytor aparatu Unity

• 2020.3.25f1

Pakiety systemu wejściowego

• 1.2.0

Wymagania wstępne dotyczące tej porady

Poniższe ustawienia są wstępnie skonfigurowane jako warunek wstępny wyjaśnienia tych wskazówek.

• Przedstawiamy pakiet Input System Package
• Dopasuj kamerę (2D) do płótna

Witryna referencyjna

• Tworzenie gry RPG z Unity Część 1 Animacja chodzenia i obsługa

Przygotowanie grafiki spacerowej

Przede wszystkim animację chodzenia uzyskuje się poprzez ciągłe przełączanie się między wieloma obrazami, aby wyglądało, jakbyś szedł. Dlatego konieczne jest przygotowanie jak największej liczby obrazów, aby pokazać kierunek ruchu i chodzenia.

Aby uzyskać najprostszą animację chodzenia, często przygotowuje się następujący obraz. Ten wzór jest również używany w wielu grach RPG.

Przede wszystkim jest podzielony na cztery linie powyżej i poniżej, ale pokazuje kierunek, w którym będziesz zwrócony podczas chodzenia. Od góry jest "w dół, w lewo, w prawo, w górę".

A dla lewicy i prawicy będzie to ruch spacerowy w tym kierunku. Ogólny przepływ to "środek, lewo, środek, prawo, środek...".

Rozmiar jednej komórki przygotowanej tym razem postaci to 32x32px. Ponieważ jest przygotowany dla kwadratów 3x4, rzeczywisty rozmiar pliku obrazu to 96x128px. Nawiasem mówiąc, nie ma ograniczeń co do rozmiaru jednego znaku, więc możliwe jest również 32x48px lub 64x64px.

* Obraz przygotowany tym razem to Iwamaru-kun, który zrobiłem dawno temu. Możesz go użyć jako weryfikacji zachowania.

Tworzenie projektu i przygotowywanie obrazów

W przykładzie, który stworzymy tym razem, założymy, że możesz umieścić znak i przesuwać go za pomocą kursora na klawiaturze.

Pierwszym krokiem jest utworzenie nowego projektu 2D. Dodaj obraz postaci, który przygotowałeś dla swojego projektu.

Wybierz właśnie dodany obraz i skonfiguruj następujące ustawienia w inspektorze:

Po ustawieniu kliknij przycisk "Zastosuj" na dole.

Następnie podziel obraz, aby można było przełączać się między nimi w aparacie Unity. W inspektorze znajduje się przycisk "Edytor sprite'ów", więc kliknij go.

Gdy pojawi się okno dialogowe Edytor sprite'ów, kliknij menu rozwijane "Plasterek", ustaw "Typ" na "Siatka według rozmiaru komórki", Wprowadź rozmiar 32 pikseli (w zależności od rozmiaru znaku) i kliknij przycisk Plasterek.

Następnie obraz zostanie podzielony według określonego rozmiaru. Jeśli jest mylący, naciśnij Ctrl, aby zobaczyć linię podziału.

Po podzieleniu kliknij przycisk "Zastosuj", aby go zamknąć.

Jeśli klikniesz okrągły prawy przycisk pliku obrazu w projekcie, aby go rozwinąć, zobaczysz, że obraz jest podzielony.

Tworzenie danych animacji

Upuść obraz utworzony w poprzedniej sekcji do widoku.

Następnie, zamiast dodawania obrazu, zostanie wyświetlone okno dialogowe zapisywania. Spowoduje to zapisanie ustawień animacji, więc na razie zapisz ją jako "< nazwę obrazu >Animation.anim".

Spowoduje to utworzenie dwóch plików w projekcie, z podzielonym obrazem w widoku i późniejszym obrazem w widoku.

Nawiasem mówiąc, jeśli uruchomisz grę w tym stanie, myślę, że postać będzie się animować sama. Jest to stan, w którym 12 obrazów jest przełączanych i wyświetlanych w dowolnym momencie.

Jeśli gra jest uruchomiona, zamknij ją i wybierz kartę Animacje. Jeśli nie, wybierz z menu "Okno -> Animacja -> Animacja".

Utworzony obiekt został wybrany z hierarchii (w tym przypadku Iwamaru_0).

Jest już automatycznie wygenerowana animacja, ale jej nie potrzebuję, więc usunę ją później. Istnieje lista rozwijana o nazwie "IwamaruAnimation", którą nazwałem tym razem, więc kliknij ją i wybierz "Utwórz nowy klip".

Następnie pojawi się okno dialogowe zapisu. Ponieważ stworzymy animację ruchu w dół, zostawimy ją jako "Iwamaru Down".

Wybierz "Iwamaru_0" z hierarchii i zmień animację na "IwamaruDown".

Tym razem powtórzymy animację w "lewo, środek, prawo, medium", więc ustawimy liczbę próbek na 4. Następnie oś czasu po prawej stronie zostanie podzielona na 4 części.

Upuść Iwamaru_0, obraz w lewym górnym rogu projektu, na 0.0 na osi czasu animacji.

Następnie upuść "Iwamaru_1" na środkowym obrazku powyżej do 0,1 i 0,3.

Na koniec upuść "Iwamaru_2" w prawym górnym rogu obrazu do 0,2.

Gdy skończysz, kliknij przycisk odtwarzania. Widać, że postać w widoku chodzi i jest animowana. (Ten przykładowy obraz jest trochę trudny do zrozumienia, ale...)

Wykonaj te same czynności, aby utworzyć animacje lewej, prawej i górnej.

Efekt końcowy powinien wyglądać podobnie do poniższego obrazu.

Upewnij się, że każdy kierunek jest prawidłowo animowany.

Ustawienia przejścia animacji

Następnie kliknij dwukrotnie "Iwamaru_0.controller" w projekcie, aby go otworzyć.

Następnie otworzy się zakładka Animator i zobaczysz ekran podobny do pokazanego na rysunku. Dzieje się tak, ponieważ animacja, którą właśnie utworzyłeś, to ". kontroler".

Kliknij prawym przyciskiem myszy puste miejsce i wybierz Utwórz stan -> z nowego drzewa znajomych.

Zostanie utworzone nowe "Drzewo mieszania", kliknij je prawym przyciskiem myszy i wybierz "Ustaw warstwę jako stan domyślny".

Wpis będzie następnie patrzył na drzewo mieszania. Oznacza to, że gdy animacja się porusza, drzewo mieszania będzie pierwszą rzeczą do przesunięcia.

Skonfigurujemy animacje w Blend Tree, więc usuniemy wszystkie istniejące animacje.

Po lewej stronie znajduje się zakładka "Parametry", więc wybierz ją i dodaj "Float" z przycisku +.

Ponieważ istnieją dwa parametry, nazywają się one odpowiednio "X" i "Y".

Kliknij dwukrotnie drzewo metamorfozy.

Zaznacz wyświetlone drzewo mieszania.

W inspektorze zmień typ przejścia na Prosty słownik 2D.

Ustaw parametry na "X" i "Y".

Za pomocą przycisku + w aplikacji Motion wybierz opcję Dodaj pole ruchu 4 razy.

Wartość początkowa może być inna, ale powinna wyglądać jak na rysunku.

Dla czterech dodanych przez nas elementów ruchu ustawimy górny, dolny, lewy i prawy plik .anims w projekcie.

Następnie określ kierunek, w którym powinna poruszać się każda animacja.

Na tym kończy się konfiguracja animacji.

Na koniec możesz usunąć automatycznie wygenerowany plik animacji, ponieważ go nie potrzebujesz.

Sterowanie ruchem

Ruch odbywa się poprzez naciśnięcie na klawiaturze, dzięki czemu można utworzyć skrypt do sterowania nim. Tym razem skrypt zostanie dołączony do postaci, więc zostawimy go jako "CharacterMove".

Skrypt wygląda tak:

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

Poniżej znajduje się wyjaśnienie każdej części.

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

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

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

Start Najpierw pobierz składnik w Animator metodzie. Update Zostanie to wykorzystane w , więc miej to z wyprzedzeniem.

Animator.SetFloat Metoda może ustawić wartość dla określonej nazwy parametru. W ustawieniach animacji ustawiamy, która animacja ma być używana zgodnie z wartościami X i Y. Jeśli ustawisz kierunek parametrów X i Y, animacja zostanie wykonana w tym kierunku. W stanie początkowym chcemy zakryć w dół, więc określamy (X: 0, Y: -1). Nawiasem mówiąc, zwróć uwagę, że w nazwach parametrów rozróżniana jest wielkość liter.

/// <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 W metodzie okresowo sprawdzamy stan wejścia klawiatury i przetwarzamy go, gdy jest wejście.

GetMove Metoda jest przeznaczona do zwracania kierunków jako danych wejściowych z klawiatury. Przetwarzanie treści opiera się na tym, co jest opisane w Wskazówki dotyczące wprowadzania danych z klawiatury, więc pominę to.

Gdy dostępne są dane wejściowe z klawiatury, Animator.SetFloat ustaw kierunek na metodę. Umożliwia to animację w kierunku, w którym się poruszasz. transform.Translate Następnie przesuwamy obiekt za pomocą metody.

Po utworzeniu skryptu dołącz go do obiektu znaku.

egzekucja

Na tym kończy się cały proces. Spróbuj uruchomić grę i nacisnąć kursora na klawiaturze, aby ją przesunąć. Jeśli postać porusza się w kierunku, w którym ją nacisnąłeś, a animacja chodzenia porusza się, podczas gdy grafika zmienia kierunek na kierunek, w którym patrzysz, gotowe.