Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
Warning: Undefined array key 1 in /www/wwwroot/134.209.24.169/wp-content/plugins/aph-prism-highlighter/includes/aphph-front.php on line 165
这里放一个Demo,是超级帅气的黄盖大叔🤤
点击左下角重置能重置Spine位置,可以拖动,滚轮/双指缩放
首先你要准备好Spine资源,我们不提供,一般来说,完整的Spine资源导出有三个文件:.skel/.json, .atlas, .png
。
用于展示的Demo使用Spine 3.7版本,建议导出.skel
二进制文件,加载会快一点。但考虑到很多旧版本Spine(比如3.6)Runtime不支持.skel
文件,我们这里使用的是.json
。选用了Spine-ts Runtime中的Spine Web Player,3.6及之前版本似乎没有。
Spine Player配置
到GitHub下载spine-player.js。地址为spine-runtimes/spine-ts at 4.0 · EsotericSoftware/spine-runtimes · GitHub,注意需要在左上角版本选取找到符合你的Spine版本,否则会有读取问题。
然后在你的网页中导入相关js和css(可以偷example里面的)。
<script src="./spine-player.js"></script>
<link rel="stylesheet" href="./spine-player.css">
为我们的player创建一个容器
<div id="move-container" style="position:fixed;z-index:999; width: 720px; height: 1080px">
<!-- z-index保证显示在大部分元素之上,使用较大的width和height能保证渲染结果的高清,之后再使用scale对大小进行缩放 -->
<!-- 如果你想要节约浏览器资源可以将width和height改小 -->
<div id="container" style="width:100%;height:100%"></div>
</div>
在Script里面简单写上几句,就能加载我们的模型出来了
<script>
new spine.SpinePlayer("container", {
jsonUrl: "你的Spine文件.json",
atlasUrl: "你的Spine文件.atlas",
animation: "指定初始动画的名称,可以不填,Spine会默认第一个动画",
premultipliedAlpha: true,
backgroundColor: "#00000000",
alpha: true,
// 这两行是为了透明背景
viewport: {
padLeft: "2%",
padRight: "2%",
padTop: "1%",
padBottom: "1%",
// 这些上下左右边距设定自行掌控
// debugRender: true,
// 开启debugRender能让你看到模型的边界
},
showControls: false,
// 不使用控制按钮,前期调试阶段可以打开
});
</script>
接下来的拖动及放大逻辑是关键,晚点更新。
评论 (0)