最初从jekyll迁到hexo的最大动力，就是hexo的live-2d插件的看板娘功能
相关攻略很多，例如Hexo-Live2d安装教程(自定义Live2d)，不在赘述
我这里要写的是比较小众的spine模型在web上的展示
spine模型转图片
我兴冲冲的配好了hexo的配置和live-2d插件
然后游戏解包的时候傻眼了，找不到live-2d依赖的moc文件
找了半天只找到了一个atlas文件
搜live-2d和atlas关键词，找到了一篇文章
如何将手游解包的资源，变回原来游戏里的Live2D动图【适用于使用骨架动画演出L2D立绘的游戏】
这一篇文章主要讲了spine的模型文件包含三种：
- atlas：纹理信息
- png：包含纹理内容的贴图（尸块）
- skel：把这些纹理拼合起来的骨架信息
然后是如何将文件导入到spine pro中，然后导出成各种格式
我按照流程操作以后，导出为gif以后发现gif很不流畅，并且图片很大，有90多M，由于是gif，显然也不能做出交互动作，因此放弃这个方案
spine的js框架使用
找了一圈live-2d转spine的方案，没有
spine的hexo插件，也没有
因此只能自己寻找spine的js框架来用了
万幸找到了一篇在你的博客里放一只可爱的Spine
Model吧~
但是博文用的3.6.53的spine-widget.js，我的模型根据json文件看有一行"spine":"3.8.55"，直接照搬肯定会有兼容性问题
于是我到spine-ts的github去找相应版本，发现spine-widget.js在3.8版本已经取消了，用spine-player代替了spine-widget，因此需要自己来写相关代码了，但是该博文的总体思路是可以借鉴的
spine-player结合hexo
配置项
首先是在hexo配置(_config.yml)里加上
1
2
3
4
5
6
7
8
9
10
| spine:
enable: true
spine_dir: "/spine_models/ssmx_spines"
models:
- name: "BanBi"
behaviors:
start:
animation: "Idle"
hover:
animation: "Touch"
|
然后通过hexo的注入功能在根目录(_config.yml同级目录)添加文件夹scripts，模型控制代码scripts/spine-injector.js
控制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| hexo.extend.injector.register('body_end', function () {
const {
enable,
spine_dir,
models,
behaviors
} = hexo.config.spine;
if (!enable) {
return null;
}
return `
<script src="/js/spine-player.js"></script>
<link rel="stylesheet" href="/css/spine-player.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="player-container" class="player-container"</div>
<script>
var spineDir = "${spine_dir}";
var models = ${JSON.stringify(models)};
var behaviors = ${JSON.stringify(behaviors)};
var lv2 = false;
function getLv() {
if(lv2) {
return "lv2";
}
return "lv1";
}
function getModel() {
return models[Number.parseInt(Math.random()*models.length)];
}
function getAnimation(behavior) {
return behaviors[behavior]["animation"] + "_" + getLv();
}
var model = getModel()["name"];
new spine.SpinePlayer("player-container", {
jsonUrl: spineDir + "/" + model + "/" + model + ".json",
atlasUrl: spineDir + "/" + model + "/" + model + ".atlas",
alpha: true,
backgroundColor: "#00000000",
showControls: false,
success: function(player) {
player.animationState.addAnimation(0, getAnimation("start"), true, 0);
$('#player-container').hover(function() {
player.animationState.addAnimation(0, getAnimation("hover"), true, 0);
}, function() {
player.animationState.addAnimation(0, getAnimation("start"), true, 0);
});
$('#player-container').click(function() {
lv2 = !lv2;
player.animationState.setAnimation(0, getAnimation("hover"));
player.animationState.addAnimation(0, getAnimation("start"), true, 0);
})
}
});
</script>
`
})
|
其中SpinePlayer的使用文档在这里
大致逻辑是在success回调中通过addAnimation设置start动画
在hover回调中鼠标移入时设置hover动画，移出时设置回start动画
在click回调中设置动画的级别（脱外衫），并且播放一次hover动画，随后设置回start动画
控制css
在source/_data/styles.styl中写入代码：
1
2
3
4
5
6
7
8
| .player-container {
position: fixed;
width: 300px;
height: 500px;
right: -10px;
bottom: -30px;
z-index: 999;
}
|
然后在next的配置项custom_file_path中，打开style的指定文件source/_data/styles.styl
放模型
随后将模型文件放在配置文件的路径中就行了
如果模型太大的话，webify总文件有100MB的上限，此时需要放到腾讯云cos中去进行访问，配置项spine_dir改为对应的cdn加速域名即可