Implementera en gånganimering för en 4-vägs sprite-karaktär

Miljö för verifiering

Windows

• Windows 11 (på engelska)

Unity-redigeraren

• 2020.3.25f1

Paket för indatasystem

• 1.2.0

Förutsättningar för det här tipset

Följande inställningar är förkonfigurerade som en förutsättning för förklaringen av dessa tips.

• Introduktion till inmatningssystempaketet
• Rikta in kameran (2D) med duken

Referens webbplats

• Att göra ett RPG med Unity Part 1: Walking Animation and Operation

Förberedelse av vandringsgrafik

Först och främst uppnås gånganimationen genom att ständigt växla mellan flera bilder för att få det att se ut som om du går. Därför är det nödvändigt att förbereda så många bilder som behövs för att visa rörelse- och gångriktningen.

För att uppnå den enklaste gånganimationen är det vanligt att förbereda följande bild. Det här mönstret används också i många rollspel.

Först och främst är den uppdelad i fyra linjer ovanför och nedanför, men den visar riktningen du kommer att möta när du går. Uppifrån är det "ner, vänster, höger, upp".

Och för vänster och höger blir det en gående rörelse i den riktningen. Det allmänna flödet är "mitten, vänster, mitten, höger, mitten...".

Storleken på en cell av tecknet som förberetts den här gången är 32x32px. Eftersom den är förberedd för 3x4 rutor är den faktiska storleken på bildfilen 96x128px. Det finns förresten ingen gräns för storleken på ett tecken, så 32x48px eller 64x64px är också möjligt.

* Bilden som är förberedd den här gången är Iwamaru-kun, som jag gjorde för länge sedan. Du kan använda den som en beteendeverifiering.

Skapa ett projekt och förbered bilder

I exemplet vi kommer att skapa den här gången antar vi att du kan placera ett tecken och flytta det med markörtangenterna på tangentbordet.

Det första steget är att skapa ett nytt 2D-projekt. Lägg till den karaktärsbild som du har förberett för projektet.

Markera den bild som du just har lagt till och konfigurera följande inställningar i inspektören:

Efter inställningen klickar du på knappen "Apply" längst ner.

Dela sedan upp avbildningen så att du kan växla mellan dem i Unity. Det finns en "Sprite Editor"-knapp i granskaren, så klicka på den.

När dialogrutan Sprite Editor visas klickar du på rullgardinsmenyn "Segment" och ställer in "Typ" till "Rutnät efter cellstorlek", Ange en pixelstorlek på 32 (beroende på storleken på din karaktär) och klicka på knappen Segment.

Sedan delas bilden upp med den angivna storleken. Om det är förvirrande trycker du på Ctrl-tangenten för att se en skiljelinje.

När du har delat klickar du på knappen "Apply" för att stänga den.

Om du klickar på cirkelns högra knapp för bildfilen i projektet för att expandera den kan du se att bilden är delad.

Skapa animeringsdata

Släpp bilden som skapades i föregående avsnitt i vyn.

Sedan, istället för att lägga till bilden, kommer en dialogruta att sparas. Detta kommer att spara animationsinställningarna, så för tillfället, spara den som "< bildnamn >Animation.anim".

Detta kommer att skapa två filer i projektet, med den delade bilden i vyn och den senare bilden i vyn.

Förresten, om du kör spelet i det här tillståndet tror jag att karaktären kommer att animeras på egen hand. Detta är ett tillstånd där 12 bilder växlas och visas när som helst.

Om spelet är igång avslutar du det och väljer fliken Animationer. Om inte, välj "Fönster -> Animation -> Animation" från menyn.

Du har valt det objekt som du skapade från hierarkin (i det här fallet Iwamaru_0).

Det finns redan en automatiskt genererad animering, men jag behöver den inte, så jag tar bort den senare. Det finns en rullgardinsmeny som heter "IwamaruAnimation" som jag namngav den här gången, så klicka på den och välj "Skapa nytt klipp".

Då visas dialogrutan för att spara. Eftersom vi kommer att skapa en animation av nedåtrörelsen kommer vi att lämna den som "Iwamaru Down".

Välj "Iwamaru_0" i hierarkin och ändra animeringen till "IwamaruDown".

Den här gången kommer vi att upprepa animeringen i "vänster, mitten, höger, medium", så vi kommer att ställa in antalet prover till 4. Då kommer tidslinjen till höger att delas upp i 4 delar.

Släpp Iwamaru_0, bilden i det övre vänstra hörnet av projektet, på 0,0 i tidslinjen för animeringen.

Släpp sedan "Iwamaru_1" i den mellersta bilden ovan till 0,1 och 0,3.

Släpp slutligen "Iwamaru_2" i den övre högra bilden till 0,2.

När du är klar klickar du på uppspelningsknappen. Du kan se att karaktären i vyn går och animerar. (Den här exempelbilden är lite svår att förstå, men ...)

Följ samma steg för att skapa vänster-, höger- och toppanimeringar.

Slutresultatet bör se ut ungefär som på bilden nedan.

Se till att varje riktning animeras korrekt.

Inställningar för animeringsövergångar

Dubbelklicka sedan på "Iwamaru_0.controller" från projektet för att öppna det.

Då öppnas fliken Animator och du kommer att se en skärm som den som visas i figuren. Detta beror på att animeringen du just skapade är ". controller"-filen.

Högerklicka på ett tomt utrymme och välj Skapa tillstånd -> Från nytt vänträd.

Ett nytt "Blend Tree" kommer att skapas, högerklicka på det och välj "Set Layer as Default State".

Posten kommer sedan att titta på blandningsträdet. Det betyder att när animeringen rör sig kommer blandningsträdet att vara det första som flyttas.

Vi kommer att ställa in animationer i blandningsträdet, så vi kommer att ta bort alla befintliga animationer.

Det finns en flik "Parametrar" till vänster, så välj den och lägg till "Float" från +-knappen.

Eftersom det finns två parametrar heter de "X" respektive "Y".

Dubbelklicka på blandningsträdet.

Välj blandningsträdet som visas.

Från Granskaren ändrar du blandningstypen till 2D Simple Dictional.

Ställ in parametrarna på "X" och "Y".

Från +-knappen i Rörelse väljer du Lägg till rörelsefält 4 gånger.

Det initiala värdet kan vara annorlunda, men det bör se ut som i figuren.

För de fyra Motion-objekten som vi har lagt till kommer vi att ställa in topp-, botten-, vänster- och höger-.anims i projektet.

Ange sedan i vilken riktning varje animering ska röra sig.

Detta slutför animeringsinställningen.

Slutligen kan du ta bort den automatiskt genererade animeringsfilen eftersom du inte behöver den.

Kontroll av rörelser

Förflyttning görs genom att trycka på en tangent på tangentbordet, så att du kan skapa ett skript för att styra det. Den här gången kommer skriptet att kopplas till karaktären, så vi lämnar det som "CharacterMove".

Skriptet ser ut så här:

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

Följande är en förklaring av varje del.

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

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

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

Start Hämta först komponenten i Animator metoden. Update Detta kommer att användas i , så ha det i förväg.

Animator.SetFloat Metoden kan ange ett värde för det angivna parameternamnet. I animeringsinställningarna ställer vi in vilken animering som ska användas enligt X- och Y-värdena. Om du ställer in riktningen för X- och Y-parametrarna kommer animeringen att utföras i den riktningen. I det ursprungliga tillståndet vill vi vara vända nedåt, så vi anger (X: 0, Y: -1). Observera förresten att parameternamn är skiftlägeskänsliga.

/// <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 I metoden kontrollerar vi regelbundet tangentbordets inmatningsstatus och bearbetar den när det finns inmatning.

GetMove Metoden är utformad för att returnera riktningar som tangentbordsinmatningar. Bearbetningsinnehållet är baserat på vad som beskrivs i Tangentbordsinmatningstips, så jag kommer att utelämna det.

När det finns tangentbordsinmatning Animator.SetFloat ställer du in riktningen till metoden. Detta möjliggör animering i den riktning du flyttade. transform.Translate Därefter flyttar vi objektet med metoden.

När du har skapat skriptet kopplar du det till karaktärsobjektet.

avrättning

Detta avslutar hela processen. Prova att köra spelet och trycka på markörtangenterna på tangentbordet för att flytta det. Om karaktären rör sig i den riktning du tryckte på den, och gånganimeringen rör sig medan grafiken ändrar riktning till den riktning du är vänd mot, är du klar.