Blog添加2d模型

最初从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)里加上

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

控制代码

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中写入代码：

.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加速域名即可

由于最终放弃了webify的方案，100MB的上限太难受了，那么随后将模型文件放在配置文件的路径中就行了

还有个问题，hexo会自动渲染模型中的json文件并报错

hexo的配置文件使用skip_render来跳过

skip_render:
    - spine_models/*.html
    - spine_models/**

• 如果设置skip_render不起作用，可以先执行hexo clean清除一下缓存。

• 如果需要查看是否成功跳过编译，可以在编译的时候加上--debug：

  hexo generate --debug