让我们开始吧,2D骨骼动画!

■前言

欢迎来到2D骨骼动画练习场!
只需少量部件即可创建多种动作。

本主题将学习如何组合部件完成【人偶】的制作。
↓视频中,将骨骼部分的【Skeleton2D】分配给身体部件的【Polygon】,使其联动。

0-1. 下载【角色素材】并注册到≪文件系统≫中。

2dbone_sample

※本次未使用面部差异。

0-2. 同样下载【完成预定图】并注册。

2d_bone_image

■目录

  1. 准备用于骨骼动画的节点对象
  2. 隐藏不必要的节点,整理工作环境
  3. 准备完成预定图
  4. 为Polygon2D(部件图像)分配纹理
  5. 创建Bone2D(骨骼)
  6. 确定休息姿势(基本姿势),进行准备工作
  7. 将Polygon2D匹配到Bone2D,完成制作

■1. 准备用于骨骼动画的节点对象

1-1. 在屏幕中央顶部的\[+\]中,创建新的≪游戏对象≫。
(游戏对象名称可随意命名)

1-2. 模板选择【角色】类型(类型)为【2DBone Character Base】。
※这是AGMAker的优势,它会为我们准备好所需的节点组合。

1-3. 创建并准备完毕。

■2. 隐藏不必要的节点,整理工作环境

现在,我们只需要【BoneAnimationRoot2d】中的:

  • Polygon系列
  • Skeleton2D系列

2-1. 隐藏工作中不需要的:

  • 墙壁判定「CollisionShape2D」
  • 受击判定「HitArea2D」
  • 攻击判定「AttackArea2D」

image

※稍后会使用Skeleton2D,因此先将其关闭!

■3. 准备完成预定图

3-1. 你是否已在文章开头注册了【完成预定图】(2d_bone_image.png)到≪文件系统≫中?
3-2. 将注册的png文件拖放到屏幕中央,作为Sprite2D(图像)放置。

image
3.3 将其移动到≪节点≫的顶部,放置在“后面” ※越往下越靠前

3-4. 在≪检查器≫的CanvasItem中,通过\[可见性\]内的\[调制\]降低α值,使其变淡。

■4. 为Polygon2D(部件图像)分配纹理

4-1. 选择≪场景≫中的【Polygon2D】,打开≪检查器≫的\[纹理\]。

4-2. 将0-1中注册的角色素材拖放到\[空\]的位置并注册。


中央下方也会显示图像。
・使用鼠标滚轮缩放
・使用鼠标中键+移动
调整到便于查看的位置。

4-3. 此\[Polygon2D\]为一个部件。将其命名为\[torso\],并从已注册的图像中裁剪出torso(躯干)。

4-4. 从中央下方的工作窗口中选择『点』『笔图标』。

image

4-5. 同时开启「吸附」和「网格」(蓝色)。
※可在编辑中设置网格宽度等。

image

4-5. 按顺序选择纹理的4个点+终点,裁剪出torso(躯干)部分(↓视频4:00~)


4-6. 缩小主画面,寻找裁剪出的躯干。

4-7. 使用旋转枢轴设置按钮,在torso(躯干)中央附近点击。(↑视频13:00~)

image

4-8. 参考底图,移动到相同坐标。

image
※除了鼠标移动,也可以在≪检查器≫Node2D的变换坐标中输入。

4-9. 从场景的+中创建新的\[Polygon2D\],重复4-1~4-8的步骤以注册所有部件……但

复制并粘贴已注册的Polygon2D(创建的躯干),从4-4开始继续会更快。

4-10. 注册\[头\]\[颈\]\[躯干\]\[腰\]\[臂\]x2\[腿\]x2共8个部件。

・参考↓图片,确认显示优先顺序。
・arm后接的「f」表示前面front,「b」表示后面back。
・所有Polygon都放入同一层级下。
・上方的部件会显示在后方 ※Z索引相同时

至此,Polygon2D的注册已完成。这类似于一个玩偶的服装部分。
先休息一下吧!

■5. 创建Bone2D(骨骼)

5-1. 将≪场景≫中的Skeleton2D开启,确认神秘的尖角。


5-2. 如果图像显示的不是“细”的样式,调整方法如下:
・进入顶部菜单「编辑」→「编辑器设置」,开启\[高级设置\]。
・在2D中调整\[骨骼宽度\]\[骨骼轮廓大小\]等。
※细的更易查看!
※在过滤器中输入bone即可找到

5-3. 将其放置在角色整体的中心。
・有底图,因此可将Polygon隐藏(可选)
・将Bone2D(已重命名为torso)移动到肚脐附近。

5-4. 将向右延伸的尖角向上调整。
・在≪检查器≫的Bone2D中关闭\[自动计算长度和角度\]
・将Bone Angle设为-90,使其向上。
・长度也可调整。

5-5. 复制躯干的Bone2D(torso),在下方创建\[颈\]\[头\]。

・重命名为neck,使用移动工具放置在凹陷处(↓视频2:00~)
・复制neck(head),使用移动工具放置在头部根部(↓视频12:00~)

※如果末端\[head\]部分的尖角长度令人担忧,可在5-4的「长度」中调整。

5-6. 为每个身体部件\[Polygon2D\]创建Bone2D。
关键在于将关节部分作为Bone2D的起点。

・复制Bone2d\[head\],粘贴到\[torso\]中。(粘贴后移动到torso正下方也可以)
・重命名为\[Arm_f\],想象为前面的手臂骨骼(↓视频4:00~)
・将\[Arm_f\]移动到肩膀附近(↓视频7:00~)
※以肩膀为旋转轴,想象“手臂”在移动

・使用旋转工具将尖角旋转到手的末端。(↑视频13:00~)

全部Bone2D注册完成后,会是这样的(↓图片)
以torso(躯干)为整体轴,创建如图所示的树状结构。

■6. 确定休息姿势(基本姿势),进行准备工作

有很多地方让人担心,对吧?

imageBone2D的▲标记!!
警告内容是「待机姿势尚未确定」。

6-1. 选择Bone2D的父节点『Skeleton2D』时,会出现专用按钮。(↓视频4:00~)

6-2. 选择\[覆盖休息姿势\],警告▲将消失。

6-3. 是的,目前玩偶(Skeleton2D)和骨架(Bone2D)尚未联动,
只是放置在预定点上。

■7. 将Polygon2D匹配到Bone2D,完成制作

在Skeleton2D中分配Bone2D之前,进行仪式。

7-1. 选择Polygon下所有Polygon2D部件。

7-2. 在≪检查器≫的Skeleton中选择\[分配…\],选择Skeleton2D。
这样,穿衣服的准备就完成了。

选择Skeleton2D,分配给bone。

7-3. 选择Polygon内的部件。↓视频中选择了Face。

7-4. 在工作窗口中选择\[骨骼\],从Bone2D列表中选择与Face对应的Bone。
※名称为head,建议统一命名。

7-5. 选择桶工具,将多边形的四个角变白以完成注册。(↓视频8:00~)


7-6. 为每个Polygon2D部件选择对应的Bone2D,继续进行点变白的操作。

・如果误将点变白,使用旁边的桶工具可恢复颜色。
※此滑块可微妙地改变颜色,但尚未调查。

全部注册完成后,使用旋转工具检查是否有问题。


旋转torso(躯干)时,整个身体会旋转。
旋转waist(腰部)时,下方树状结构的双腿也会旋转等,进行确认。
※要恢复旋转,可使用Ctrl+Z或Skeleton2D的「重置到休息姿势」。

本次示例中的树状结构如下:

至此,2D骨骼动画的「基础」已完成。
下次在【让我们动起来,2D骨骼动画!】中再见!

3 个赞