如何在网站上增加一个看板娘？保姆级Live2D教学！-倦意博客

如何在网站上增加一个萌萌的看板娘呢？

就像我这个网站一样…

首先感谢作者：fguby！

废话不多说直接开始教学：

第一步，下载文件

地址：GitHub 下载压缩包解压到一个目录

第二步，配置网页文件

在需要放置看板娘的网页上引入以下代码

<div class="message"></div>
<canvas id="mycanvas" width="300" height="500"></canvas>
<audio id="my_audio"></audio>
<script src="/live2D-master/js/LAppDefine.js"></script>
<script src="/live2D-master/js/live2d.min.js"></script>
<script src="/live2D-master/js/message.js"></script>

关于src里面的地址，根据你放的目录自行修改

当然，这个插件有个问题，就是看板娘位置是固定的，不能根据移动自动固定到一个地方，我们需要以下代码：

请自行引入Jquery后再添加以下代码：
<script>
    $(document).ready(function(){
        InitLive2D();
        var canvastop = $(window).height() - 500;
        var messagetop = $(window).height() - canvastop - 2;
        $("#mycanvas").attr("style","position:fixed;left:0px;top:" + canvastop + "px")
        $(".message").attr("style","z-index:999;color:black;padding:2px;text-align: center;border: 1px solid rgba(255,137,255,.4);border-radius: 5px;background-color: rgba(255,137,255,0.7);box-shadow: 0 3px 15px 2px rgba(255,137,255,.4);font-size: 13px;font-weight: 400;text-overflow: ellipsis;text-transform: uppercase;overflow: hidden;animation-delay: 5s;animation-duration: 50s;animation-iteration-count: infinite;animation-name: shake;animation-timing-function: ease-in-out;opacity:0.9;position:fixed;left:30px;top:" + messagetop + "px")
    });
</script>

这里顺便说一下：

canvastop 是获取看板娘和浏览器最上面的距离，单位是像素

messagetop 是看板娘说话框的距离，算法就是根据canvastop 的距离再减去2像素

这两个可以自定义！

后面的$(“.message”).attr 是我定义对话框的样式，你们可以自己diy，不需要和我一模一样！

第三步，LAppDefine配置

LAppDefine 是在 /live2D-master/js 目录下

我也修改了，直接覆盖上去就行了

var LAppDefine = {   
    // 调试，true时会在console里显示日志
    DEBUG_LOG : false,
    DEBUG_MOUSE_LOG : false, // 鼠标相关日志   
    //  全部设定    
    //这里配置canvsa元素的id
    CANVAS_ID : "mycanvas",
    //是否开启滚轮缩放，默认true
    IS_SCROLL_SCALE : false,
    // 画面最大缩放级别
    VIEW_MAX_SCALE : 2,
    // 画面最小缩放级别
    VIEW_MIN_SCALE : 0.8,

    VIEW_LOGICAL_LEFT : -1,
    VIEW_LOGICAL_RIGHT : 1,

    VIEW_LOGICAL_MAX_LEFT : -2,
    VIEW_LOGICAL_MAX_RIGHT : 2,
    VIEW_LOGICAL_MAX_BOTTOM : -2,
    VIEW_LOGICAL_MAX_TOP : 2,
    
    // 动作优先级常量
    //关于各个事件触发的表情可以用动作常量优先级来取代
    PRIORITY_NONE : 0,
    PRIORITY_IDLE : 1,
    PRIORITY_NORMAL : 2,
    PRIORITY_FORCE : 3,

    //是否绑定切换模型按钮
    IS_BIND_BUTTON : false,
    //绑定按钮元素id
    BUTTON_ID : "Change",
    //是否开启模型切换完成之前禁止按钮点击的选项，默认为true
    IS_BAN_BUTTON : true,
    //设置按钮禁止状态时的class，可自定义样式，前提是IS_BAN_BUTTON为true
    BAN_BUTTON_CLASS : "inactive",
    //设置按钮正常状态时的class
    NORMAL_BUTTON_CLASS : "active",
    //衣服切换模式 目前只支持两种 sequence-顺序 random-随机
    //需事先配置好json文件里的textures属性
    //暂不支持保存功能
    TEXURE_CHANGE_MODE : "sequence",
    IS_START_TEXURE_CHANGE : false,
    TEXURE_BUTTON_ID : "",
    /**
     *  模型定义
        自定义配置模型，同一数组内放置两个模型则为开启双模型
        三模型也只取数组里的前两个
        模型出现的顺序与数组一致
        这里请用相对路径配置
     */
    MODELS:
    [
        ["/live2D-master/model/haru/haru.model.json"],
        //["/live2D-master/model/xiaomai/xiaomai.model.json"],
        // ["/live2D-master/model/wanko/wanko.model.json"],
        // ["/live2D-master/model/shizuku/shizuku.model.json"],
        // ["/live2D-master/model/haru/haru_01.model.json","model/haru/haru_02.model.json"],
        // ["/live2D-master/model/Epsilon2.1/Epsilon2.1.model.json"],
        //["/live2D-master/model/Pio/model.json"]
    ],

    // 与外部定义的json文件匹配
    MOTION_GROUP_IDLE : "idle", // 空闲时
    MOTION_GROUP_TAP_BODY : "tap_body", // 点击身体时
    MOTION_GROUP_FLICK_HEAD : "flick_head", // 抚摸头部
    MOTION_GROUP_PINCH_IN : "pinch_in", // 放大时
    MOTION_GROUP_PINCH_OUT : "pinch_out", // 缩小时
    MOTION_GROUP_SHAKE : "shake", // 摇晃
    //如果有自定义的动作分组可以放在这里

    // 与外部定义json文件相匹配
    HIT_AREA_HEAD : "head",
    HIT_AREA_BODY : "body",
    
    //初始化的模型大小
    SCALE : 1.0,
    //新增属性，是否播放音频 默认为true
    IS_PLAY_AUDIO : true,
    //新增属性，audio标签id值   
    AUDIO_ID : "my_audio"
};

你再测试一下有没有出现看板娘！

如果还有什么不懂，可以直接回复或者参考作者的 GitHub说明