关于前端:2D动画spine渲染原理解析与源码解读

前言：什么是 spine？

为了让初学者有更加直观的初步的理解，笔者提供了一个简略的示意图如下:

理论开发中，由设计人员提供对应的 spine 编辑器所导出的动画素材，开发人员选用对应的 spine 运行库对素材进行生产和上屏渲渲染，便是 spine 所做的事，相比 gif、css 帧动画、apng 具备更加弱小的灵活性。

简略比拟如下：

GIF 因为其自身的色调限度，个别不能满足设计的要求，因而目前大多采纳 CSS 帧动画和 APNG 的形式解决页面动画，小区域动画采纳 apng，大区域动画能够思考采纳 CSS 帧动画或 JS 动画解决。而厘米秀这里因为业务自身简单且形象打扮多变，故不得不采纳 spine2D 动画的计划。

正文：

1）、JSON 文件 / 二进制文件：存储骨架信息，见下文介绍。

2）、素材图片：相似雪碧图，也可繁多素材，可导出一张或多张。

3）、与素材图片对应的 atlas 文件：记录素材图片在雪碧图上的地位信息特色等。一个 atlas 文件可对应多个素材图片。

一、基本概念

1、骨架 Skeleton：指代的是数据的汇合，蕴含形成此骨架的所有骨骼、插槽、附件及其他信息。

2、骨骼 bones：以官网示意图为例，一个人物自身由多个关节的骨骼组成。除了根骨骼以外，每个骨骼都有对应的父骨骼，骨骼与骨骼之间的关系最终结构成相似树的构造。

3、插槽 slot：一个骨骼 bone 下可能有多个 slot 插槽，每个 slot 插槽下能够搁置一个附件实例。插槽自身的存在有两个重要的意义，一个是灵便的管制渲染程序，一个是分组同类附件。一个插槽能够有多个附件，但一次只能看到一个。举个简略的栗子，图中手枪所在的地位的插槽是 ” 武器 ” 插槽，而该插槽能够搁置不同的武器附件，例如 ” 手枪 ” 附件或 ” 菜刀 ” 附件。

4、附件 attachment：slot 插槽内以后渲染的附件实例，即实在上屏渲染的实物素材。（可能须要对素材做旋转、偏移、缩放甚至网格化 mesh 解决）。

5、皮肤 skin：skin 能够看做是 attachment 的汇合，或者能够认为是 attachment 的一个映射查问表，一个人物能够由多套 skin，通过切换 skin 的形式去查问不同的附件映射表，便能够变相的实现人物的全身换装。

其余相干概念：

关键帧：

在编辑器中，动画是借助关键帧实现的，从开始到完结的过渡动画，由 spine 补间解决。

权重与网格：

权重用于将网格顶点绑定到一个或多个骨骼。变换骨骼时，顶点也会随之变换。权重令网格可能随着操纵骨骼而主动变形，从而让本来简单的网格变形动画变得与骨骼动画一样简略。

附件类型：
1、区域附件：一般的图片展现附件。
2、点附件：空间中的一个点和旋转，相比骨头的劣势能够为不同的皮肤设置更改地位和旋转，例如不同的枪从不同的地位射击。
3、网格附件：反对在图片内设置多边形，之后可操纵多边形的顶点，以无效的形式让图片蜿蜒和变形。
4、边界框附件：附加到骨骼上的多边形，骨骼变动的时候也会随之变形，可用于撞击检测，创立物理主体等。
5、剪裁附件：剪裁性能让你能够定义一个多边形区域，与边界框附件相似，它会屏蔽绘制程序中的其余插槽。
6、门路附件：用于设置门路。

其中在业务中比拟罕用到的是区域附件和网格附件。

三种束缚：
1、IK 束缚：反向动力学束缚 子骨头起点固定的场景。
2、变换束缚：变换束缚指的是将对骨骼的世界旋转、挪动缩放等复制到多个骨骼上。
3、门路束缚：应用门路来调整骨骼变换，骨骼能够沿着门路，也能够调整旋转以指向门路。

二、spine 架构和外围类解读

spine 整体架构分层如下：

spine 外围类如下：

读懂下面这张官网所提供的类图，将会对 spine 的整体架构设计有更加明确的理解和意识。

1、Loading 模块：是针对资源加载的解决，一个 spine 形象的骨架信息导出后，个别会导出为 json 或者二进制文件的模式，因为 json 模式纯文本文件过大，所以官网提供了二进制文件导出的模式，并且辅以运行库的代码针对二进制文件进行解析。其次，Loading 模块中的 atlasAttachmentLoader 将会负责 atlas 文件的解析，因为 atlas 文件自身是字符串的模式，外部蕴含雪碧图中素材的地位信息，所以须要解析后与素材建设”关联关系“。例如：Eyes-close 素材在 picture1.png 图片中的 x,y 地位 旋转角度为 z，而结构进去的这种映射关系将用于被实例化 attachment 的时候生产。

2、Spine Texture Atlas 模块：一张素材图映射一个 atlasPage，一张素材图中的某个区域块映射一个 atlasRegion，而 region 的具体绘制信息实质上曾经在上个模块实现。

3、Rending 模块：由渲染层遍历 slot 进行渲染，这里不做详解，渲染层并非 spine 外围库所负责的局部，上屏渲染能够由 canvas、webGL 或者其余第三方渲染库渲染，例如 pixijs。

4、SetupPoseData 模块：或者称之为 SkeletonData 模块，数据源从这里输出进行解决，然而并不是最终数据，能够了解为这里对数据做了一层预处理，会将骨骼数据先解决为 boneData，插槽数据处理为 slotData，当然也有局部数据不须要被再次解决，在这里，也会依据后面生成的 atlasRegion 去结构出对应的附件实例，存储进 skin 中，skin 实质上为附件映射表。

其次，数据对象自身和实例对象是有差异的。

数据对象是无状态的，可在任意数量的骨架实例间共用。有对应实例数据的数据对象类名称以“Data”结尾，没有对应实例数据的数据对象则没有后缀，如附件、皮肤及动画。

实例对象有许多属性与数据对象雷同。数据对象中的属性代表拆卸姿态，通常不会改变。实例对象中的雷同属性示意播放动画时该实例的以后姿态。每个实例对象保有一个其数据对象参考，用于将实例对象重置回拆卸姿态。

例如，SkeletonData 是数据对象，而 Skeleton 是实例对象。

5、Instance Data 模块：或者称之为 Skeleton 模块，Skeleton 实例自身是渲染层上屏渲染的实在间接数据源，渲染层将读取 Skeleton 实例上的插槽信息，渲染对应的附件，在这里，许多数据对象曾经被解决成对应的实例对象，例如 boneData 曾经被解决为 Bone 实例，slotData 曾经被解决为 Slot 实例；其次，如图中所展现的，Skeleton 实例中有两个比拟要害的办法，updateWorldTransform 和 setToSetUpPose。

updateWorldTransform 为更新世界变换，实质是触发骨骼地位的计算，因为骨骼地位可能产生旋转偏移，其对应的子骨骼也会受到影响，因而须要更新世界变换从新计算所有骨骼的最新坐标地位。

setToSetUpPose 为更新实例到以后初始状态，个别才初始化时或重置人物状态时调用，会将人物形象骨骼打扮等切换为初始最后的状态。

6、Animation 模块：动画模块被独自抽离，不仅更不便保护和更新实例的状态信息，整体架构逻辑也简洁明了，由动画 state 实例去触发 skeleton 实例的更新，接下来 skeleton 实例调用 updateWorldTransform 更新世界变动，之后从新上屏渲染。

一个动画实例中由多个 timeline 形成，这些 timeline 实例来自于不同的变种 Timeline 类，基本上都继承与底层的 TimeLine 类，因为一个动画过程中可能波及多种变动，因而须要对不同的动画进行划分区别，解决旋转的独自一条 timeline，解决缩放的独自一条 timeline，等等。而尽管不同类别动画会抽离成不同的 timeline，然而最终某个工夫节点失效触发，所有的 timeline” 作用 ” 都是同时的。

三、spine 源码解读

1、Slot：存储插槽的以后姿态。插槽为 {@link Skeleton#drawOrder} 目标组织附件，并提供存储附件状态的地位。状态不能存储在附件自身中，因为附件是无状态的，能够跨多个骨架共享。
（deform 属性是针对 mesh 附件的解决信息。）
（通过 setToSetUpPose 设置初始动作）
（在 slot 实例里能够间接 getAttachment 和 setAttachment）

2、SlotData：slot 实例里用的数据的数据格式，蕴含 index、插槽名称、附件名称、boneData 等。

3、BoneData：骨头实例里用的数据格式，蕴含 index（骨头也有 index）、骨头名称、父骨头数据、骨头本地转换数据、世界转换的模式。

4、Bone：要害办法 updateWorldTransformWith，更新骨骼的世界坐标。蕴含其余的一些办法，世界坐标和本地坐标的转换，旋转转换等。

5、SkeletonData: Skeleton 实例对应的数据格式。蕴含 bones、slots、skins、events、animations、各种束缚。提供了
因为是数据对象，仅提供了一些 findbone、findslot 的办法。

6、Skeleton：依据 data 新建 Bone 和 Slot。bone 有 index 按程序建设关联关系。调用 setToSetupPose 将 bone 和 slot 设置到初始地位。会遍历调用 bone 和 slot 对应的办法。updateWorldTransform 调用 bone 的 updateWorldTransform 更新骨骼地位。提供了一些 Bone、slot、attachment 的 get、set 办法。
有个 update 办法，更新 time 工夫。

7、SkeletonBinary：用于读取二进制的 skeleton 文件。

8、SkeletonBounds：收集每个可见的 BoundingBoxAttachment，并计算其多边形的世界顶点。次要用于碰撞或者命中检测。由渲染层调用。

9、SkeletonCilpping：次要针对 ClippingAttachment 的解决，由渲染层调用。

10、SkeletonJson：用于解析解决 spine 导出的 skeleton json。须要对应传入一个 attachmentLoader 让其能结构对应的 attachment 实例，解决 bone、slots、ik、skins、animation 等数据。
解决 bone 和 slot 结构对应的实例 data。
解决 skins 借助 loader 生成对应附件实例。
解决 animations 生成不同的 timeline 实例对象。
最终结构出对应的 SkeletonData 实例。

11、Skin：一套皮肤下的所有 attachment 都在 skin 实例下，提供了操作 skin 和 attachment 的办法。这里操作的办法相当于 dictionary，不是扭转人物打扮的。

12、attachment 目录：各种附件的解决解决办法，继承于 Attachment 基类。理论由对应的 AttachmentLoader 调用对应的附件类办法。
AtlasAttachmentLoader 实现了对应办法。

13、Texture：定义了 Texture 抽象类，定义一些形象办法须要被实现。

14、TextureAtlas：针对 atlas 文本进行解析解决，实现 TextureAtlasReader 进行逐行读取，texture
借助内部传入的 textureLoader 回调来获取对应的纹理。
每块小素材对应一个 TextureAtlasPage，素材信息读取解析后结构对应 TextureAtlasRegion。

15、AnimationStateData：存储 AnimationState 动画更改时要利用的混合（穿插淡入淡出）持续时间。

16、AnimationState：随着工夫调用动画，动画入队期待播放，容许多个动画叠加。
分多个 track 存储动画、辨别不同动画的 timeline，针对 event 事件的解决逻辑等。

17、Animation：实现了各种 timeline 类，Animation 负责调用 apply 办法触发更新，其 apply 办法会调用各个 timeline 的 apply 办法更新。timeline 类中实现找到对应关键帧 决定如何渲染。

18、AssetManager：动态资源管理，包含拉取文本资源、拉取二进制资源、加载纹理。调用 TextureAtlas 解决 atlas 文本等。

四、渲染库代码解读

canvas：
1、AssetManager：没有做啥，间接沿用 core 里的 AssetManager
2、canvasTexture：继承 Texture。
3、SkeletonRender：传入 skeleton 数据，渲染画布，
drawImage 会遍历 drawOrder 中的 slot，一一渲染 region 附件，借助 ctx.drawImage API 来裁剪和渲染图片。
drawTriangles 会计算顶点，渲染调试模式的绿色线条。

threejs：
1、ThreeJsTexture：针对 threesjs 自身的 texture 做了一层包裹，解决了一下 filter。
2、MeshBatcher：MeshBatcher 继承自 Threejs 自身的 Mesh。调用 SkeletonMeshMaterial 获取材质。
3、SkeletonMesh：SkeletonMeshMaterial 继承自 ShaderMaterial，这里蕴含了着色器代码，顶点着色器和片元着色器。
SkeletonMesh 继承自 Object3D 类。
外围渲染函数 updateGeometry，skeleton 更新世界变动后，调用渲染函数，遍历 drawOrder。
RegionAttachment 和 MeshAttachment 会进行渲染，渲染借助 MeshBatcher，纹理作为素材传入 batchMaterial。

webgl：
1、GLTexture：获取画布，渲染对应的 image 到画布上。
2、Camera：设置相机地位
3、WebGL：定义了 ManagedWebGLRenderingContext，其实就是获取 webgl 的 context 上下文。
4、Input：对元素做事件监听，鼠标、touch 事件。
5、Shader：自行实现的着色器，片元和顶点。
6、SkeletonRenderer：负责 skeleton 的上屏渲染，渲染函数须要借助 PolygonBatcher 来上屏渲染，同样的，只会对 RegionAttachment 和 MeshAttachment 会进行渲染。
7、PolygonBatcher：在这里绑定着色器，设置混合模式，绑定一个 Mesh 实例对象，Mesh 为独自封装的 mesh 类，最终调用的是 Mesh 裸露的渲染办法。
8、Mesh：独自封装的 Mesh 类，容许设置指数和顶点，上屏渲染借助 context 的 drawElements 和 drawArrays 办法。
9、SceneRenderer：最上层的调用类，实例化 batcher、webgl 上下文、shader，实例化 SkeletonRenderer，裸露不同的渲染办法，包含 drawSkeleton，drawSkeletonDebug、drawTexture、drawRegion 等。

五、spine 渲染整体流程图

依据后面的介绍，咱们对基本概念有所理解，并且理解了 spine 的整体架构设计，针对外围模块进行了介绍，同时对 spine 外围库源码以及渲染层源码的要害逻辑进行解读，能够整顿出 spine 渲染的整体流程图如下：

看到这里置信你对 spine 的整体架构设计，渲染流程都曾经有了大抵的理解，接下来在明确了底层外部的解决流程后，咱们的下一步工作是实现换装和换动作 API，具体如何实现，请听下回分解！

谢谢观看~~