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的姿势。射击和跳跃按钮及瞄准选框层在停顿动画上动画。

瞄准
显示骨骼

Additive animation blending

When playing animations on separate tracks, normally the pose from lower tracks is overridden by higher tracks. With an additive track, its pose is added to the result of the lower tracks. This enables blending the poses from multiple independent animations with varying influences, such as different facial expressions like 50% happy, 20% mad, and 30% excited.

The owl in this demo has 4 animations, one for each direction. The independent poses of each of these animations are blended together depending on the mouse cursor's position relative to the center of the canvas.

路径约束

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

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

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

显示骨骼和路径

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

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

显示骨骼和路径

裁剪

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

显示三角形

变换约束

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

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

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

显示骨骼和路径

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

旋转偏移
 
平移混合