随便说些什么

如何给自己的博客添加一个萌萌的看板娘!live2d

序章:

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_xbody_x定义了头部和身体的HIT_AREA的左上角的坐标,head_ybody_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可以选择添加 这样可以在人物里面添加动作同步声音 增加看板娘萌度! 其中motionsidle组是放置时的动作,按照次序依次显示,可以在这里添加更多的动作
layoutcenter_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百科
感谢

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

  1. blinded灬lolik blinded灬lolik
    Chrome 62 10

    哇,和次元的看板娘一个人诶!话说...报警什么的就算了吧!!

    1. JiuMeng JiuMeng
      Chrome 55 10

      emmmm.......

  2. Chrome 63 7

    emm,纯萌新表示一脸懵逼

  3. yoki yoki
    Chrome 63 7

    emm,纯萌新表示一脸懵逼

    1. JiuMeng JiuMeng
      Chrome 55 10

      qaq

  4. 友链博客 友链博客
    Chrome 63 7

    好好玩的样子,可惜我看不懂╮(╯▽╰)╭

  5. 秋霜烈日 秋霜烈日
    Chrome 62 10

    找好久方法了...某度上基于webgl实现live2d真是一脸懵逼...谢谢博主OωO

    1. JiuMeng JiuMeng
      Chrome 55 10

      谢谢支持 cdn加速图片出bug了 正在修复 不影响体验吧

      1. 秋霜烈日 秋霜烈日
        Chrome 62 10

        图片bug倒是没有...看板娘头上会出现两个消息窗口算吗...刚发现回复窗口没有表情按钮xD

        1. JiuMeng JiuMeng
          Chrome 55 10

          这个是缓存问题 到时候刷新就没事了

  6. kira kira
    Chrome 64 7

    还真是麻烦 ̄﹃ ̄

    1. JiuMeng JiuMeng
      Chrome 55 10

      是我的教程写的太详细了吗! QAQ 扎心了!

      1. kira kira
        Chrome 64 7

        不听不听,和尚念经(话说我回复怎么没有表情选项呢?)

        1. JiuMeng JiuMeng
          Chrome 55 10

          表情选项我插最上面了 只有天才才能看见

      2. kira kira
        Chrome 64 7

        评论区头像画质是有问题的

        1. JiuMeng JiuMeng
          Chrome 45 10

          = = 好像有吧

          1. kira kira
            Chrome 64 7

            可能是撸多了?(咦)

          2. JiuMeng JiuMeng
            Chrome 45 10

            这个页面带着特殊能力 可以显示两个输入框!

          3. JiuMeng JiuMeng
            Chrome 45 10

            ↑对话框

          4. kira kira
            Chrome 64 7

            是呀,你的看板娘的对话框也是两个

  7. hk hk
    Firefox 58 10

    没有下载地址啊 大佬

    1. JiuMeng JiuMeng
      Chrome 55 10

      文章里面有的 你仔细看看

  8. strugglexiang strugglexiang
    Chrome 62 7

    过阵子自己搭个博客看看!就是不知道小人的大小怎么调

  9. Firefox 42 XP

    所以。。。怎么调用并加载显示?

    1. JiuMeng JiuMeng
      Chrome 55 10

      文章里面是有的!
      还有问题的话
      qq 1160614401

  10. ylfx ylfx
    Firefox 42 XP

    所以,,如何调用和显示啊(纯萌新。。)

    1. JiuMeng JiuMeng
      Chrome 55 10

      我不是给你了联系方式嘛你找我我详细跟你解释

      1. 1 1
        Firefox 42 XP

        吼的dalao

  11. 1 1
    Firefox 52 XP

    萌新求教SDK怎么用呀x

    1. JiuMeng JiuMeng
      email内嵌 N

      你是哪里看不大懂

      1. 1 1
        Firefox 52 XP

        接下来是准备SDK 为了效率最大化,为了不重复造轮子,为了社会主义的发展 我们这里直接调用而是用@EYHN大佬封装好的库来加载并显示模型。
        相比较官方版本而言,仅需一条命令即可进行模型的加载,无疑方便许多。而且官方的sdk还附加背景以及其他之类的 我们这里博客不需要 当然如果你需要的话可以自己去使用官方的sdk!
        是这句话呢

        1. JiuMeng JiuMeng
          Mi N

          https://github.com/EYHN/hexo-helper-live2d
          我这里没有用官方的SDK这个是大佬的SDK因为博客不需要背景

          1. 1 1
            Firefox 52 XP

            那咱现在SDK已经封装好了,怎么弄到网页去呢()

          2. JiuMeng JiuMeng
            email内嵌 N

            你是不是不会调用css和js

        2. JiuMeng JiuMeng
          email内嵌 N

          准备好SDK吧博客里的css js 放到对应位置然后调用模型最后调用js和css就行

  12. 冰魂 冰魂
    Chrome 63 10

    还是不会的说,话说论坛支持live2d吗?

    1. ohyhello ohyhello
      Safari 9

      这个是html css js php的说
      换句话来说就是支持任何网站
      你找个时间qq联系我好嘛

  13. 染
    2345 7

    能不能请大佬做个实例发出来参考呢,滑稽 ̄﹃ ̄

    1. JiuMeng JiuMeng
      Chrome 68 10

      你用其他联系方式找我吧 我觉得 你看不懂文章 我写demo(例子) 也没用

  14. 染
    2345 7

    终于在实例的帮助下完成了live2d ̄﹃ ̄,还有。。我的评论呢。。。收到邮件秒过来的我Σ(っ °Д °;)っ

  15. Chrome 45 10

    如何取消live2d呢,在hexo搭建的博客中,这个看板挡住评论区了,在配置中设置成false也没能取消掉

    1. JiuMeng JiuMeng
      Mi O

      把插入的live2d相关标签删掉

  16. 能把和泉的发给我邮箱吗大佬OωO

    1. JiuMeng JiuMeng
      Chrome 68 10

      好久之前的东西了 我找不到了!抱歉啊

      1. 没关系了,我找到了OωO

  17. Chrome 69 10

    如果不是hexo框架的博客就不能用这个咯?⌇●﹏●⌇

    1. JiuMeng JiuMeng
      Chrome 71 10

      都可以

This is just a placeholder img.