网络干货 ·

[教程]网页live2D技术虚拟小人-懒人版WordPress/typecho/emlog/Z-Blog


月宅说

挺多人在自己博客、网页界面上调用这样的一个小人物,这项技术被命名为live2D可交互性动画角色,目前普遍运用在动态壁纸、游戏、桌面挂件上,如今已经被运用到了网页上了。不少人在问月宅如何实现的?是插件么,不,这不是。接下来 月宅教你实现它。

其实我的友链中有不少人已经出了教程,也告诉过别人了。但这不是长久之计,每人都来问,我都要复制断手了。接下来是月宅风格的教程。 :阿鲁12:

跪着再提一点!求求你们订阅我的博客吧,不要再用RSS了QAQ :阿鲁10:


教程须知

适用于所有网页程序、博客程序、单页html、php,由于太简单了,月宅就没必要制作成WordPress插件发布了。下面的文件、代码所有权均为原作所有-0- 修改版为月宅所有。


一-加载CSS

两种解决办法:

  • 1.直接在头部引用css路径
  • 2.将live2d.css内的所有CSS代码复制进主题的全局style.css文件中(推荐)
<link rel='stylesheet' href='https://ikmoe.com/live2d.css' type='text/css'/>

二-加载JS

复制到你的footer.php中,或者主题设置中,这里的地址替换为你自己的。

<script type="text/javascript" src="https://ikmoe.com/live2d.js"></script>

三-加载人物

将以下代码放入你想放的地方,推荐footer.php

<script type="text/javascript">
    loadlive2d("live2d", "https://ikmoe.com/live2d/model/tia/model.json"); 写上自己域名的绝对路径
</script>

四-显示人物

放在哪,就在哪显示,

<div id="landlord">
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>

放在侧边栏,就在有侧边栏的地方加载,放在footer就在全局加载。


五-修改人物

里面啥东西,月宅已经为你打包做好了,只需要上传图片与model.moc文件就OK了,懒人必备。PS:文件里面用的是月宅酱的月娘,务必替换掉

以chitose模型为例子,这里texture_00.png文件重命名为default-costume.png

\live2d总文件\模型\chitose\moc\chitose.2048\texture_00.png

这里的chitose.moc重命名为model.moc

\live2d总文件\模型\chitose\moc\chitose.moc

将重命名后的文件依次上传到

\live2d总文件\加载文件\model\tia\textures\default-costume.png
\live2d总文件\加载文件\model\tia\model.moc

然后刷新一下你就能看见你新加的人物啦!人物是PNG格式可以在PS里面自己修改,但不要随便移动原来的位置。另外更多模型你可以到live2d官方网站与live2d贴吧下载资源,或者自行提取。


六-显示范围修改

这里的width与height控制显示范围。与CSS文件中的#landlord标签下 width: 280px;height: 250px;修改为一致。这是用来解决不同人物的显示范围不一样,导致别的人物太高只显示半个身子。

 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>

总计

目前月宅已经打包,分为以下三个文件夹:

  • 1.js-css文件
  • 2.加载文件
  • 3.模型文件
  • 1.首先你需要根据教程一、二来加载js与css
  • 2.接着将加载文件中的model文件夹上传到你自己想放的地方,用教程三来加载它。
  • 3.教程4用来显示这个人物
  • 4.剩下的自己重命名模型覆盖就OK,接着修改下CSS来显示出整个人物

解压密码ikmoe

下载地址:https://pan.baidu.com/s/1i5xS5Id


其他

祝你们成功,可以拥有属于自己的网页live2D。感谢以下用户提供本文教程支持。@后宫学长@猫与向日葵@幻想帖

如果看不懂月宅风的,你可以去看以上小伙伴的教程。目前月宅是最简化来完成。

:阿鲁11:

参与评论

  • 像晚约

    签到成功!be86172cdd8fc6cc633871815cd9ac6b签到时间:下午7:07:08每日打卡,生活更精彩哦~

    10月前 (01-20)
    回复
    回复像晚约
  • d51963c49f8bdab39724f05d02f5daef

    be86172cdd8fc6cc633871815cd9ac6b

    10月前 (01-20)
    回复
  • 未来

    签到成功!签到时间:下午9:26:27每日打卡,生活更精彩哦~

    10月前 (01-19)
    回复
    回复未来
  • 18G

    签到成功!签到时间:下午1:47:26每日打卡,生活更精彩哦~

    10月前 (01-14)
    回复
    回复18G
  • Qa

    邮件订阅哪有RSS方便 :黄色滑稽脸:

    10月前 (01-06)
    回复
    回复Qa
  • 情醉中国风

    傲游浏览器RSS阅读器订阅的 :黄色滑稽脸:

    10月前 (01-05)
    回复
  • summerlemon

    谢谢啦~我就是懒人,准备要把这些教程里的代码带走啦~

    10月前 (01-05)
    回复
    回复summerlemon
  • 月宅

    :阿鲁8: 好哒

    10月前 (01-05)
    回复
    回复月宅
  • littleplus

    看起来懒人们需要一个插件 :黄色滑稽脸:

    10月前 (01-05)
    回复
    回复littleplus
  • 月宅

    :黄色滑稽脸: 交给你了,上吧!

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    不是消失了。。被判定为垃圾评论,自动删了,我刚刚才看见回收站2333

    10月前 (01-05)
    回复
    回复月宅
  • ha

    之前的回复消失了 :贴吧表情6:

    这个正字厉害了,真的无话可说 :贴吧表情4:

    10月前 (01-05)
    回复
    回复ha
  • 后宫学长

    快黑化了的感觉。 :瞧你那傻样:

    10月前 (01-04)
    回复
    回复后宫学长
  • 月宅

    参考别人的教程与小人,会说话会娇喘还会雅蠛蝶 :黄色滑稽脸:

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    :黄色滑稽脸: 不就是想要插件吗滑稽

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    有个33还是22的,更好看 :阿鲁8:

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    :黄色滑稽脸: 他的在贴吧有下

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    :阿鲁8: 可以去看看其他人的教程,更棒

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    :阿鲁5: 你才没有订阅我

    10月前 (01-05)
    回复
    回复月宅
  • 月宅

    其实完全是为了方便

    10月前 (01-05)
    回复
    回复月宅