Implementer en gående animation til en 4-vejs sprite-karakter

Miljø til bekræftelse

Windows

• Windows 11

Enhedslistens redaktør

• 2020.3.25f1

Input System Pakker

• 1.2.0

Forudsætninger for dette tip

Følgende indstillinger er forudkonfigureret som en forudsætning for forklaringen af disse tip.

• Introduktion til inputsystempakken
• Juster kameraet (2D) med lærredet

Reference hjemmeside

• Lav en RPG med Unity Del 1: Walking Animation og Operation

Forberedelse af walking grafik

Først og fremmest opnås gåanimationen ved konstant at skifte mellem flere billeder for at få det til at se ud som om du går. Derfor er det nødvendigt at forberede så mange billeder som nødvendigt for at vise bevægelsesretningen og gå.

For at opnå den enkleste ganganimation er det almindeligt at forberede følgende billede. Dette mønster bruges også i mange RPG'er.

Først og fremmest er det opdelt i fire linjer over og under, men det viser den retning, du står overfor, når du går. Fra toppen er det "ned, venstre, højre, op".

Og for venstre og højre vil det være en gående bevægelse i den retning. Den generelle strøm er "midten, venstre, midten, højre, midten ...".

Størrelsen af en celle af tegnet forberedt denne gang er 32x32px. Da den er forberedt til 3x4 firkanter, er den faktiske størrelse af billedfilen 96x128px. Forresten er der ingen grænse for størrelsen på et tegn, så 32x48px eller 64x64px er også muligt.

* Billedet forberedt denne gang er Iwamaru-kun, som jeg lavede for længe siden. Du kan bruge det som en adfærdsbekræftelse.

Opret et projekt og forbered billeder

I prøven opretter vi denne gang, vi antager, at du kan placere et tegn og flytte det med piletasterne på tastaturet.

Det første skridt er at oprette et nyt 2D-projekt. Tilføj det tegnbillede, du har forberedt til dit projekt.

Vælg det billede, du lige har tilføjet, og konfigurer følgende indstillinger i infovinduet:

Efter indstillingen skal du klikke på knappen "Anvend" nederst.

Opdel derefter billedet, så du kan skifte mellem dem i Unity. Der er en "Sprite Editor" -knap i inspektøren, så klik på den.

Når dialogboksen Sprite Editor vises, skal du klikke på rullemenuen "Udsnit", indstille "Type" til "Gitter efter cellestørrelse", Indtast en pixelstørrelse på 32 (afhængigt af størrelsen på din karakter), og klik på knappen Udsnit.

Derefter opdeles billedet efter den angivne størrelse. Hvis det er forvirrende, skal du trykke på Ctrl-tasten for at se en skillelinje.

Efter opdeling skal du klikke på knappen "Anvend" for at lukke den.

Hvis du klikker på cirkelknappen til højre for billedfilen i projektet for at udvide den, kan du se, at billedet er opdelt.

Oprettelse af animationsdata

Slip billedet oprettet i det forrige afsnit i visningen.

Derefter vises en gemmedialog i stedet for at tilføje billedet. Dette gemmer animationsindstillingerne, så gem det indtil videre som "< billednavn >Animation.anim".

Dette opretter to filer i projektet med det delte billede i visningen og det senere billede i visningen.

Forresten, hvis du kører spillet i denne tilstand, tror jeg, at karakteren vil animere alene. Dette er en tilstand, hvor 12 billeder skiftes og vises til enhver tid.

Hvis spillet kører, skal du afslutte det og vælge fanen Animationer. Hvis ikke, skal du vælge "Vindue -> animation -> animation" i menuen.

Du har valgt det objekt, du har oprettet, fra hierarkiet (i dette tilfælde Iwamaru_0).

Der er allerede en automatisk genereret animation, men jeg har ikke brug for den, så jeg sletter den senere. Der er en rullemenu kaldet "IwamaruAnimation", som jeg navngav denne gang, så klik på den og vælg "Opret nyt klip".

Derefter vises dialogboksen Gem. Da vi opretter en animation af nedbevægelsen, forlader vi den som "Iwamaru Down".

Vælg "Iwamaru_0" fra hierarkiet, og skift animationen til "IwamaruDown".

Denne gang gentager vi animationen i "venstre, midten, højre, medium", så vi indstiller antallet af prøver til 4. Derefter vil tidslinjen til højre blive opdelt i 4 dele.

Slip Iwamaru_0, billedet i øverste venstre hjørne af projektet, på 0,0 på animationstidslinjen.

Slip derefter "Iwamaru_1" i det midterste billede ovenfor til 0.1 og 0.3.

Til sidst skal du slippe "Iwamaru_2" i billedet øverst til højre til 0.2.

Når du er færdig, skal du klikke på afspilningsknappen. Du kan se, at karakteren i udsigten går og animerer. (Dette eksempelbillede er lidt svært at forstå, men ...)

Følg de samme trin for at oprette venstre, højre og øverste animationer.

Slutresultatet skal ligne billedet nedenfor.

Sørg for, at hver retning animeres korrekt.

Indstillinger for animationsovergang

Dobbeltklik derefter på "Iwamaru_0.controller" fra projektet for at åbne det.

Derefter åbnes fanen Animator, og du vil se en skærm som den, der er vist på figuren. Dette skyldes, at den animation, du lige har oprettet, er ". controller" fil.

Højreklik på et tomt rum, og vælg Opret tilstand -> fra nyt vennetræ.

Et nyt "Blend Tree" oprettes, højreklik på det og vælg "Indstil lag som standardtilstand".

Posten vil derefter se på blandingstræet. Det betyder, at når animationen bevæger sig, vil Blend Tree være den første ting at flytte.

Vi vil oprette animationer i Blend Tree, så vi sletter alle eksisterende animationer.

Der er fanen "Parametre" til venstre, så vælg den og tilføj "Flyde" fra + knappen.

Da der er to parametre, hedder de henholdsvis "X" og "Y".

Dobbeltklik på blandingstræet.

Vælg det blandingstræ, der vises.

Fra infovinduet skal du ændre blandingstypen til 2D Simple Dictional.

Indstil parametrene til "X" og "Y".

Fra knappen + i Bevægelse skal du vælge Tilføj bevægelsesfelt 4 gange.

Den oprindelige værdi kan være anderledes, men det skal ligne figuren.

For de fire Motion-elementer, vi tilføjede, indstiller vi top, bund, venstre og højre .anims i projektet.

Angiv derefter, hvilken retning hver animation skal bevæge sig.

Dette fuldender animationsopsætningen.

Endelig kan du slette den automatisk genererede animationsfil, fordi du ikke har brug for den.

Bevægelseskontrol

Bevægelse sker ved at trykke på en tast på tastaturet, så du kan oprette et script til at styre det. Denne gang vil scriptet blive knyttet til karakteren, så vi lader det være som "CharacterMove".

Scriptet ser sådan ud:

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ølgende er en forklaring af hver del.

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

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

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

Start Først skal du få komponenten i Animator metoden. Update Dette vil blive brugt i , så hav det på forhånd.

Animator.SetFloat Metoden kan angive en værdi for det angivne parameternavn. I animationsindstillingerne indstiller vi, hvilken animation der skal bruges i henhold til X- og Y-værdierne. Hvis du indstiller retningen for X- og Y-parametrene, udføres animationen i den retning. I den oprindelige tilstand vil vi vende nedad, så vi angiver (X: 0, Y: -1). Bemærk forresten, at parameternavne skelner mellem store og små bogstaver.

/// <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 kontrollerer vi periodisk tastaturets indgangsstatus og behandler det, når der er input.

GetMove Metoden er designet til at returnere retninger, når tastaturet indgange. Behandlingsindholdet er baseret på det, der er beskrevet i Tip til tastaturinput, så jeg vil udelade det.

Når der er tastaturindgang, Animator.SetFloat skal du indstille retningen til metoden. Dette muliggør animation i den retning, du bevægede dig. transform.Translate Derefter flytter vi objektet med metoden.

Når du har oprettet scriptet, skal du vedhæfte det til tegnobjektet.

henrettelse

Dette fuldender hele processen. Prøv at køre spillet og tryk på piletasterne på dit tastatur for at flytte det. Hvis figuren bevæger sig i den retning, du trykkede på den, og ganganimationen bevæger sig, mens grafikken skifter retning til den retning, du vender mod, er du færdig.