Реалізація анімації ходьби для 4-стороннього спрайтового персонажа

Середовище верифікації

Вікна

• Вікна 11

Редактор Unity

• 2020.3.25f1

Вхідні системні пакети

• 1.2.0

Передумови для цієї поради

Наведені нижче параметри попередньо налаштовані як обов'язкова умова для пояснення цих порад.

• Знайомство з системним пакетом вхідних даних
• Вирівняйте камеру (2D) з полотном

Довідковий сайт

• Створення рольової гри з анімацією ходьби та операціями Unity Part 1

Підготовка графіки ходьби

Перш за все, анімація ходьби досягається шляхом постійного перемикання між кількома зображеннями, щоб здавалося, що ви йдете. Тому необхідно підготувати стільки зображень, скільки необхідно, щоб показати напрямок руху і ходьби.

Для того, щоб домогтися найпростішої анімації ходьби, прийнято готувати наступне зображення. Цей патерн також використовується в багатьох RPG.

Перш за все, він розділений на чотири лінії зверху і знизу, але показує напрямок, в якому ви будете дивитися при ходьбі. Зверху це «вниз, вліво, вправо, вгору».

А для ліворуч і праворуч це буде ходячий рух у цьому напрямку. Загальна течія така: «середина, ліворуч, середина, справа, середина...».

Розмір однієї клітинки підготовленого на цей раз символу - 32х32px. Оскільки він підготовлений для квадратів 3x4, фактичний розмір файлу зображення становить 96x128px. До речі, немає обмежень на розмір одного символу, тому можливі і 32х48px або 64x64px.

* На цей раз підготовлений образ - Івамару-кун, який я зробив дуже давно. Ви можете використовувати його як перевірку поведінки.

Створіть проект і підготуйте зображення

У зразку, який ми створимо цього разу, ми будемо вважати, що ви можете розмістити символ і перемістити його за допомогою клавіш курсору на клавіатурі.

Насамперед необхідно створити новий 2D проект. Додайте зображення персонажа, яке ви підготували для свого проекту.

Виберіть зображення, яке ви щойно додали, і налаштуйте такі параметри в інспекторі:

Після налаштування натисніть кнопку «Застосувати» внизу.

Далі розділіть зображення так, щоб ви могли перемикатися між ними в Unity. В інспекторі є кнопка «Редактор спрайтів», тому натисніть на неї.

Коли з'явиться діалогове вікно редактора спрайтів, натисніть випадаюче меню «Фрагмент», встановіть для параметра «Тип» значення «Сітка за розміром комірки», Введіть розмір пікселя 32 (залежно від розміру вашого персонажа) і натисніть кнопку «Фрагмент».

Потім зображення буде розділено на вказаний розмір. Якщо це збиває з пантелику, натисніть клавішу Ctrl, щоб побачити розділову лінію.

Після розділення натисніть кнопку «Застосувати», щоб закрити його.

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

Створення анімаційних даних

Перетягніть зображення, створене в попередньому розділі, у поле зору.

Тоді, замість додавання зображення, буде показано діалогове вікно збереження. Це збереже налаштування анімації, тому поки що збережіть її як "< ім'я зображення >Animation.anim".

Це створить два файли у проєкті, де буде розділене зображення на перегляді, а пізніше зображення — на перегляді.

До речі, якщо запустити гру в такому стані, думаю, персонаж анімується самостійно. Це стан, при якому 12 зображень перемикаються і відображаються в будь-який час.

Якщо гра запущена, закрийте її та виберіть вкладку «Анімація». Якщо ні, виберіть у меню «Вікно -> Анімація -> Анімація».

Ви вибрали створений вами об'єкт з ієрархії (в даному випадку 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. Це означає, що при русі анімації Blend Tree буде переміщатися першим, що буде рухатися.

Ми збираємося налаштувати анімацію в Blend Tree, тому ми видалимо всі існуючі анімації.

Зліва є вкладка «Параметри», тому виберіть її та додайте «Float» за допомогою кнопки +.

Так як є два параметри, то вони називаються «X» і «Y» відповідно.

Двічі клацніть дерево переходу.

Виділіть дерево переходу, що з'явиться.

У вікні Інспектор змініть тип накладання на 2D Простий словник.

Встановіть параметри на «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 Після цього ми переміщуємо об'єкт за допомогою методу.

Після того, як ви створили сценарій, прикріпіть його до об'єкта персонажа.

виконання

На цьому весь процес завершено. Спробуйте запустити гру та натиснути клавіші курсору на клавіатурі, щоб перемістити її. Якщо персонаж рухається в тому напрямку, в якому ви його натиснули, а анімація ходьби рухається, а графіка змінює напрямок на напрямок, в якому ви дивитеся, все готово.