使用Spine Web Player嵌入资产

April 6th, 2020

有时你只需要一个简单的.html文件来包含显示你的精美Spine骨架、动画及皮肤所需的全部资产,无需麻烦的Web服务器。只需双击磁盘上的.html文件,你的浏览器就会显示你的精美杰作。

我们已通过代理spine-ts及其所有WebGL或Canvas后端将此功能添加到Spine Web Player中!下面让我们看看它是如何做到的。

数据URI - 准备你的资产

当你想让你的浏览器加载一个资产,比如一个.png文件,你可以指定一个URL,例如:

<img src="https://mydomain.com/images/myimage.png">

或者一个相对URL,例如:

<img src="/images/myimage.png">

当浏览器遇到这样一个URL时,它会请求服务器发送该文件的数据。

我们需要找到一种完全避免与服务器对话的方法。幸运的是,现代浏览器标准为我们提供了这样做的工具: 数据URIs.

数据URI是一个以data:开头的长文本,后面跟的是一个MIME类型,然后是文件的实际数据。数据本身是采用Base64编码的。这样,即使是二进制数据也可以保存到一个.html文件中。

要将文件转换为数据URI,有许多数据URI编码器可以使用。基本原理是一样的:

  1. 指定一个文件或文件的URL。
  2. 单击“上传”或“编码”或任何显示的按钮。
  3. 复制数据URI文本。

我们的猛龙示例的图集页就是这样做的,位于http://esotericsoftware.com/files/examples/raptor/export/raptor-pma.png。使用此HTML元素:

<img src=http://esotericsoftware.com/files/examples/raptor/export/raptor-pma.png>

我们最终得到了这张漂亮的图片:

raptor

如果我们使用该文件的数据URI版本,则标记应该是这样的:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE....">

注意,我去掉了上面数据URI的99.999%,因为它非常长。这是我们将所有内容嵌入到单个.html文件中时要付出的代价。

现在你已经了解了数据URI,仅需几个步骤就可以准备导出的Spine资产进行嵌入:

  1. 在Spine中打开你的Spine项目,将骨架数据导出到.json.skel,将你的图集导出到.atlas和一个或多个.png文件。
  2. 数据URI编码器对每个文件进行编码,将每个结果文本存储在某个地方,例如一个文件或所选的文本编辑器中。

就是这样!现在你可以使用Spine Web Player将你的资产嵌入在一起。

使用嵌入的资产设置Spine Web Player

我们之前在这篇博文中讨论了Spine Web Player。如果你对其内容记不大清了,建议快速看看那篇文章重温一下。

下面是一个基本的.html文件,它使用Spine Web Player来显示猛龙:

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<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.jsonraptor-pma.atlas。当播放器读取.atlas文件时,它发现还需要加载另一个文件raptor-pma.png,该图片构成第一个(也是唯一一个)图集页面。

所有这些文件都是从我们的服务器加载的。为了避免这种情况,而是将所有内容都保存在一个.html文件中,我们可以使用新的配置属性rawDataURIs。我已经将raptor-pro.jsonraptor-pma.atlasraptor-pma.png文件转换为数据URI,如上一节所述。接下来,我重写了上面的部分脚本:

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<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,因为它们超长。让我们看看我们都改了些什么。

首先,我们重写了jsonUrlatlasUrl属性。我们只指定一个文件名,而不是指定完整的URL。接下来,我们添加了rawDataURIs属性。它由"filename": "data URI"对组成,分别对应于我们需要加载和渲染Raptor的每个文件。就是这样!

然后,Spine Web Player将尝试加载jsonUrl。因为raptor-pro.json数据是在rawDataURIs属性中给出的,所以播放器直接从那里获取数据,而不是请求服务器提供数据。raptor-pma.atlas文件也是一样。加载图集文件后,播放器会看到图集需要raptor-pma.png图片。由于我们在rawDataURIs中也指定了这点,所以除了播放器JavaScript和CSS之外(也可以嵌入它们),没有任何对服务器的请求。 、 当然,这也适用于[二进制骨架数据]!

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<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论坛上分享你的想法!

OlderNewer