Реализирайте анимация за ходене за 4-посочен спрайт характер

Среда за проверка

Уиндоус

• Прозорци 11

Редактор на единство

• 2020.3.25ф1

Пакети на входната система

• 1.2.0

Предпоставки за този съвет

Следните настройки са предварително конфигурирани като предпоставка за обяснението на тези съвети.

• Въвеждане на пакета на входната система
• Подравняване на камерата (2D) с платното

Референтен сайт

• Осъществяване на RPG с единство част 1 ходене анимация и операция

Подготовка на графики за ходене

На първо място, анимацията за ходене се постига чрез постоянно превключване между множество изображения, за да изглежда, че ходите. Ето защо е необходимо да се подготвят толкова изображения, колкото е необходимо, за да се покаже посоката на движение и ходене.

За да се постигне най-простата анимация за ходене, е обичайно да се подготви следното изображение. Този модел се използва и в много RPG.

На първо място, тя е разделена на четири линии отгоре и отдолу, но показва посоката, в която ще се сблъскате, когато ходите. Отгоре е "надолу, наляво, надясно, нагоре".

А за лявото и дясното това ще бъде ходещо движение в тази посока. Общият поток е "среден, ляв, среден, десен, среден...".

Размерът на една клетка от знака, подготвен този път, е 32x32px. Тъй като е подготвен за 3x4 квадрати, действителният размер на файла с изображение е 96x128px. Между другото, няма ограничение за размера на един знак, така че 32x48px или 64x64px също е възможно.

* Изображението, подготвено този път, е Iwamaru-kun, което направих отдавна. Можете да го използвате като проверка на поведението.

Създаване на проект и подготовка на изображения

В образеца, който ще създадем този път, ще приемем, че можете да поставите знак и да го преместите с клавишите на курсора на клавиатурата.

Първата стъпка е създаването на нов 2D проект. Добавете изображението на героя, което сте подготвили за вашия проект.

Изберете изображението, което току-що добавихте, и конфигурирайте следните настройки в инспектора:

След настройката кликнете върху бутона "Приложи" в долната част.

След това разделете изображението, така че да можете да превключвате между тях в Unity. В инспектора има бутон "Sprite Editor", така че кликнете върху него.

Когато се появи диалоговият прозорец Sprite Editor, кликнете върху падащото меню "Slice", задайте "Type" на "Grid By Cell Size", Въведете размер на пиксела 32 (в зависимост от размера на вашия знак) и щракнете върху бутона Slice.

След това изображението ще бъде разделено на определения размер. Ако е объркващо, натиснете клавиша Ctrl, за да видите разделителна линия.

След разделянето кликнете върху бутона "Приложи", за да го затворите.

Ако щракнете върху десния бутон на кръга на файла с изображение в проекта, за да го разгънете, можете да видите, че изображението е разделено.

Създаване на данни за анимация

Пуснете изображението, създадено в предишния раздел, в изгледа.

След това, вместо да добавяте изображението, ще се покаже диалогов прозорец за записване. Това ще запази настройките за анимация, така че за момента го запишете като "< име на изображението >Animation.anim".

Това ще създаде два файла в проекта, с разделеното изображение в изгледа и по-късното изображение в изгледа.

Между другото, ако стартирате играта в това състояние, мисля, че героят ще анимира сам. Това е състояние, в което 12 изображения се превключват и показват по всяко време.

Ако играта се изпълнява, затворете я и изберете раздела Анимации. Ако не, изберете "Window -> Animation -> Animation" от менюто.

Избрали сте обекта, който сте създали от йерархията (в този случай Iwamaru_0).

Вече има автоматично генерирана анимация, но не ми трябва, затова ще я изтрия по-късно. Има падащо меню, наречено "IwamaruAnimation", което този път кръстих, така че кликнете върху него и изберете "Създаване на нов клип".

След това ще се появи диалоговият прозорец за записване. Тъй като ще създадем анимация на движението надолу, ще го оставим като "Iwamaru Down".

Изберете "Iwamaru_0" от йерархията и променете анимацията на "IwamaruDown".

Този път ще повторим анимацията в "ляво, средно, дясно, средно", така че ще зададем броя на пробите на 4. След това времевата линия вдясно ще бъде разделена на 4 части.

Пуснете Iwamaru_0, изображението в горния ляв ъгъл на проекта, върху 0.0 във времевата скала на анимацията.

След това пуснете "Iwamaru_1" в средното изображение по-горе до 0,1 и 0,3.

Накрая пуснете "Iwamaru_2" в горното дясно изображение до 0,2.

Когато сте готови, щракнете върху бутона за възпроизвеждане. Можете да видите, че героят в гледката е ходене и анимиране. (Това примерно изображение е малко трудно за разбиране, но ...)

Следвайте същите стъпки, за да създадете анимации отляво, отдясно и отгоре.

Крайният резултат трябва да изглежда подобно на изображението по-долу.

Уверете се, че всяка посока анимира правилно.

Настройки за преход на анимация

След това щракнете двукратно върху "Iwamaru_0.controller" от проекта, за да го отворите.

След това ще се отвори разделът Аниматор и ще видите екран като този, показан на фигурата. Това е така, защото анимацията, която току-що създадохте, е ". контролер" файл.

Щракнете с десния бутон върху празно място и изберете Създаване на състояние -> От ново дърво на приятелите.

Ще бъде създадено ново "Blend Tree", кликнете с десния бутон върху него и изберете "Set Layer as Default State".

След това записът ще разгледа Blend Tree. Това означава, че когато анимацията се движи, Blend Tree ще бъде първото нещо, което ще се движи.

Ще настроим анимации в Blend Tree, така че ще изтрием всички съществуващи анимации.

Отляво има раздел "Параметри", така че го изберете и добавете "Float" от бутона +.

Тъй като има два параметъра, те се наричат съответно "X" и "Y".

Щракнете двукратно върху дървото на смесите.

Изберете дървото на смесите, което се появява.

От инспектора променете типа на сместа на 2D Simple Dictional.

Задайте параметрите на "X" и "Y".

От бутона + в Движение изберете Добавяне на поле за движение 4 пъти.

Първоначалната стойност може да е различна, но трябва да изглежда като фигурата.

За четирите елемента Motion, които добавихме, ще поставим горните, долните, левите и десните .anims в проекта.

След това задайте в коя посока трябва да се движи всяка анимация.

Това завършва настройката на анимацията.

И накрая, можете да изтриете автоматично генерирания анимационен файл, защото не ви е необходим.

Контрол на движението

Движението се извършва чрез натискане на клавиш на клавиатурата, така че можете да създадете скрипт, който да го контролира. Този път сценарият ще бъде прикрепен към героя, така че ще го оставим като "CharacterMove".

Сценарият изглежда така:

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

Следва обяснение на всяка част.

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

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

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

Start Първо, вземете компонента в методаAnimator. Update Това ще бъде използвано в , така че го направете предварително.

Animator.SetFloat Методът може да зададе стойност за зададеното име на параметър. В настройките за анимация задаваме коя анимация да се използва според стойностите X и Y. Ако зададете посоката на параметрите X и Y, анимацията ще бъде изпълнена в тази посока. В началното състояние искаме да сме обърнати с лице надолу, затова определяме (X: 0, 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);
  }
}

FixedUpdate В метода периодично проверяваме входното състояние на клавиатурата и го обработваме, когато има вход.

GetMove Методът е предназначен да връща посоки като входове на клавиатурата. Съдържанието на обработката се основава на това, което е описано в Съвети за въвеждане от клавиатурата, така че ще го пропусна.

Когато има въвеждане от клавиатурата, Animator.SetFloat задайте посоката на метода. Това позволява анимация в посоката, в която сте се преместили. transform.Translate След това преместваме обекта с метода.

След като създадете скрипта, прикачете го към обекта на знака.

екзекуция

Това завършва целия процес. Опитайте да стартирате играта и да натиснете клавишите на курсора на клавиатурата, за да я преместите. Ако героят се движи в посоката, в която сте го натиснали, и анимацията за ходене се движи, докато графиката променя посоката си в посоката, в която сте изправени, сте готови.