1. 首页
  2. 网络干货

[教程]网页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:

  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/7218.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

1月18日公告:为了优化速度,移除用户中心,增加了移动长宽教育网专线访问路线

作者:月宅

介绍:今天也要看我装逼吗?

文章:2376篇

博客:https://ikmoe.com/
最后更新:18-01-05

31 条评论

gravatar

  1. 未来 1
    待转正用户

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

    #倒数31楼
    Google Chrome 53.0.2785.104unknow
    回复
    月宅最帅最萌最装逼!