Implementeer een loopanimatie voor een 4-weg sprite-personage

Verificatie omgeving

Ramen

• Vensters 11

Unity-editor

• 2020.3.25f1

Pakketten met invoersystemen

• 1.2.0

Vereisten voor deze tip

De volgende instellingen zijn vooraf geconfigureerd als voorwaarde voor de uitleg van deze tips.

• Introductie van het Input System Package
• Lijn de camera (2D) uit met het canvas

Referentie site

• Een RPG maken met Unity Deel 1: Loopanimatie en bediening

Voorbereiding van wandelende afbeeldingen

Allereerst wordt de loopanimatie bereikt door constant te schakelen tussen meerdere afbeeldingen om het te laten lijken alsof je loopt. Daarom is het noodzakelijk om zoveel afbeeldingen voor te bereiden als nodig is om de bewegings- en looprichting te laten zien.

Om de eenvoudigste loopanimatie te bereiken, is het gebruikelijk om de volgende afbeelding voor te bereiden. Dit patroon wordt ook in veel RPG's gebruikt.

Allereerst is het verdeeld in vier lijnen boven en onder, maar het geeft de richting aan waarin je kijkt als je loopt. Van bovenaf is het "omlaag, links, rechts, omhoog".

En voor links en rechts zal het een loopbeweging in die richting zijn. De algemene stroom is "midden, links, midden, rechts, midden...".

De grootte van één cel van het teken dat deze keer is voorbereid, is 32x32px. Omdat het is voorbereid voor 3x4 vierkanten, is de werkelijke grootte van het afbeeldingsbestand 96x128px. Overigens is er geen limiet aan de grootte van één teken, dus 32x48px of 64x64px is ook mogelijk.

* De afbeelding die deze keer is gemaakt is Iwamaru-kun, die ik lang geleden heb gemaakt. U kunt het gebruiken als gedragsverificatie.

Een project maken en afbeeldingen voorbereiden

In het voorbeeld dat we deze keer zullen maken, gaan we ervan uit dat u een teken kunt plaatsen en verplaatsen met de cursortoetsen op het toetsenbord.

De eerste stap is het maken van een nieuw 2D-project. Voeg de personageafbeelding toe die je voor je project hebt voorbereid.

Selecteer de afbeelding die u zojuist hebt toegevoegd en configureer de volgende instellingen in het infovenster:

Klik na het instellen onderaan op de knop "Toepassen".

Splits vervolgens de afbeelding zodat u ertussen kunt schakelen in Unity. Er is een knop "Sprite Editor" in het infovenster, dus klik erop.

Wanneer het Sprite-editorvenster verschijnt, klik je de vervolgkeuzelijst "Segment", stel je het type in op "Raster op celgrootte", Voer een pixelgrootte van 32 in (afhankelijk van de grootte van je personage) en klik op de knop Segment.

Vervolgens wordt de afbeelding gesplitst op de opgegeven grootte. Als het verwarrend is, drukt u op de Ctrl-toets om een scheidingslijn weer te geven.

Klik na het splitsen op de knop "Toepassen" om het te sluiten.

Als u op de cirkelvormige rechterknop van het afbeeldingsbestand in het project klikt om het uit te vouwen, kunt u zien dat de afbeelding is verdeeld.

Animatiegegevens maken

Zet de afbeelding die in de vorige sectie is gemaakt neer in de weergave.

In plaats van de afbeelding toe te voegen, wordt vervolgens een dialoogvenster voor opslaan weergegeven. Hierdoor worden de animatie-instellingen opgeslagen, dus sla deze voorlopig op als "< afbeeldingsnaam >Animation.anim".

Hiermee worden twee bestanden in het project gemaakt, met de gesplitste afbeelding in de weergave en de latere afbeelding in de weergave.

Trouwens, als je het spel in deze staat speelt, denk ik dat het personage vanzelf zal animeren. Dit is een toestand waarin op elk moment 12 beelden worden geschakeld en weergegeven.

Als het spel actief is, sluit u het af en selecteert u het tabblad Animaties. Als dit niet het geval is, selecteert u "Venster -> animatie -> animatie" in het menu.

U hebt het object dat u hebt gemaakt geselecteerd in de hiërarchie (in dit geval Iwamaru_0).

Er is al een automatisch gegenereerde animatie, maar die heb ik niet nodig, dus die verwijder ik later. Er is een vervolgkeuzelijst genaamd "IwamaruAnimation" die ik deze keer een naam heb gegeven, dus klik erop en selecteer "Nieuwe clip maken".

Vervolgens verschijnt het dialoogvenster Opslaan. Omdat we een animatie van de neerwaartse beweging zullen maken, laten we deze als "Iwamaru Down" staan.

Selecteer "Iwamaru_0" in de hiërarchie en verander de animatie in "IwamaruDown".

Deze keer herhalen we de animatie in "links, midden, rechts, medium", dus we stellen het aantal samples in op 4. Dan wordt de tijdlijn aan de rechterkant opgedeeld in 4 delen.

Zet de Iwamaru_0, de afbeelding in de linkerbovenhoek van het project, op 0.0 in de animatietijdlijn.

Zet vervolgens de "Iwamaru_1" in de middelste afbeelding hierboven op 0.1 en 0.3.

Zet ten slotte de "Iwamaru_2" in de afbeelding rechtsboven op 0,2.

Als u klaar bent, klikt u op de afspeelknop. Je kunt zien dat het personage in de weergave loopt en animeert. (Deze voorbeeldafbeelding is een beetje moeilijk te begrijpen, maar ...)

Volg dezelfde stappen om links-, rechter- en topanimaties te maken.

Het eindresultaat zou er ongeveer zo uit moeten zien als in de onderstaande afbeelding.

Zorg ervoor dat elke richting correct wordt geanimeerd.

Instellingen voor animatie-overgang

Dubbelklik vervolgens op "Iwamaru_0.controller" van het project om het te openen.

Vervolgens wordt het tabblad Animator geopend en ziet u een scherm zoals in de afbeelding. Dit komt omdat de animatie die je zojuist hebt gemaakt ". controller" bestand.

Klik met de rechtermuisknop op een lege ruimte en selecteer Status maken -> van nieuwe vriendenboom.

Er wordt een nieuwe "Blend Tree" aangemaakt, klik er met de rechtermuisknop op en selecteer "Set Layer as Default State".

De Entry kijkt dan naar de Blend Tree. Dit betekent dat wanneer de animatie beweegt, de Blend Tree als eerste beweegt.

We gaan animaties instellen in Blend Tree, dus we verwijderen alle bestaande animaties.

Er is een tabblad "Parameters" aan de linkerkant, dus selecteer het en voeg "Float" toe via de knop +.

Omdat er twee parameters zijn, worden ze respectievelijk "X" en "Y" genoemd.

Dubbelklik op de overvloeistructuur.

Selecteer de overvloeistructuur die wordt weergegeven.

Wijzig in het infovenster het mengtype in 2D Simple Dictional.

Stel de parameters in op "X" en "Y".

Selecteer op de knop + in Beweging 4 keer Bewegingsveld toevoegen.

De beginwaarde kan afwijken, maar moet er zo uitzien als in de afbeelding.

Voor de vier Motion-items die we hebben toegevoegd, stellen we de bovenste, onderste, linker- en rechter.anims in het project in.

Geef vervolgens aan in welke richting elke animatie moet bewegen.

Hiermee is de animatie-instelling voltooid.

Ten slotte kunt u het automatisch gegenereerde animatiebestand verwijderen omdat u het niet nodig heeft.

Controle van de beweging

Beweging doe je door op een toets op het toetsenbord te drukken, zodat je een script kunt maken om het te besturen. Deze keer wordt het script aan het personage gekoppeld, dus we laten het als "CharacterMove" staan.

Het script ziet er als volgt uit:

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

Hieronder volgt een uitleg van elk onderdeel.

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

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

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

Start Haal eerst de component in de Animator methode op. Update Dit wordt gebruikt in , dus zorg dat je het van tevoren hebt.

Animator.SetFloat De methode kan een waarde instellen voor de opgegeven parameternaam. In de animatie-instellingen stellen we in welke animatie we moeten gebruiken op basis van de X- en Y-waarden. Als u de richting van de X- en Y-parameters instelt, wordt de animatie in die richting uitgevoerd. In de begintoestand willen we naar beneden kijken, dus specificeren we (X: 0, Y: -1). Houd er overigens rekening mee dat parameternamen hoofdlettergevoelig zijn.

/// <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 In de methode controleren we periodiek de invoerstatus van het toetsenbord en verwerken we deze wanneer er invoer is.

GetMove De methode is ontworpen om aanwijzingen terug te geven wanneer het toetsenbord wordt ingevoerd. De verwerkingsinhoud is gebaseerd op wat wordt beschreven in Toetsenbordinvoertips, dus ik zal het weglaten.

Wanneer er toetsenbordinvoer is, stelt u Animator.SetFloat de richting van de methode in. Dit maakt animatie mogelijk in de richting waarin u bent verplaatst. transform.Translate Daarna verplaatsen we het object met de methode.

Nadat u het script hebt gemaakt, koppelt u het aan het tekenobject.

uitvoering

Hiermee is het hele proces voltooid. Probeer het spel uit te voeren en op de cursortoetsen op je toetsenbord te drukken om het te verplaatsen. Als het personage beweegt in de richting waarin je erop hebt gedrukt en de loopanimatie beweegt terwijl de afbeelding van richting verandert in de richting waarin je kijkt, ben je klaar.