详细文档请参照:

官方文档写得很详细我这里就不赘述了,在这里写几点使用过程中遇到的问题和解决方法。

1.无法下载Spine Web Player 3.8

在官方的示例中使用的是3.8版本的Spine Web Player 并且也给出了github的链接。但是,那个链接访问之后的结果是404页面,即无法找到Spine Web Player的下载链接。(明明示例里面那个就是地址啊)虽然直接拷贝官方的代码也没啥问题,但请注意使用的网页是否开启了ssl,官方代码给的是http,在https页面下使用的话会出现无法加载的问题。请注意检查一下这点。
当然,如果是把js文件下载下来使用的话,就可以忽略这点了。

2. Error: could not load skeleton.json

出现这个错误信息请检查文件路径是否正确。
如果文件路径正确的话,请注意您导出时使用的Spine版本,官方文档似乎并没有强调,但是旧版本的Spine导出的.json文件使用的话确实会报错,请使用新版本的Spine进行导出。

使用示例
<script src="data/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">

<!-- Create a container element -->

<div id="player"></div>

<!-- Create the player with your settings and container ID -->

<script>
new spine.SpinePlayer("player", {
 jsonUrl: "data/Character_1.json",//这里填写导出的.json文件的路径
 atlasUrl: "data/Character_1.atlas",//这里填写导出的.atlas文件的路径,注意!!.png文件也必须在统一路径下
 animation: "idle@1",//播放动作的名称
 showControls: false,//隐藏控制界面
 alpha: true, // Enable player translucency
 backgroundColor: "#00000000" // Background is fully transparent背景透明
});
</script>

效果预览

如果觉得我的文章对你有用,请随意赞赏