Implementieren einer Gehanimation für einen 4-Wege-Sprite-Charakter

Verifikations-Umgebung

Fenster

• Windows 11

Unity-Editor

• 2020.3.25f1

Eingabesystem-Pakete

• 1.2.0

Voraussetzungen für diesen Tipp

Die folgenden Einstellungen sind als Voraussetzung für die Erläuterung dieser Tipps vorkonfiguriert.

• Einführung in das Eingabesystempaket
• Ausrichten der Kamera (2D) an der Leinwand

Referenz-Website

• Erstellen eines Rollenspiels mit Unity Teil 1 Walking Animation and Operation

Erstellung von Gehgrafiken

Zunächst einmal wird die Gehanimation erreicht, indem ständig zwischen mehreren Bildern gewechselt wird, damit es so aussieht, als würden Sie gehen. Daher ist es notwendig, so viele Bilder wie nötig vorzubereiten, um die Bewegungs- und Gehrichtung zu zeigen.

Um eine möglichst einfache Gehanimation zu erreichen, ist es üblich, das folgende Bild vorzubereiten. Dieses Muster wird auch in vielen RPGs verwendet.

Zunächst einmal ist es oben und unten in vier Linien unterteilt, zeigt aber die Richtung an, in die Sie beim Gehen blicken werden. Von oben heißt es "runter, links, rechts, rauf".

Und für die Linke und die Rechte wird es eine Gehbewegung in diese Richtung sein. Der allgemeine Ablauf ist "Mitte, links, Mitte, rechts, Mitte...".

Die Größe einer Zelle des dieses Mal vorbereiteten Zeichens beträgt 32x32px. Da es für 3x4 Quadrate vorbereitet ist, beträgt die tatsächliche Größe der Bilddatei 96x128px. Die Größe eines Zeichens ist übrigens nicht begrenzt, so dass auch 32x48px oder 64x64px möglich sind.

* Das Bild, das dieses Mal vorbereitet wurde, ist Iwamaru-kun, das ich vor langer Zeit gemacht habe. Sie können es als Verhaltensüberprüfung verwenden.

Erstellen eines Projekts und Vorbereiten von Images

In dem Beispiel, das wir dieses Mal erstellen werden, gehen wir davon aus, dass Sie ein Zeichen platzieren und mit den Cursortasten auf der Tastatur verschieben können.

Der erste Schritt besteht darin, ein neues 2D-Projekt zu erstellen. Fügen Sie das Charakterbild hinzu, das Sie für Ihr Projekt vorbereitet haben.

Wählen Sie das Bild aus, das Sie gerade hinzugefügt haben, und konfigurieren Sie die folgenden Einstellungen im Inspektor:

Klicken Sie nach der Einstellung unten auf die Schaltfläche "Übernehmen".

Teilen Sie als Nächstes das Bild, damit Sie in Unity zwischen ihnen wechseln können. Es gibt eine Schaltfläche "Sprite-Editor" im Inspektor, also klicke darauf.

Wenn das Dialogfeld "Sprite-Editor" angezeigt wird, klicken Sie auf das Dropdown-Menü "Slice", setzen Sie den "Typ" auf "Raster nach Zellengröße". Geben Sie eine Pixelgröße von 32 ein (abhängig von der Größe Ihres Charakters) und klicken Sie auf die Schaltfläche "Slice".

Dann wird das Bild nach der angegebenen Größe geteilt. Wenn es verwirrend ist, drücken Sie die Strg-Taste, um eine Trennlinie anzuzeigen.

Klicken Sie nach dem Teilen auf die Schaltfläche "Anwenden", um sie zu schließen.

Wenn Sie auf die kreisförmige rechte Schaltfläche der Bilddatei im Projekt klicken, um sie zu erweitern, können Sie sehen, dass das Bild geteilt ist.

Erstellen von Animationsdaten

Legen Sie das im vorherigen Abschnitt erstellte Bild in der Ansicht ab.

Anstatt das Bild hinzuzufügen, wird dann ein Dialogfeld zum Speichern angezeigt. Dadurch werden die Animationseinstellungen gespeichert, also speichern Sie sie vorerst als "< Bildname >Animation.anim".

Dadurch werden zwei Dateien im Projekt erstellt, wobei sich das geteilte Bild in der Ansicht und das spätere Bild in der Ansicht befindet.

Übrigens, wenn du das Spiel in diesem Zustand ausführst, denke ich, dass der Charakter von selbst animiert wird. Dabei handelt es sich um einen Zustand, in dem 12 Bilder geschaltet und jederzeit angezeigt werden.

Wenn das Spiel läuft, beenden Sie es und wählen Sie die Registerkarte Animationen. Wenn nicht, wählen Sie "Fenster -> Animation -> Animation" aus dem Menü.

Sie haben das Objekt, das Sie aus der Hierarchie angelegt haben (in diesem Fall Iwamaru_0).

Es gibt bereits eine automatisch generierte Animation, aber ich brauche sie nicht, also lösche ich sie später. Es gibt ein Dropdown-Menü namens "IwamaruAnimation", das ich dieses Mal benannt habe, also klicken Sie darauf und wählen Sie "Neuen Clip erstellen".

Dann erscheint der Speichern-Dialog. Da wir eine Animation der Abwärtsbewegung erstellen werden, belassen wir es bei "Iwamaru Down".

Wählen Sie "Iwamaru_0" aus der Hierarchie aus und ändern Sie die Animation in "IwamaruDown".

Dieses Mal wiederholen wir die Animation in "links, Mitte, rechts, mittel", also setzen wir die Anzahl der Samples auf 4. Dann wird die Zeitleiste auf der rechten Seite in 4 Teile unterteilt.

Legen Sie das Iwamaru_0, das Bild in der oberen linken Ecke des Projekts, in der Animationszeitleiste auf 0,0 ab.

Als nächstes setzen Sie das "Iwamaru_1" im mittleren Bild oben auf 0,1 und 0,3.

Zum Schluss setzen Sie das "Iwamaru_2" im oberen rechten Bild auf 0,2.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche "Wiedergabe". Sie können sehen, dass die Figur in der Ansicht läuft und animiert. (Dieses Beispielbild ist etwas schwer zu verstehen, aber ...)

Führen Sie die gleichen Schritte aus, um Animationen nach links, rechts und oben zu erstellen.

Das Endergebnis sollte in etwa wie in der folgenden Abbildung aussehen.

Stellen Sie sicher, dass jede Richtung korrekt animiert wird.

Einstellungen für Animationsübergänge

Doppelklicken Sie anschließend auf "Iwamaru_0.controller" aus dem Projekt, um es zu öffnen.

Dann öffnet sich die Registerkarte Animator und Sie sehen einen Bildschirm wie in der Abbildung gezeigt. Dies liegt daran, dass die Animation, die Sie gerade erstellt haben, ". controller"-Datei.

Klicken Sie mit der rechten Maustaste auf einen leeren Bereich und wählen Sie Status erstellen -> Aus neuem Freundesbaum.

Es wird ein neuer "Blend Tree" erstellt, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Ebene als Standardzustand festlegen".

Der Eintrag befasst sich dann mit dem Blend-Baum. Das bedeutet, dass beim Verschieben der Animation der Verschmelzungsbaum als erstes verschoben wird.

Wir werden Animationen in Blend Tree einrichten, also löschen wir alle vorhandenen Animationen.

Auf der linken Seite befindet sich eine Registerkarte "Parameter", wählen Sie sie aus und fügen Sie "Float" über die Schaltfläche + hinzu.

Da es zwei Parameter gibt, werden sie "X" bzw. "Y" genannt.

Doppelklicken Sie auf die Überblendungsstruktur.

Wählen Sie die angezeigte Verschmelzungsstruktur aus.

Ändere im Informationsfenster den Verschmelzungstyp in "Einfaches 2D-Wörterbuch".

Stellen Sie die Parameter auf "X" und "Y" ein.

Wählen Sie in Motion auf der Taste "+" die Option "Bewegungsfeld 4 Mal hinzufügen" aus.

Der Anfangswert kann unterschiedlich sein, sollte aber wie in der Abbildung aussehen.

Für die vier Motion-Elemente, die wir hinzugefügt haben, legen wir die obere, untere, linke und rechte .animation im Projekt fest.

Geben Sie dann an, in welche Richtung sich die einzelnen Animationen bewegen sollen.

Damit ist die Einrichtung der Animation abgeschlossen.

Schließlich können Sie die automatisch generierte Animationsdatei löschen, da Sie sie nicht benötigen.

Bewegungssteuerung

Die Bewegung erfolgt durch Drücken einer Taste auf der Tastatur, sodass Sie ein Skript erstellen können, um sie zu steuern. Dieses Mal wird das Skript an den Charakter angehängt, also belassen wir es bei "CharacterMove".

Das Skript sieht folgendermaßen aus:

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

Im Folgenden finden Sie eine Erläuterung der einzelnen Teile.

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

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

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

Start Rufen Sie zunächst die Komponente in der Animator Methode ab. Update Dies wird in verwendet, also haben Sie es im Voraus.

Animator.SetFloat Die Methode kann einen Wert für den angegebenen Parameternamen festlegen. In den Animationseinstellungen legen wir fest, welche Animation gemäß den X- und Y-Werten verwendet werden soll. Wenn Sie die Richtung der X- und Y-Parameter festlegen, wird die Animation in diese Richtung ausgeführt. Im Ausgangszustand wollen wir nach unten zeigen, also geben wir (X: 0, Y: -1) an. Beachten Sie übrigens, dass bei Parameternamen zwischen Groß- und Kleinschreibung unterschieden wird.

/// <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 Bei der Methode überprüfen wir regelmäßig den Eingabestatus der Tastatur und verarbeiten ihn, wenn eine Eingabe erfolgt.

GetMove Die Methode ist so konzipiert, dass Anweisungen als Tastatureingaben zurückgegeben werden. Der Verarbeitungsinhalt basiert auf dem, was in Tipps zur Tastatureingabe beschrieben ist, daher lasse ich ihn weg.

Wenn eine Tastatureingabe erfolgt, Animator.SetFloat legen Sie die Richtung für die Methode fest. Dadurch wird die Animation in die Richtung aktiviert, in die Sie sich bewegt haben. transform.Translate Danach verschieben wir das Objekt mit der Methode.

Nachdem Sie das Skript erstellt haben, hängen Sie es an das Charakterobjekt an.

Ausführung

Damit ist der gesamte Prozess abgeschlossen. Versuchen Sie, das Spiel auszuführen und die Cursortasten auf Ihrer Tastatur zu drücken, um es zu bewegen. Wenn sich die Figur in die Richtung bewegt, in die Sie sie gedrückt haben, und sich die Laufanimation bewegt, während die Grafik die Richtung ändert, in die Sie blicken, sind Sie fertig.