Spine案例演示

Spine超越了传统2D动画的限制,如下动画展示了美工师、动画师及程序员如何利用Spine改进的工作流程和功能制作精彩游戏。

下面的演示动画均为使用我们的WebGLspine-ts运行时创建的真实动画,你可查看各个动画的源代码来了解我们如何在这些动画中使用Spine运行时。

Spine VS 精灵表单

Spine
All animations, all frame rates
0.18 MB
Sprite sheet
1 second of animation @ 30FPS
3.39 MB = 18x larger

传统的精灵动画每帧都需要一张图片,会产生大量的精灵表单。每新增一个动画都会大大增加游戏的磁盘空间和内存要求,流畅播放帧率则更甚。这不仅极大增加了美工的工作量,当必须缩减动画数量以符合大小限制时,也会对最终成品产生影响。

Spine动画只存储骨骼和动画数据,以及一个由图片组成的每个动画可重用的图集。通过利用这些数据和图集打造各种不同动画,从而让你的游戏栩栩如生。此外,Spine动画都是以内插值替换的,所以无论帧率如何,播放总是极其流畅。

比较Spine动画与精灵表单动画对内存和磁盘空间的要求。

动画速度
 

Spine整合基于帧的动画

虽然Spine可在很大程度上替代传统的逐帧动画,但仍可在需要时交换图片。例如,改变躯干或振翼视角、交替的面部表情或枪口火舌等。

Spine的插槽、附件及绘画顺序机制让你可轻松将逐帧动画整合到全动态的Spine动画中。甚至更棒的是,Spine可以操纵逐帧动画,此演示动画中外星人的头逐渐变大爆炸即是。

过渡和分层

Smooth
Abrupt

2D动画的一大劣势是经常让人感到过渡不流畅,而在3D游戏中,运行时可即时计算动画间的过渡。甚至可混合动画,如半走半跑。在2D游戏中没有Spine是不可能混合动画的,而且过渡通常是不和谐的。美工虽然可为每个可能的过渡手动创建帧,但是如果动画可在播放时中断,也于事无补。

Spine将3D的优势带回到了2D中,Spine运行时可实现动画流畅过渡,让角色看起来更自然。分层可实现在其他动画上混合动画,例如,在角色奔跑时播放射击动画,或在受伤时增加更多跛行动画。

动画速度
 

网格变形

由生硬的2D图片所构成的Spine角色已经能产生出色的结果,如上方演示动画中的Spineboy。为了让动画角色更逼真,Spine引入了3D中的网格和权重技术。网格可让图片不再是生硬的,而是可以随意弯曲和变形,权重将网格绑定到骨骼上,使图片可随骨骼移动自动变形。

网格还可提升游戏性能,并可通过不绘图片透明部分来减少填充率使用。这对于移动设备尤其重要。

此示例的精美图画由Hwadock (又名dugy)提供。可关注其Twitter博客

显示骨骼
显示三角形

皮肤

Spine的皮肤功能可实现多种定制,同时节省大量工作。使用皮肤,只需做一次动画即可给骨骼指定各种皮肤,并重复使用动画。超级灵活的是,Spine运行时可让你在运行时合并不同的皮肤部分,满足一切可能的定制需求。

皮肤让玩家可以给其游戏角色装配新外观、服装、武器及其他配件,让游戏更具个性。皮肤还可以给你的动画带来更多可能性: 如为敌人、物品及其他游戏物件混合和搭配图片,不费力就能带来丰富的变化。

此演示动画的用图可在2D Anim Heroes Unity角色包中找到。

随机皮肤

反向动力学

Spine支持反向动力学,可实现真实和动态的运动,这是通过其他动画方式很难或无法实现的。其还具备更高级的装配功能,可通过少许骨骼轻松控制复杂的姿势。

由于Spine不使用烘焙或绘图,IK在运行时可谓大放异彩。IK约束可让动画角色轻松对环境做出反应,如瞄准敌人,让双脚顺着斜坡和颠簸路面行进等等。在此演示动画中,Spineboy平稳地站在一个用户控制的滑板上,并可同时播放动画。

试试拖动红色圆圈动态调整Spineboy的姿势。射击和跳跃按钮及瞄准选框层在停顿动画上动画。

瞄准
显示骨骼

相加动画混合

在不同的轨道上播放动画时,通常较低轨道的姿势会被较高轨道覆盖。使用相加轨道时,其姿势将被添加到较低轨迹的轨道中。这可混合来自具有不同影响的多个独立动画的姿势,例如50%快乐、20%疯狂和30%兴奋的不同面部表情。

此演示中的猫头鹰有4个动画,每个方向一个。根据鼠标光标相对于画布中心的位置,每个动画的独立姿势会混合在一起。

路径约束

通常角色的一部分会沿着一条开放或封闭路径移动。你无需为此移动手动添加关键帧,可使用Spine的路径约束让骨骼沿着一条路径自动移动。这条合成的贝塞尔路径由一组互连的点构成,可用来弯曲和塑造路径。路径本身也可以是动画,甚至可以添加权重到骨骼上,让路径随着骨骼移动自动变形。

在此演示动画中,蔓藤网格被绑定到了由一条路径约束的骨骼上。网格顶点越多,弯曲会越顺滑。

还可在运行时使用路径约束产生出色的效果。试着移动红色手柄动态修改路径,蔓藤会完美沿着修改的路径移动!

显示骨骼和路径

路径约束可实现强大的装配,如此演示动画中的变形人。对于双臂和双腿,网格被加权到许多小骨骼上,小骨骼再被约束沿着四肢的简单路径移动。这些路径再被加权到可移动控制四肢的骨骼。如此安排只需使用少许骨骼即可控制大量骨骼。这样不仅让动画更简单了,在运行时只需调整少量骨骼即可动态调整姿势。

移动红色手柄让变形人跳舞!

显示骨骼和路径

裁剪

有时必须隐藏一部分动画,如此示例中的Spineboy从传送门中跳出来。这种情况下使用裁剪很方便,可将渲染限制在一个多边形区域。只显示预定义动画区域内的骨架部分。这可以实现许多其他方式无法实现的效果,如窗户、闪电效果等。还可以让裁剪只影响骨架的一个子集。例如,角色通过X射线的动画。

显示三角形

变换约束

制作有许多相互依赖部件的复杂骨架动画非常繁琐。Spine的变换约束通过解锁更强大的装配减轻了这一痛苦。通过将骨骼变换约束到其他骨骼变换,只需制作一个骨骼动画即可,其他的会自动调整。虽然表面看似简单,高级装配可很好地利用此功能将骨架根据姿势作出不同行为自动化。

变换约束很适合用在机械装置上,如此示例中的坦克。无需对每个车轮都添加关键帧,一个轮动起来,其他车轮会通过变换约束随之而动。偏移和混合可将个性特征添加回到约束部件。

坦克踏板用一个路径约束圈了起来,没有路径就无法实现动画。路径加权到车轮上,所以路径会随着车轮上下移动自动弯曲。

显示骨骼和路径

在此示例中,两个小轮的转动被大轮转动约束。此外大轮的平移受到约束使其保持在两个小轮之间。

旋转偏移
 
平移混合