请注意,本文编写于 1426 天前,最后修改于 764 天前,其中某些信息可能已经过时。
详细文档请参照:
官方文档写得很详细我这里就不赘述了,在这里写几点使用过程中遇到的问题和解决方法。
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>
效果预览