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

Проверочная среда

Виндоус

• Windows 11

Редактор Unity

• 2020.3.25f1

Системные пакеты ввода

• 1.2.0

Необходимые условия для получения этого совета

Следующие параметры предварительно настроены в качестве предварительного условия для объяснения этих советов.

• Знакомство с пакетом Input System
• Выравнивание камеры (2D) по холсту

Справочный сайт

• Создание ролевой игры в Unity Часть 1 Анимация ходьбы и управление

Подготовка пешеходной графики

Прежде всего, анимация ходьбы достигается за счет постоянного переключения между несколькими изображениями, чтобы создать впечатление, что вы идете. Поэтому необходимо подготовить столько изображений, сколько необходимо, чтобы показать направление движения и ходьбы.

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

Прежде всего, он разделен на четыре линии сверху и снизу, но показывает направление, в котором вы будете смотреть при ходьбе. Сверху – «вниз, влево, вправо, вверх».

И для левой, и для правой стороны это будет движение ходьбы в этом направлении. Общий поток — «середина, левая, средняя, правая, средняя...».

Размер одной ячейки подготовленного на этот раз персонажа составляет 32x32px. Поскольку он подготовлен для квадратов 3x4, фактический размер файла изображения составляет 96x128px. Кстати, ограничений на размер одного символа нет, поэтому 32x48px или 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» в проекте, чтобы открыть его.

Затем откроется вкладка Аниматор, и вы увидите экран, похожий на тот, что показан на рисунке. Это связано с тем, что анимация, которую вы только что создали, называется ". controller".

Щелкните правой кнопкой мыши по пустому месту и выберите Create State -> From New Friend Tree.

Будет создано новое «Дерево смешивания», щелкните по нему правой кнопкой мыши и выберите «Установить слой как состояние по умолчанию».

Затем Entry будет смотреть на Blend Tree. Это означает, что при движении анимации дерево смешивания будет перемещаться первым.

Мы собираемся настроить анимации в Blend Tree, поэтому мы удалим все существующие анимации.

Слева есть вкладка «Параметры», поэтому выберите ее и добавьте «Плавающий» от кнопки +.

Так как параметров два, они называются «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 После этого перемещаем объект с помощью метода.

После того, как вы создали сценарий, прикрепите его к объекту персонажа.

исполнение

На этом весь процесс завершен. Попробуйте запустить игру и нажать клавиши курсора на клавиатуре, чтобы переместить ее. Если персонаж движется в том направлении, в котором вы его нажали, и анимация ходьбы движется, в то время как графика меняет направление на направление, в котором вы смотрите, все готово.