使用Spine Web Player嵌入资产
April 6th, 2020
有时你只需要一个简单的.html文件来包含显示你的精美Spine骨架、动画及皮肤所需的全部资产，无需麻烦的Web服务器。只需双击磁盘上的.html文件，你的浏览器就会显示你的精美杰作。
我们已通过代理spine-ts及其所有WebGL或Canvas后端将此功能添加到Spine Web Player中！下面让我们看看它是如何做到的。
数据URI - 准备你的资产
当你想让你的浏览器加载一个资产，比如一个.png文件，你可以指定一个URL，例如:
或者一个相对URL，例如:
当浏览器遇到这样一个URL时，它会请求服务器发送该文件的数据。
我们需要找到一种完全避免与服务器对话的方法。幸运的是，现代浏览器标准为我们提供了这样做的工具: 数据URIs.
数据URI是一个以data:开头的长文本，后面跟的是一个MIME类型，然后是文件的实际数据。数据本身是采用Base64编码的。这样，即使是二进制数据也可以保存到一个.html文件中。
要将文件转换为数据URI，有许多数据URI编码器可以使用。基本原理是一样的:
- 指定一个文件或文件的URL。
- 单击“上传”或“编码”或任何显示的按钮。
- 复制数据URI文本。
我们的猛龙示例的图集页就是这样做的，位于http://esotericsoftware.com/files/examples/raptor/export/raptor-pma.png。使用此HTML元素:
我们最终得到了这张漂亮的图片:
如果我们使用该文件的数据URI版本，则标记应该是这样的:
注意，我去掉了上面数据URI的99.999%，因为它非常长。这是我们将所有内容嵌入到单个.html文件中时要付出的代价。
现在你已经了解了数据URI，仅需几个步骤就可以准备导出的Spine资产进行嵌入:
- 在Spine中打开你的Spine项目，将骨架数据导出到
.json或.skel，将你的图集导出到.atlas和一个或多个.png文件。 - 用数据URI编码器对每个文件进行编码，将每个结果文本存储在某个地方，例如一个文件或所选的文本编辑器中。
就是这样！现在你可以使用Spine Web Player将你的资产嵌入在一起。
使用嵌入的资产设置Spine Web Player
我们之前在这篇博文中讨论了Spine Web Player。如果你对其内容记不大清了，建议快速看看那篇文章重温一下。
下面是一个基本的.html文件，它使用Spine Web Player来显示猛龙:
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
jsonUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pma.atlas",
animation: "walk",
backgroundColor: "#666666",
});
</script>
这就产生了此精美播放器:
我们可以看到，我们告诉播放器加载两个文件:raptor-pro.json和raptor-pma.atlas。当播放器读取.atlas文件时，它发现还需要加载另一个文件raptor-pma.png，该图片构成第一个(也是唯一一个)图集页面。
所有这些文件都是从我们的服务器加载的。为了避免这种情况，而是将所有内容都保存在一个.html文件中，我们可以使用新的配置属性rawDataURIs。我已经将raptor-pro.json、raptor-pma.atlas和raptor-pma.png文件转换为数据URI，如上一节所述。接下来，我重写了上面的部分脚本:
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
jsonUrl: "raptor-pro.json",
atlasUrl: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pro.json": "data:application/json;base64,ewoic2tlbGV0b...",
"raptor-pma.atlas": "data:application/octet-stream;base64,CnJhcHRvc...",
"raptor-pma.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
},
animation: "walk",
backgroundColor: "#666666",
});
</script>
我再次去除了上述代码片段中的数据URI，因为它们超长。让我们看看我们都改了些什么。
首先，我们重写了jsonUrl和atlasUrl属性。我们只指定一个文件名，而不是指定完整的URL。接下来，我们添加了rawDataURIs属性。它由"filename": "data URI"对组成，分别对应于我们需要加载和渲染Raptor的每个文件。就是这样!
然后，Spine Web Player将尝试加载jsonUrl。因为raptor-pro.json数据是在rawDataURIs属性中给出的，所以播放器直接从那里获取数据，而不是请求服务器提供数据。raptor-pma.atlas文件也是一样。加载图集文件后，播放器会看到图集需要raptor-pma.png图片。由于我们在rawDataURIs中也指定了这点，所以除了播放器JavaScript和CSS之外（也可以嵌入它们），没有任何对服务器的请求。 、 当然，这也适用于[二进制骨架数据]！
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
skelUrl: "raptor-pro.skel",
atlasUrl: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pro.skel": "data:application/json;base64,ewoic2tlbGV0b...",
"raptor-pma.atlas": "data:application/octet-stream;base64,CnJhcHRvc...",
"raptor-pma.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
},
animation: "walk",
backgroundColor: "#666666",
});
</script>
我们不使用jsonUrl属性，而使用skelUrl属性。在rawDataURIs部分，我们指定.skel文件的数据URI。就是这样!
平均而言，二进制骨架文件比其对应的.json文件要小得多。如果可能，请使用二进制骨架文件。
注意: 在为骨架
.json或.png文件嵌入数据URI时，你选择的编辑器可能会暂时停滞或运行缓慢。有时，关闭自动换行会有所帮助。另一种解决方案是使用像Sublime Text或Visual Studio Code这样的优秀编辑器，它们甚至可以很好地处理较大的文件。
后续
我们将在Spine 3.9中加入一个新的导出选项，让你只需单击一次即可完成上述所有操作。最终结果将是一个可使用任何Web浏览器从磁盘打开的.html文件，可发送给朋友和同事，方便轻松查看你的工作。敬请关注我们的3.9-beta频道！
欢迎在Spine论坛上分享你的想法！