本教程主要讲解Unity引擎自带的2D骨骼动画工具,以及2D动画的基本概念。然后新建工程示例,导入资源,并做一些动画的准备工作。
本教程适用于没有接触过Unity,或对Unity的2D引擎和工具不太熟悉的开发者。

目标效果

我们要完成的最终效果如下:

unity3d 画出 collider 2d unity怎么做2d动画_拖拽


骨骼动画与精灵图集

我们先来对比下面两张图片:


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_02

unity3d 画出 collider 2d unity怎么做2d动画_锚点_03

第一张图中,龙被分为好几个部位(头、身体、手臂等)。第二张图展示了忍者的几种姿势,每种姿势都有一系列不同的动作。这就清楚展示了角色在游戏中的动画。
我们将忍者那张图称为精灵表或精灵图集。这类型的精灵常用在经典2D游戏中,现在依然很常见。
而龙精灵那张需要更现代的2D动画技术,通常称作“骨骼动画”。顾名思义,这种动画是基于每个骨骼的,每个骨骼都可以有特定的动作或动画。将角色身体几个关键部位分离开来,更利于开发者直接在引擎中创建动画。这种新的动画技术与常用来制作3D动画的类似。
本教程将着重讲解骨骼动画。然而,Unity并不能实现真正的骨骼动画,所以我们会进行模拟。

准备制作动画的精灵

将上面龙的图片放在工程目录的Assets/Sprites文件夹下:


unity3d 画出 collider 2d unity怎么做2d动画_锚点_04


在Assets目录下新建Scenes文件夹,然后新建场景命名为Test.scene放在Scenes文件夹下:


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_05


在项目视图(Project)中选中dragon精灵,查看检视面板(Inspector):

unity3d 画出 collider 2d unity怎么做2d动画_拖拽_06


可以看到检视面板中Sprite Mode为Single。这表示引擎在新建精灵时会用到整个纹理。因为图片中是需要单独动作的各部位,所以我们将Sprite Mode改为Multiple。改完会发现新出来一个Sprite Editor 按钮:

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_07


目前Sprite Editor的切割工具用于压缩图片并不完美。为了达到最好的效果,在检视面板下方将Format从Compressed改为Truecolor。然后点击应用。


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_08


选中dragon后点击Sprite Editor按钮。弹出一个新窗口:


unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_09


窗口左上角有个Slice按钮,点击后会弹出菜单:


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_10


可以通过该菜单设置一些参数,这些参数决定了引擎如何切割精灵。如果将类型设为Automatic,引擎则会自动检测图片中角色的不同部位。你还可以设置切片的最小尺寸,锚点(切片将围绕哪个点旋转)以及下面其中一种方式:
● Delete Existing 将替换所有已有的切片● Smart将新建切片,同时保留或调整已有的切片● Safe将新建切片同时不改变已有切片
将Type设为Grid下面的选项也会有所不同:

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_11



与Automatic一样,你也可以设置精灵的锚点,同时还可以设置Pixel Size,该值决定了切片的像素宽高。

对于dragon这张图,选择Automatic模式后点击Slice按钮即可。结果如下:

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_12



如图所见,编辑器将精灵的各部位切割成了不同的矩形。这就是用于创建角色的各个部位。之前提过,这并非完美的骨骼动画,每个部位的动画将分开进行。

双击其中某个矩形,会弹出其在精灵图片中对应的属性信息:

unity3d 画出 collider 2d unity怎么做2d动画_锚点_13



你可以更改生成精灵的名称、位置、大小及锚点。也可拖拽矩形顶点处的蓝点来改变位置和大小。选中矩形中心的蓝色圆圈表示锚点。

对于这张图,让Unity自动创建单独的精灵即可。但有些情况下一些更复杂的精灵可能需要手动控制。可以在图片上点击鼠标左键并拖拽来定义矩形。

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_14



放开鼠标后 ,Unity会按照选中的矩形范围生成一张新的精灵


unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_15



点击Trim按钮将矩形应到到精灵。然后对于你想生成的所有精灵重复以上步骤。

本例中的图片使用自动模式即可,无需手动生成。

调整锚点


接下来调整生成精灵的锚点。这一步对于动画至关重要。

基本上,需要将精灵锚点设在与父物体相连的部位。例如,头部锚点应该设为接近脖子的位置。这样就能确保角色进行动画时,所有的动作如旋转等,都是围绕该点进行,这样可以让角色动作更真实。否则角色动作会很奇怪。

可以将锚点想象为玩偶的关节。为了让玩偶运动,这些关节就要放在正确位置。这与锚点是类似的。

只需拖拽各精灵中心的蓝色圆圈即可调整锚点到正确的位置(即与父物体相连的点)。下图可看到头部正确的锚点位置:

unity3d 画出 collider 2d unity怎么做2d动画_锚点_16



尾部锚点如下:


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_17




理解后重复以上步骤设置其它部位的锚点。(黑点的锚点设为中心即可)

完成后点击Apply:

unity3d 画出 collider 2d unity怎么做2d动画_拖拽_18




现在可以看到精灵旁多了个箭头:


unity3d 画出 collider 2d unity怎么做2d动画_锚点_19

点击箭头可以看到龙的各个部位:


unity3d 画出 collider 2d unity怎么做2d动画_锚点_20


组织角色


现在可以将各个部位组合起来创建角色到场景中啦。

首先将黑点那张图片拖拽到场景中。它将作为整个角色到中心,具体作用后续再看,这里只要知道它是角色基点就好

unity3d 画出 collider 2d unity怎么做2d动画_锚点_21



现在将龙身置于黑点,如下:


unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_22



重复以上步骤直到龙拼接完成。最终效果如下:


unity3d 画出 collider 2d unity怎么做2d动画_拖拽_23



虽然拼接完成了,但有些部位层次不太对。因为我们并未按照特定顺序来添加各部位。

调整层次前先将精灵存为单个游戏对象,以便后续进行动画。为保所有精灵层次正确,将黑点设为父对象,所有部位都作为其子对象。在层次面板中将所有部位拖拽到黑点下即可。

完成后如下图:

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_24



将父对象重命名为Dragon。此时移动Dragon即可移动龙的所有部位。

但如果想移动单个部位呢?例如,只想移动手,但手与手臂是相连的,所以手臂也应该要动。而如果移动手臂,则只有手臂会动,其它部位保持不动。为了实现这些,需要设置身体各部位的层次。

为了更直观,重命名各部位(右击选择Rename)如下:

unity3d 画出 collider 2d unity怎么做2d动画_拖拽_25



可以将角色当作一颗树,有树根,树干和树枝。黑点就是树根,移动黑点会带动所有部位。这里的树干就是龙身,所以下一层精灵就是身体。其余部位都是树枝。但树枝还要继续分支,例如,尾巴那里,Tail Tip就是Tail的树枝,等等。

按照如下层次组织角色各部位:

unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_26



现在移动上臂,手臂其它部位也会跟着动。


重设精灵层次


制作动画前最后一个待解决的问题就是层次。设置各个精灵的Order in Layer参数来解决层次问题。


unity3d 画出 collider 2d unity怎么做2d动画_锚点_27



建议大家使用以下设置:

•Dragon: 0•Body: 3•Head: 4•Left Leg: 4•Left Upper Arm: 5•Left Arm: 4•Left Hand: 5•Right Leg: 1•Right Upper Arm: 2•Right Arm: 1•Right Hand: 2•Tail: 4•Tail Tip: 5

最后的效果如下:

unity3d 画出 collider 2d unity怎么做2d动画_锚点_28



最后,将角色放到屏幕中央。只需将Transform的position设为(0,0,0)即可。


unity3d 画出 collider 2d unity怎么做2d动画_骨骼动画_29