序章：

live2d常常被我们用于做手机的动态壁纸增加萌点！比如像live2dviewerex这样的软件
当然你也可以把ta放到你的博客上看板！这样也很卡哇伊不是吗(

)
live2d目前技术还不是很成熟 但是很适合用来做网站的看板娘 这一点是不错的
废话不少说
直接进入今天的正题

获取模型&调整：

科普：

Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。
通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法 大幅度转身，开发商正设法让该技术可显示360度图像。
首先既然是做live2d的看板娘怎么能少了最基础的模型呢！

这里是本project的大概流程图：

1准备Live2d的模型（你喜欢的）
2准备官方或者修改的SDK（合成）
3将相应文件上传至网站相应目录
在相应位置插入 js css div以及其他附属
最后调整css

关于模型如何获取

以下为获取途径：

1.百度贴吧 （live2d吧 live2dviewerex吧 ）这里面有很多模型 自己去看看吧！看看能不能找到你们的老婆
2.在游戏里提取（注意版权问题）这些游戏都是由live2d引擎驱动的 像在这些游戏里都能提取出模型 置于方法嘛（自己百度吧）说出来我怕菊花被人捅烂
下面是搭载了live2d的游戏《樱花庄的宠物女孩》【2013/02/14】(角川游戏)PSP/PSV 《某魔术和科学的群奏活剧》【2013/02/21】(NBGI)PSP 《药水制作师》【2015/3/23】(Sinsiroad) 安卓/ios 这里有篇讲如何提取《药水制作师》《碧蓝航线》。。。。

关于提取模型的文章：

相关链接@猫与向日葵 获取模型的格式 最好是moc的可编辑工程文件 当然lpk也行 但是lpk能不能用就看你的运气了因为lpk可能会被加密

这里讲讲如何打开模型

查看模型需要使用LIVE2D官方提供的Live2D Viewer，下载和安装方法请查看 这个网页然后如果你下载（或者提取的）的是编工程文件的live2d的话 （json已经写好的）你可以吧json拖到live2d-viewer里面就可以预览模型了
如果是lpk格式的文件的话 这里讲解一种（菊花被人捅烂的方法解lpk）

先下载好lpk

然后用zip压缩工具查看打开这个lpk 并且解压

然后解压里面的文件出来就可以得到moc 那样的模型文件了
如果你下载的lpk是被加密过的那么这个方法就不能使用了（乖乖换老婆或者想其他办法吧）

同样我们可以把别的模型也拖进去拖进live2d-viewer里 就可以预览模型了
打开Live2D Viewer，将json或者moc （网页只调用json）拖入主窗口，可以看到模型已经加载成功，若有贴图错位、动作鬼畜等情况则为上一步的json文件配置有误，测试直到找到正确的模型、动作、贴图组合

有些模型是自带动作以及语音的（有些不带 后面我会详细讲如何添加语音的）

这样可以测试动作：

选择要测试的动作，点击Playback播放动作以测试动作是否正常，勾选Loop可以循环播放 模型测试好了之后就进入下一步吧！ 模型大概就到这里了 下面是主体部分：

接下来是准备SDK

为了效率最大化，为了不重复造轮子，为了社会主义的发展 我们这里直接调用而是用@EYHN大佬封装好的库来加载并显示模型。
相比较官方版本而言，仅需一条命令即可进行模型的加载，无疑方便许多。而且官方的sdk还附加背景以及其他之类的 我们这里博客不需要 当然如果你需要的话可以自己去使用官方的sdk！
以下为增加博客萌点所做٩(๑>◡<๑)۶
但对于「药水制作师」这款游戏的模型来说，上面所说的库还需经过一些修改。
转载 @猫与向日葵

修改原因： 基于commit #fea64e4修改，修改内容：

修复移动鼠标会触发点击事件的问题
增加鼠标点击事件
移除自带的眨眼动作
增加久置动作与事件支持
增加自定义HIT_AREA的方法
由于原项目使用了GPL v2开源协议，修改后的代码已开源至GitHub，若想修改请参考项目hexo-helper-live2d 鉴于该项目仍在活跃开发中，@猫与向日葵修改的版本可能会随时间变化而过时
编译后的版本可以在这里下载：点这里 以下部分内容为转载内容：
提示功能（可选）
这部分直接抄自之前的浮动小人，做了部分修改，非必须项，须jQuery支持
若不启用此部分内容，下一步应作相应修改
此处代码不可直接套用，应根据自身情况进行修改 这里是为小人添加消息提示框的 此部分可以不做 当然你喜欢的话我也是不介意的

脚本

将以下内容保存为waifu-tips.js，放至相应目录

function render(template, context) {

    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

    return template.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) {  
            return word.replace('\\', '');
        }

        var variables = token.replace(/\s/g, '').split('.');
        var currentObject = context;
        var i, length, variable;

        for (i = 0, length = variables.length; i < length; ++i) {
            variable = variables[i];
            currentObject = currentObject[variable];
            if (currentObject === undefined || currentObject === null) return '';
        }
        return currentObject;
    });
}
String.prototype.render = function (context) {
    return render(this, context);
};

var re = /x/;
console.log(re);
re.toString = function() {
    showMessage('哈哈，你打开了控制台，是想要看看我的秘密吗？', 5000);
    return '';
};

$(document).on('copy', function (){
    showMessage('你都复制了些什么呀，转载要记得加上出处哦', 5000);
});

$.ajax({
    cache: true,
    url: "path/to/waifu-tips.json",
    dataType: "json",
    success: function (result){
        $.each(result.mouseover, function (index, tips){
            $(document).on("mouseover", tips.selector, function (){
                var text = tips.text;
                if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1];
                text = text.render({text: $(this).text()});
                showMessage(text, 3000);
            });
        });
        $.each(result.click, function (index, tips){
            $(document).on("click", tips.selector, function (){
                var text = tips.text;
                if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1];
                text = text.render({text: $(this).text()});
                showMessage(text, 3000);
            });
        });
    }
});

(function (){
    var text;
    if(document.referrer !== ''){
        var referrer = document.createElement('a');
        referrer.href = document.referrer;
        text = 'Hello! 来自 <span style="color:#0099cc;">' + referrer.hostname + '</span> 的朋友';
        var domain = referrer.hostname.split('.')[1];
        if (domain == 'baidu') {
            text = 'Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&wd=')[1].split('&')[0] + '</span> 找到的我吗？';
        }else if (domain == 'so') {
            text = 'Hello! 来自 360搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&q=')[1].split('&')[0] + '</span> 找到的我吗？';
        }else if (domain == 'google') {
            text = 'Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
        }
    }else {
        if (window.location.href == 'https://imjad.cn/') { //如果是主页
            var now = (new Date()).getHours();
            if (now > 23 || now <= 5) {
                text = '你是夜猫子呀？这么晚还不睡觉，明天起的来嘛';
            } else if (now > 5 && now <= 7) {
                text = '早上好！一日之计在于晨，美好的一天就要开始了';
            } else if (now > 7 && now <= 11) {
                text = '上午好！工作顺利嘛，不要久坐，多起来走动走动哦！';
            } else if (now > 11 && now <= 14) {
                text = '中午了，工作了一个上午，现在是午餐时间！';
            } else if (now > 14 && now <= 17) {
                text = '午后很容易犯困呢，今天的运动目标完成了吗？';
            } else if (now > 17 && now <= 19) {
                text = '傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~';
            } else if (now > 19 && now <= 21) {
                text = '晚上好，今天过得怎么样？';
            } else if (now > 21 && now <= 23) {
                text = '已经这么晚了呀，早点休息吧，晚安~';
            } else {
                text = '嗨~ 快来逗我玩吧！';
            }
        }else {
            text = '欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
        }
    }
    showMessage(text, 6000);
})();

window.setInterval(showHitokoto,30000);

function showHitokoto(){
    $.getJSON('https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=28&encode=json',function(result){
        showMessage(result.hitokoto, 5000);
    });
}

function showMessage(text, timeout){
    if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1];
    console.log(text);
    $('.waifu-tips').stop();
    $('.waifu-tips').html(text).fadeTo(200, 1);
    if (timeout === null) timeout = 5000;
    hideMessage(timeout);
}
function hideMessage(timeout){
    $('.waifu-tips').stop().css('opacity',1);
    if (timeout === null) timeout = 5000;
    $('.waifu-tips').delay(timeout).fadeTo(200, 0);
}

文本

将以下内容保存为waifu-tips.json，放至相应目录

{
    "mouseover": [
        {
            "selector": ".container a[href^='http']",
            "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么？"]
        },
        {
            "selector": ".fui-home",
            "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦"]
        },
        {
            "selector": "#tor_show",
            "text": ["翻页比较麻烦吗，点击可以显示这篇文章的目录呢"]
        },
        {
            "selector": "#comment_go,.fui-chat",
            "text": ["想要去评论些什么吗？"]
        },
        {
            "selector": "#night_mode",
            "text": ["深夜时要爱护眼睛呀"]
        },
        {
            "selector": "#qrcode",
            "text": ["手机扫一下就能继续看，很方便呢"]
        },
        {
            "selector": ".comment_reply",
            "text": ["要吐槽些什么呢"]
        },
        {
            "selector": "#back-to-top",
            "text": ["回到开始的地方吧"]
        },
        {
            "selector": "#author",
            "text": ["该怎么称呼你呢"]
        },
        {
            "selector": "#mail",
            "text": ["留下你的邮箱，不然就是无头像人士了"]
        },
        {
            "selector": "#url",
            "text": ["你的家在哪里呢，好让我去参观参观"]
        },
        {
            "selector": "#textarea",
            "text": ["认真填写哦，垃圾评论是禁止事项"]
        },
        {
            "selector": ".OwO-logo",
            "text": ["要插入一个表情吗"]
        },
        {
            "selector": "#csubmit",
            "text": ["要[提交]^(Commit)了吗，首次评论需要审核，请耐心等待~"]
        },
        {
            "selector": ".ImageBox",
            "text": ["点击图片可以放大呢"]
        },
        {
            "selector": "input[name=s]",
            "text": ["找不到想看的内容？搜索看看吧"]
        },
        {
            "selector": ".previous",
            "text": ["去上一页看看吧"]
        },
        {
            "selector": ".next",
            "text": ["去下一页看看吧"]
        },
        {
            "selector": ".dropdown-toggle",
            "text": ["这里是菜单"]
        },
        {
            "selector": "c-player a.play-icon",
            "text": ["想要听点音乐吗"]
        },
        {
            "selector": "c-player div.time",
            "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"]
        },
        {
            "selector": "c-player div.volume",
            "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"]
        },
        {
            "selector": "c-player div.list-button",
            "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"]
        },
        {
            "selector": "c-player div.lyric-button",
            "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"]
        },
        {
            "selector": ".waifu #live2d",
            "text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"]
        }
    ],
    "click": [
        {
            "selector": ".waifu #live2d",
            "text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
        }
    ]
}

引入js

 <div class="waifu">
    <div class="waifu-tips"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>

在footer.php中加入以下内容：

<script async src="path/to/waifu-tips.js"></script>
<script src="path/to/live2d.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "path/to/model.json");
</script>

上一篇文章提到的model.json修改为以下内容
其中hit_areas_custom字段的head_x和body_x定义了头部和身体的HIT_AREA的左上角的坐标，head_y和body_y定义了右下角的坐标

坐标可通过启用DEBUG_MOUSE_LOG获取
源码+声音
已下是可选择内容 修改你的人物.json
这里给的只是某个贴图的格式:

{
    "version":"1.0.0",
    "model":"model.moc",
    "textures":[
        "textures/default-costume.png"
    ],
    "layout":{
        "center_x":0.0,
        "center_y":-0.05,
        "width":2.0
    },
    "hit_areas_custom":{
        "head_x":[-0.35, 0.6],
        "head_y":[0.19, -0.2],
        "body_x":[-0.3, -0.25],
        "body_y":[0.3, -0.9]
    },
    "motions":{
        "idle":[
            {"file":"motions/WakeUp.mtn"},
            {"file":"motions/Breath1.mtn"},
            {"file":"motions/Breath2.mtn"},
            {"file":"motions/Breath3.mtn"},
            {"file":"motions/Breath5.mtn"},
            {"file":"motions/Breath7.mtn"},
            {"file":"motions/Breath8.mtn"}
        ],
        "sleepy":[
            {"file":"motions/Sleeping.mtn"}
        ],
        "flick_head":[
            {"file":"motions/Touch Dere1.mtn"},
            {"file":"motions/Touch Dere2.mtn"},
            {"file":"motions/Touch Dere3.mtn"},
            {"file":"motions/Touch Dere4.mtn"},
            {"file":"motions/Touch Dere5.mtn"},
            {"file":"motions/Touch Dere6.mtn"}
        ],
        "tap_body":[
            {"file":"motions/Touch1.mtn"},
            {"file":"motions/Touch2.mtn"},
            {"file":"motions/Touch3.mtn"},
            {"file":"motions/Touch4.mtn"},
            {"file":"motions/Touch5.mtn"},
            {"file":"motions/Touch6.mtn"}
        ],
        "":[
            {"file":"motions/Breath1.mtn"},
            {"file":"motions/Breath2.mtn"},
            {"file":"motions/Breath3.mtn"},
            {"file":"motions/Breath4.mtn"},
            {"file":"motions/Breath5.mtn"},
            {"file":"motions/Breath6.mtn"},
            {"file":"motions/Breath7.mtn"},
            {"file":"motions/Breath8.mtn"},
            {"file":"motions/Fail.mtn"},
            {"file":"motions/Sleeping.mtn"},
            {"file":"motions/Success.mtn"},
            {"file":"motions/Sukebei1.mtn"},
            {"file":"motions/Sukebei2.mtn"},
            {"file":"motions/Sukebei3.mtn"},
            {"file":"motions/Touch Dere1.mtn"},
            {"file":"motions/Touch Dere2.mtn"},
            {"file":"motions/Touch Dere3.mtn"},
            {"file":"motions/Touch Dere4.mtn"},
            {"file":"motions/Touch Dere5.mtn"},
            {"file":"motions/Touch Dere6.mtn"},
            {"file":"motions/Touch1.mtn"},
            {"file":"motions/Touch2.mtn"},
            {"file":"motions/Touch3.mtn"},
            {"file":"motions/Touch4.mtn"},
            {"file":"motions/Touch5.mtn"},
            {"file":"motions/Touch6.mtn"},
            {"file":"motions/WakeUp.mtn"}
        ],
        "tap_body":
        [
            { "file":"motions/Touch Dere3.mtn" , "sound":"sounds/1.mp3"},
            { "file":"motions/Touch1.mtn" , "sound":"sounds/3.mp3"},
            { "file":"motions/Touch2.mtn" , "sound":"sounds/4.mp3"}
        ],
        "pinch_in":
        [
            { "file":"motions/Breath3.mtn", "sound":"sounds/9.mp3" }
        ],
        "pinch_out":
        [
            { "file":"motions/Breath5.mtn", "sound":"sounds/8.mp3" }
        ],
        "shake":
        [
            { "file":"motions/Breath7.mtn", "sound":"sounds/6.mp3","fade_in":500 }
        ],
        "flick_head":
        [
            { "file":"motions/Breath8.mtn", "sound":"sounds/3.mp3" }
        ]
    }
}

上面的mtn动作以及 sounds可以选择添加 这样可以在人物里面添加动作同步声音 增加看板娘萌度！ 其中motions的idle组是放置时的动作，按照次序依次显示，可以在这里添加更多的动作
layout的center_x字段和center_y字段用于偏移显示模型，日后若有显示错位可以修改此处的值

增加样式:

把如下源码写成css再调用或者直接插入style.css里再调用都可以

.waifu {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 0;
    transition: all .3s ease-in-out;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
.waifu:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
@media (max-width: 768px) {
    .waifu {
        display: none;
    }
}
.waifu-tips {
    opacity: 0;
    width: 250px;
    height: 70px;
    margin: -20px 20px;
    padding: 5px 10px;
    border: 1px solid rgba(224, 186, 140, 0.62);
    border-radius: 12px;
    background-color: rgba(236, 217, 188, 0.5);
    box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    animation-delay: 5s;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-name: shake;
    animation-timing-function: ease-in-out;
}
.waifu #live2d{
    position: relative;
}

@keyframes shake {
    2% {
        transform: translate(0.5px, -1.5px) rotate(-0.5deg);
    }

    4% {
        transform: translate(0.5px, 1.5px) rotate(1.5deg);
    }

    6% {
        transform: translate(1.5px, 1.5px) rotate(1.5deg);
    }

    8% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
    }

    10% {
        transform: translate(0.5px, 2.5px) rotate(0.5deg);
    }

    12% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg);
    }

    14% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg);
    }

    16% {
        transform: translate(-1.5px, -0.5px) rotate(1.5deg);
    }

    18% {
        transform: translate(0.5px, 0.5px) rotate(1.5deg);
    }

    20% {
        transform: translate(2.5px, 2.5px) rotate(1.5deg);
    }

    22% {
        transform: translate(0.5px, -1.5px) rotate(1.5deg);
    }

    24% {
        transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
    }

    26% {
        transform: translate(1.5px, 0.5px) rotate(1.5deg);
    }

    28% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }

    30% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
    }

    32% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    34% {
        transform: translate(2.5px, 2.5px) rotate(-0.5deg);
    }

    36% {
        transform: translate(0.5px, -1.5px) rotate(0.5deg);
    }

    38% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
    }

    40% {
        transform: translate(-0.5px, 2.5px) rotate(0.5deg);
    }

    42% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
    }

    44% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    46% {
        transform: translate(1.5px, -0.5px) rotate(-0.5deg);
    }

    48% {
        transform: translate(2.5px, -0.5px) rotate(0.5deg);
    }

    50% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    52% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg);
    }

    54% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg);
    }

    56% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
    }

    58% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
    }

    60% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    62% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }

    64% {
        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
    }

    66% {
        transform: translate(0.5px, 2.5px) rotate(1.5deg);
    }

    68% {
        transform: translate(2.5px, -1.5px) rotate(1.5deg);
    }

    70% {
        transform: translate(2.5px, 2.5px) rotate(0.5deg);
    }

    72% {
        transform: translate(-0.5px, -1.5px) rotate(1.5deg);
    }

    74% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
    }

    76% {
        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
    }

    78% {
        transform: translate(-1.5px, 2.5px) rotate(0.5deg);
    }

    80% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
    }

    82% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
    }

    84% {
        transform: translate(-0.5px, 0.5px) rotate(1.5deg);
    }

    86% {
        transform: translate(2.5px, 1.5px) rotate(0.5deg);
    }

    88% {
        transform: translate(-1.5px, 0.5px) rotate(1.5deg);
    }

    90% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
    }

    92% {
        transform: translate(-1.5px, -1.5px) rotate(1.5deg);
    }

    94% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }

    96% {
        transform: translate(2.5px, -0.5px) rotate(-0.5deg);
    }

    98% {
        transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
    }

    0%, 100% {
        transform: translate(0, 0) rotate(0);
    }
}

如果单独写成css的 你就在header.php里面加上

注意 本文章大部分源码都不可以直接使用 要修改对应位置

<link rel="stylesheet" href="https://www.ohyhello.com/live2d/live2d.css" type="text/css"/>

如一切正常，刷新网页后，可爱的Pio就会出现在页面左下角，点击会播放不同的动作并有相应提示文字
结语：
按照以上步骤的话你的博客大概已经出现了卡哇伊的看板娘了
注意检查细节特别是waifu-tips.js里面有调用一个json注意别写错路径了

参考&相关连接

hexo-helper-live2d
live2d_src
修改模型@猫与向日葵
部分内容转载@猫与向日葵
live2d
什么是live2d Live2D Viewer –
Live2D Cubism 2
中文說明書 药水制作师
Unity Studio UABE
本文部分内容转载至：
百度百科
猫与向日葵的博客
360百科
感谢