# 骨骼动画入门指引

在游戏开发中,通常使用骨骼动画来实现人物、怪物等的表现。

本章节我们将使用一个简单的例子来介绍如何在小游戏3D中使用骨骼动画

# 模型资源导入

通常带动画的模型资源来自于第三方建模工具,如Maya、3DSMax,目前小游戏3D仅支持 fbx 格式的模型及动画资源导入。

由于 fbx 是一种复合资源格式,其中可能包含模型网格、材质、贴图、动画、骨架等资源,在小游戏3D中,一个 fbx 中包含的所有资源都可以被单独使用,这样可以实现一些工程优化需求,例如一个动画片段被多个角色复用等。

将 fbx 文件放入 assets 目录,即可在 Project 目录下看到。点击 fbx 右边的箭头,即可展开其中包含的所有资源。

随后在 Hierarchy 面板中右键->添加Prefab,选择Running.fbx,即可添加进场景中。

点击播放,即可看到播放人物正常运动

如果你的动画资源来自于第三方游戏引擎,请参考转换方案章节。

# 使用挂点

游戏中一个很常见的需求就是人物手持武器或者挂件,通常的做法是将武器的模型作为人物手部骨骼节点的子节点。 在小游戏框架中,基于性能考虑,人物的骨架节点并不是作为场上节点存在的。所以小游戏框架提供了挂点的机制。

这里我们以一个简单的模型代替武器来说明挂点的用法。在Running下创建一个 Hand 节点,创建一个Capsure模型作为其子节点,调整Capsure节点的属性到合适大小。

Running节点的Skeleton组件中点击Animation Remapping ConfigurationEdit按钮,进入到骨架节点配置模式。找到左手的骨架节点,将Hierarchy面板中Hand节点拖入Model Binding Transform字段中,该操作表示左手的骨架节点的 Transform 信息会被实时同步到场上的Hand节点,即Hand成为模型的挂点。

  • 注意: 挂点节点必须是 Skeleton 所在节点的直接子节点

点击Apply可以应用刚刚的骨架节点配置。

预览场景,可以看到模型会跟随手进行运动,Hand节点的 Transform 组件属性也会每帧更新

# 提取资源

本章的例子中,直接运行 Running 会看到动画只播了一次。如果需要循环,则需要修改AnimationClip,此时我们就需要提取资源。

Project中右键Running.fbx,选择提取。则可看到同路径下创建了 Running 的目录,其中包含了 fbx 里所含的所有资源,包含一个Prefab,以及其所依赖的Mesh、Material、Texture、AnimationClip、Avatar等

将 Running 目录中解包后的 prefab 添加到场上,随后对 AnimationClip 修改设置为Loop。运行场景即可看到生效。

# 使用动画状态机

在游戏中人物或怪物的动作常被定义为一个状态机的形式,人物的走、跑、跳等都被作为其中的状态。小游戏框架提供了对动画状态机的支持。

在小游戏框架中,使用 AnimatorController 资源表示对动画状态机的配置,使用 Animator 组件对动画进行控制和管理。

# 创建动画控制器(AnimatorController)

在 Project 目录下右键->新建->Animation->animatorcontroller,可以创建 AnimatorController 资源。然后新增标签->Animation->Animator打开动画 Animator 面板,即可进入动画状态机的编辑界面。

# 添加状态(State)

在动画状态机视图的网格位置右键->Create State->Empty,即可创建一个State。选中这个State,在 Inspector 面板中可以编辑详情。这里我们修改 name 为Running,并且选择 Motion 为Running的动画片段。

同时我们以相同的方法创建一个 Idle 的State,表示站立时的状态;创建一个 Jump 的State,表示跳跃的状态。 在 Idle 状态上右键->Set As Layer Default State,即可将 Idle 变成默认状态。

点上方绿色的保存按钮,保存目前为止的编辑状态。

# 使用 Animator 组件

在模型的 Inspector 面板中,添加组件->Animation->Animator,为物体添加一个 Animator 组件,同时可以把 Animation 组件禁用或删除。

将 controller 字段设置为刚刚创建的 AnimatorController 资源,播放场景,即可看到动画默认在播放 Idle 动作

如果想要了解更多 Animator 组件相关的内容,请参考Animator组件参考章节

# 在不同状态之间切换

我们在模型上添加一个自定义 Script 组件,命名为TestAnimator,并复制以下代码保存

import engine from "engine";
@engine.decorators.serialize("TestAnimator")
export default class TestAnimator extends engine.Script {
  public animComp: engine.Animator;

  public onStart() {
    this.animComp = this.entity.getComponent(engine.Animator);

    setTimeout(() => {
      this.animComp.crossFade("Base Layer.Running",0.5);
    }, 3000);
    setTimeout(() => {
      this.animComp.crossFade("Base Layer.Jump",0.5);
    }, 5000);
  }
}

播放场景,即可看到动画由站立平滑过度至跑步动作,又平滑过度至跳跃。

;

# 设置状态机的转移关系

实际应用中,状态之间的转移关系及条件通常会很复杂,使用代码控制难以维护。小游戏框架提供了一套状态转移编辑与控制机制。

打开 Animator 面板,在 Idle 状态上右键->Make Transition->点击Running,即可建立IdleRunning之间的状态转移。用同样的方法建立RunningRunningJump之间的双向转移。

选择左侧的Paramerters,添加一个Float类型的参数speed和一个Trigger类型的参数jump

接下来我们要为状态转移配置条件(condition)。点击 Idle 和Running之间的箭头,在 Inspector 面板下即可看到该转移的详情。在 Conditions 下添加一个speed Greater 0的条件

同理我们在Running指向RunningJump的转移中添加jump的条件

最后我们修改 TestAnimator 脚本,运行时使用代码触发 Parameter 变动

import engine from "engine";
@engine.decorators.serialize("TestAnimator")
export default class TestAnimator extends engine.Script {
  public animComp: engine.Animator;

  public onStart() {
    this.animComp = this.entity.getComponent(engine.Animator);

    setTimeout(() => {
      this.animComp.setFloat("speed",1.0);
    }, 3000);
    setTimeout(() => {
      this.animComp.setTrigger("jump");
    }, 5000);
  }
}

预览场景,即可看到效果