Spine版本: 3.7+
标签:

基础版, 专业版, 网格, 权重

Power-up

Power-up项目演示了使用加权网格可为简单的动画增添视觉效果。我们为Spine Essential基础版(powerup-ess.spine)和Spine Professional专业版(powerup-pro.spine)提供了两个分开的Spine项目,Spine Essential基础版仅依靠基础的变换,如旋转倾斜,而Spine Professional专业版(如下所述)使用了加权网格来实现更动感的效果。

翅膀

设置

每只翅膀由3个骨骼组成。左翅膀的骨骼被命名为left-wingleft-wing2left-wing3,这3个骨骼使left-wing插槽下的wing附件变形。

right-wing插槽的wing网格附件是一个副本,只是它使用了一个-1scaleX在X轴上翻动。

两个网格使用了同一张图片,在导出骨架的纹理图集时可节约空间。

为保证翅膀骨骼旋转时网格的适当变形,顶点密度沿骨骼方向变密。

首先在权重视图中使用自动功能将每个翅膀的顶点分别加权到其对应的骨骼。然后使用平滑使翅膀弯曲变得更柔和。最后,使用值为5.5的修剪`功能对权重进行修剪。修剪通过删除任何低于给定值的权重来优化权重。

动画

在将所有顶点都加权到骨骼后,实现飞翼动画只需要对翅膀骨骼设置关键帧。加权网格会根据其权重来跟随骨骼。

中间图标

设置

两个翅膀中间的图标是一个单一的网格附件。

动画

并非使用权重通过骨骼移动顶点,图标网格是通过设置单个顶点位置的关键帧来实现人为变形的。

比较

这张GIF图左边显示了基于网格的power-up(使用Spine专业版完成),右边显示了仅使用变换的动画power-up(使用Spine基础版完成)。通过使用网格,只需几个简单的步骤就可以让基本的power-up动画变得更加逼真。