UE5之横版2D游戏(二)

发表于 分类于

之前我们已经完成了角色的移动功能，但还不具备相应的动画，所以在这一部分完成角色动画的相应设置

材料准备

PaperZD

首先需要准备的就是PaperZD这个插件，使用该插件我们可以方便的设置动画状态机，在BP_PaperCharacterBase中我们也可以看到多出来一个Animation Component组件

简单介绍一下PaperZD的三个基础模块，分别是
1. AnimationSequence：用于绑定一个2D FlipBook 2. AnimationSource：类似于一个管理器，可以集中的创建和设置AnimationSequence 3. PaperZD AnimBP：在此蓝图中设置我们的动画状态机

创建FlipBook

既然可以利用PaperZD来设置动画状态机，那么接下来只需要准备动画素材即可，UE5中的2D动画被称为FlipBook，选择需要的Sprite序列，然后右键创建图像序列，最后在FlipBook中调节每秒帧数即可

制作好相应的FlipBook即可正式开工

制作动画状态机

创建AnimationSource和AnimationSequence

首先我们创建一个LukeAnimSource，然后在LukeAnimSource中我们创建三个Animation Sequence，LukeIdle、LukeRun、LukeJump，然后选择相应的Animation Sequence，在Asset Detail面板中的Animation Data绑定对应的FlipBook即可

Note: 选择Animation Sequence的操作有点反直觉，必须要双击才能切换过去，单击只是选中，可以观察图中，左侧虽然选中了LukeIdle，但当前打开的是LukeJump（时间轴左侧有当前打开的Animation Sequence名称）

设置动画状态机

确定为每一个Animation Sequence都设置好对应的FlipBook后就可以开始制作动画状态机了，从PaperZD AnimBP创建蓝图BP_LukeAnimBP，然后选择之前制作好的AnimationSource即可

与UE5提供的3D动画蓝图类似，我们从引脚创建一个新的状态机，然后双击进入状态机内部

接下来就是创建状态机的状态和状态转移的条件，目前我们只有三个状态，Idle、Run和Jump，所以依次创建它们即可

值得一提的是，Jump状态可以设计为下图的模式，也可以采用另外一种方式实现

我们在空白的位置右键，可以发现我们能够创建四类节点，简单介绍一下：

  1. Animation State: 也就是我们最常用的状态节点，如之前的Idle等
  2. Comment: 注释节点
  3. Conduit: 条件判断节点，主要用于集中管理和复用否个逻辑
  4. Jump: 跳转节点，类似于goto

考虑到我们既可以通过判断z轴的速度转移到Jump状态，也可以通过跳跃事件的触发转移到Jump状态，所以动画状态机还可以有如下的实现方式，我们创建了一个Jump节点，然后重命名为JumpState

之后我们来到BP_PaperCharacterBase中，点击标注的位置找到跳跃时，即可像图中一样设置On Jumped事件，我们通过蓝图组件获取Anim Instance，然后搜索Jump to Node就可以调用动画状态机蓝图中的Jump节点，只需要把Jump Name该为Jump节点的名称即可，也就是JumpState（图中的下拉菜单没有跳跃时这个事件，因为我已经在蓝图中设置了，所以不允许再次重载）

然后需要在Animation Component中和动画状态机完成绑定

然后我们回到动画状态机蓝图BP_LukeAnimBP中，现在我们的状态机还需设置每个状态对应的动画和状态转移的条件，我们首先完成每个状态的动画设置，以Idle为例，双击进入，选择对应的动画即可

接下来是状态转移条件的设置，可以想到，如果我们知道角色在X轴和Z轴上的速度，就可知道角色应该转移至什么样的状态，因此，我们来到BP_LukeAnimBP中的事件图表，之前我们已经完成了角色和状态机的绑定，那么我们可以通过Get Owning Actor来获取，然后将其转换为BP_PaperCharacterBase类型，并将结果提升为变量方便后续使用，这里我们将变量重命名为PaperCharacterBaseRef

现在我们回到动画状态机中，以Idle->Run这个状态转换为例，获取一下速度，如果X轴的速度不为0，那么就可以转移至Run状态

现在我们就已经完成了动画状态机的设置，简单测试一下，可以看到已经可以按我们设想的播放动画，但还存在一个问题，想做移动时角色朝向没有改变，所以我们还需要去Move函数中进行一些修改

简单来说，我们判断一下当前是在向左移动还是向右移动，如果是向左移动，那么把Sprite旋转180度即可

1
2
3
4
5
6
7
8
9
10
11
12
13
void APaperCharacterBase::Move(const FInputActionValue& Value) {
	FVector ForwardDirection = FVector(1.0f, 0.0f, 0.0f);
	FVector2D MovementValue = Value.Get<FVector2D>();

	if (MovementValue.X > 0) {
		GetSprite()->SetRelativeRotation(FRotator(0, 0, 0));
		AddMovementInput(ForwardDirection, MovementValue.X);
	}
	else {
		GetSprite()->SetRelativeRotation(FRotator(0, 180, 0));
		AddMovementInput(ForwardDirection, MovementValue.X);
	}
}