Spine版本: 3.7+
Power-up
Power-up项目演示了使用加权网格可为简单的动画增添视觉效果。我们为Spine Essential基础版(powerup-ess.spine
)和Spine Professional专业版(powerup-pro.spine
)提供了两个分开的Spine项目,Spine Essential基础版仅依靠基础的变换,如旋转和倾斜,而Spine Professional专业版(如下所述)使用了加权网格来实现更动感的效果。
翅膀
设置
每只翅膀由3个骨骼组成。左翅膀的骨骼被命名为left-wing
、left-wing2
和left-wing3
,这3个骨骼使left-wing
插槽下的wing
附件变形。
right-wing
插槽的wing
网格附件是一个副本,只是它使用了一个-1
scaleX在X轴上翻动。
两个网格使用了同一张图片,在导出骨架的纹理图集时可节约空间。
为保证翅膀骨骼旋转时网格的适当变形,顶点密度沿骨骼方向变密。
首先在权重视图中使用自动
功能将每个翅膀的顶点分别加权到其对应的骨骼。然后使用平滑
使翅膀弯曲变得更柔和。最后,使用值为5.5的
修剪`功能对权重进行修剪。修剪通过删除任何低于给定值的权重来优化权重。
动画
在将所有顶点都加权到骨骼后,实现飞翼动画只需要对翅膀骨骼设置关键帧。加权网格会根据其权重来跟随骨骼。
中间图标
设置
两个翅膀中间的图标是一个单一的网格附件。
动画
并非使用权重通过骨骼移动顶点,图标网格是通过设置单个顶点位置的关键帧来实现人为变形的。
比较
这张GIF图左边显示了基于网格的power-up(使用Spine专业版完成),右边显示了仅使用变换的动画power-up(使用Spine基础版完成)。通过使用网格,只需几个简单的步骤就可以让基本的power-up动画变得更加逼真。