为 4 路精灵角色实现行走动画

更新页 : 2023年10月31日星期二

页面创建日期 : 2022年7月7日星期四

验证环境

窗户

窗户11

Unity 编辑器

2020.3.25f1

输入系统包

1.2.0

此提示的先决条件

以下设置已预先配置为解释这些提示的先决条件。

参考站点

使用 Unity 制作 RPG 第 1 部分：行走动画和操作

步行图形的准备

首先，行走动画是通过在多个图像之间不断切换来实现的，使其看起来像是在行走。因此，有必要准备尽可能多的图像来显示运动和行走的方向。

为了实现最简单的行走动画，通常准备如下图像。这种模式也用于许多角色扮演游戏。

首先，它上面和下面分为四条线，但它显示了你走路时将面对的方向。从上到下，它是“向下，向左，向右，向上”。

对于左边和右边来说，这将是朝那个方向行走的动作。一般流程是“中、左、中、右、中......”。

这次准备的字符的一个单元格的大小是 32x32px。由于它是为 3x4 正方形准备的，因此图像文件的实际大小为 96x128px。顺便说一句，一个字符的大小没有限制，因此也可以使用32x48px或64x64px。

*这次准备的图像是我很久以前制作的岩丸君。您可以将其用作行为验证。

创建项目并准备映像

在这次我们将创建的示例中，我们将假设您可以放置一个字符并使用键盘上的光标键移动它。

第一步是创建一个新的 2D 项目。添加您为项目准备的角色图像。

选择刚刚添加的图像，并在检查器中配置以下设置：

项目名称值备注
纹理类型	精灵
Sprite 模式	复数
每单位像素数	32	在视图中放置时影响大小
网状类型	全矩形
过滤模式	点	如有必要
压缩	没有	如有必要

设置完成后，单击底部的“应用”按钮。

接下来，拆分图像，以便在 Unity 中在它们之间切换。检查器中有一个“Sprite Editor”按钮，因此请单击它。

当出现 Sprite Editor 对话框时，单击“Slice”下拉列表，将 “Type” 设置为 “Grid By Cell Size”，输入像素大小 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、Iwamaru_1、Iwamaru_2 Iwamaru_1
岩丸左	Iwamaru_3、Iwamaru_4、Iwamaru_5 Iwamaru_4
岩丸右	Iwamaru_6、Iwamaru_7、Iwamaru_8 Iwamaru_7
岩丸上	Iwamaru_9、Iwamaru_10、Iwamaru_11 Iwamaru_10

最终结果应如下图所示。

确保每个方向都正确设置动画。

动画过渡设置

接下来，双击项目中的“Iwamaru_0.controller”将其打开。

然后动画师选项卡将打开，您将看到一个如图所示的屏幕。这是因为您刚刚创建的动画是“. controller“文件。

右键单击空白区域，然后选择 Create State -> From New Friend Tree。

将创建一个新的“混合树”，右键单击它并选择“将图层设置为默认状态”。

然后，条目将查看混合树。这意味着当动画移动时，混合树将是第一个移动的东西。

我们将在 Blend Tree 中设置动画，因此我们将删除所有现有动画。

左侧有一个“参数”选项卡，因此请选择它并从 + 按钮添加“浮动”。

由于有两个参数，因此它们分别命名为“X”和“Y”。

双击混合树。

选择出现的“混合树”（Blend Tree）。

在检查器中，将混合类型更改为 2D 简单词典。

将参数设置为“X”和“Y”。

从 Motion 的 + 按钮中，选择添加运动场 4 次。

初始值可能不同，但应如图所示。

对于我们添加的四个 Motion 项目，我们将在项目中设置顶部、底部、左侧和右侧的 .anims。

然后，指定每个动画应移动的方向。

方向	X	Y
下	0	-1
返回页首	0	1
左	-1	0
右	1	0

这样就完成了动画设置。

最后，您可以删除自动生成的动画文件，因为您不需要它。

运动控制

移动是通过按下键盘上的一个键来完成的，因此您可以创建一个脚本来控制它。这一次，脚本将附加到角色上，因此我们将其保留为“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 之后，我们使用 The Method 移动对象。

创建脚本后，将其附加到角色对象。

执行

这样就完成了整个过程。尝试运行游戏并按键盘上的光标键来移动它。如果角色沿您按下的方向移动，并且行走动画移动，而图形将方向更改为您面对的方向，则您就完成了。

在游戏运行时更改精灵图像

实现 8 路精灵角色行走动画