CocosCtreator知识点5:2D渲染组件Spine Skeleton详解

2D渲染组件Spine Skeleton详解

Spine 是一款针对游戏开发的 2D 骨骼动画编辑工具，是2D骨骼动画制作的解决方案之一（另一个比较有名的是DragonBones）。这里不解释spine动画的制作流程，只分析spine资源在Cocos中的应用。
Spine动画的原理是由骨骼(bone)驱动插槽（slot）,插槽驱动附件（attachment，附件的一个重要信息是贴图)进行移动、旋转、显示、形变等。

Spine动画的优势：

• 体积更小：相比帧动画需要提供每一帧图片。 Spine 动画只保存骨骼、动画等数据，占用的空间非常小，大大减少文件大小，提高加载速度和运行效率。
• 更高效：一套骨骼结构下可以更换不同的皮肤（纹理贴图），骨骼动画数据复用性很高，极大提升美术资产的制作效率。
• 更流畅：Spine 动画使用差值算法计算中间帧，动画总是可以保持相对流畅的效果。
• 易于控制：Spine有完善的API，程序可以在运行时访问骨骼(bones)，附件(attachments)，皮肤(skins)以及其它动画数据。在程序中可以控制骨骼，附件、混合动画、淡入淡出等等效果。

Spine动画资源

在CocosCreator中，spine可用的资源一般为3个文件：
xxx.json/xxx.skel/xxx.skel.bytes;
存储动画的骨架数据、动画关键帧数据、附件信息以及其他元数据。.skel, .skel.bytes是二进制文件，相比JSON更紧凑，加载更快，适合性能要求高的场合。
xxx.atlas/xxx.atlas.txt;
存储了动画所需的纹理集信息，包括各个图像块的位置、尺寸以及对应的名字等。
xxx.png
动画纹理资源。

组件Spine Skeleton ：

看一下spine组件可编辑的属性：

• CustomMaterial：自定义材质以实现叠加、外发光等渲染效果
• Color：设置骨骼动画颜色
• SkeletonData：导出的动画骨骼数据，拖拽 Spine 导出后的骨骼资源也就是上面说的json或s kel文件到该属性中
• Default Skin：选择默认皮肤
• Animation：选择当前播放的动画名称
• Animation Cache Mode：选择骨骼动画的渲染模式
  • REALTIME：动画默认的渲染模式。
    选择该模式Spine动画会实时计算每一帧的骨骼变形和动画混合，也就是说它支持所有的Spine特性，包括但不限于：
    •动作融合（Mixing between animations）
    •动作叠加（Stacking multiple animations）
    •动画事件（Animation events）
    •实时修改动画状态等高级功能。
    虽然功能全面，由于每帧都在CPU和GPU上执行计算，如果同时运行大量相同的骨骼动画实例，可能会对性能造成一定影响，特别是在低端设备上。如果需要频繁交互和灵活改变动画状态的游戏角色或UI元素优先选择该模式。
  • SHARED_CACHE 模式：该模式将骨骼动画及贴图数据进行缓存并共享，相当于预烘焙骨骼动画。拥有较高性能，但不支持动作融合和动作叠加，而且当创建 N（N>=3）个相同骨骼、相同动作的动画时，会呈现内存优势。N 值越大，优势越明显。对于一些不需要交互或者可以预先计算好动画序列的非关键性角色或背景元素，可以考虑使用该模式。对于动画事件的监听需要特别注意，如果发现动画的回调事件没有执行，可以检查一下是不是选择了该模式而不是REALTIM E模式。
  • PRIVATE_CACHE 模式：与SHARED_CACHE 类似，但不共享动画及贴图数据，且会占用额外的内存。一般情况下不考虑该模式。
• Loop：是否循环播放当前动画
• PremultipliedAlpha：图片是否启用贴图预乘，默认为启用。当图片的透明区域出现色块时需要关闭该项，当图片的半透明区域颜色变黑时需要启用该项。
• TimeScale：动画的播放速度。
• DebugSlots：是否显示 Slot 的 Debug 信息
  
  勾选后编辑界面的动画会显示被蓝色框框中的Slots（如果没有显示，随便切换一个界面再切回来，这个是编辑器问题）。
• DebugBones：是否显示骨骼的 Debug 信息。
  
  勾选后编辑界面的动画会显示有绿点和红线组成的动画骨骼组织结构（如果没有显示，随便切换一个界面再切回来，这个是编辑器问题）。
• DebugMesh：是否显示 Mesh 的 Debug 信息
  
  勾选后会显示动画的网格组织结构。
• UseTint：是否开启染色效果，默认关闭。
  该功能启用时，Spine组件会允许程序控制更改动画中各个slot（插槽）及其attachment（附件）的基础颜色，即可以对动画素材应用整体色调（tint）。也就是说可以给角色的各个部分赋予不同的颜色，而不必为每一种颜色变化创建单独的纹理。这对于在游戏中实现角色换装、状态变化（如血量减少变红、冰冻变蓝等）时快速改变视觉效果特别有用。
• Sockets：用于将某些外部节点挂到指定的骨骼关节上，属性的值表示挂点的数量。该功能用于在骨骼动画的某个部位上挂载节点，以实现节点与骨骼动画联动的效果。
• Enable Bacth：是否开启 Spine 合批
  如果留意上面的几张图会发现，spine组件的尺寸和锚点属性是加🔒的。
  
  这是因为Spine动画的每个Slot（插槽）的位置、旋转和缩放都是相对于其父骨骼而言的，而不是像普通UI元素那样依赖于Node组件的Anchor（锚点）和Size（尺寸）属性来进行布局。为避免和动画系统的内部逻辑冲突，Node组件原有的Anchor和Size属性不会再影响Spine骨骼动画的实际渲染位置和大小。

应用

Cocos实例4：使用Spine动画的渲染模式以及更改颜色的案例
Cocos实例5：动态加载Spine动画以及挂点的生成案例