Spine Viewer 在线预览：在浏览器中预览 Spine 动画

Spine 项目的生命周期比编辑器版本更长。一个角色可能三年前用 3.8 版本导出，而另一个角色是上周用 4.2 版本导出的，这种情况很常见。您无需选择运行时环境。查看器会检查骨骼 JSON 中的版本字符串，并加载匹配的版本。如果导出版本早于 3.6 或晚于 4.3，它会提示您，而不是渲染乱码。

所有内容都绘制在浏览器中的 WebGL 画布上。文件在本地读取，绝不会发送到任何地方，这对于受保密协议约束的未发布角色美术素材至关重要。这也意味着大型纹理页面会以计算机解码速度快速显示，无需等待加载。

标准的 Spine 导出会生成三种文件：骨架文件 .json、.atlas 文本文件以及 .atlas 指向的一个或多个纹理图像。您需要所有这些文件。图集只是一张地图；没有图像，就无法绘制任何内容。

一次性选择或拖入所有图集。查看器会根据文件名将每个图集页面与其对应的图像匹配，并将角色放置在画布上。之后，您可以切换动画、尝试不同的皮肤、更改播放速度以及平移或缩放以查看细节。

角色在正常尺寸下看起来可能没问题，但仍然存在一些只有在引擎中才能发现的问题：例如，网格在某一帧中发生折叠、裁剪附件裁剪过度、路径约束将骨骼拉到奇怪的位置等等。调试叠加层会将这些辅助信息绘制在图像上，以便您查看它们。

只开启你需要检查的内容。如果同时开启所有八个叠加层，屏幕很快就会变得很拥挤。骨骼和网格通常是首先要检查的，如果某些部分看起来被裁剪或漂移，则接下来检查裁剪和路径。

一个循环动画无法让你充分了解角色在游戏中的感觉。时间轴允许你按顺序排列多个片段，例如从待机到奔跑再到攻击，并观察过渡效果。每次交接都会应用您设置的几秒钟内即可完成的交叉淡入淡出效果，这样您就可以在引擎团队发现问题之前，判断默认混合是否流畅，或者是否需要更长时间的混合。

该序列会在单个轨道上逐个播放片段。它不是分层的多轨道混音器，因此如果您需要同时查看瞄准和奔跑等效果，请在引擎中进行测试。对于检查转场是否流畅，时间线通常足够快速且足够。

当序列看起来合适时，您可以将其导出。GIF 导出以 12 fps 的帧率捕获，并将长边限制在 640 像素，这对于 Slack 讨论串或工单来说足够了。视频导出以 30 fps 的帧率录制为 MP4 格式（如果浏览器支持），否则录制为 WebM 格式。两种格式都会嵌入当前背景颜色，因此请选择适合片段用途的格式。录制过程在您的计算机上进行；不会上传任何内容。

查看器是导出和导入之间的检查点。如果图集页面过于冗余，请使用纹理打包器重新打包。如果您继承了一个没有数据文件的散页精灵图，精灵图解包器可以将其拆分回帧。然后返回此处，确认结果仍然可以正常播放。

在浏览器标签页中进行这项检查只需一分钟。但如果角色已经处于 Unity、Phaser 或 Cocos 版本中，那么查找同样的问题通常需要花费更多的时间。