二次元live2d看板娘小人物效果在web前端技术的运用
不少人对这个 Live2D 看板娘小人物很感兴趣呢!纷纷让我写文章,而学长也是懒癌晚期,一直拖到现在 ~
好了,还是准备开始我们的教程吧!
俗话说:“授人以鱼不如授人以渔”,但是说这个“渔”比较难教,还是给条“鱼”你完事了比较实在。
效果预览
准备工作
首先得获取(https://pan.baidu.com/s/1N4ZJUJYbcQqQGCXz1M9p6g) ,下载整理后的 Live2D 代码,毕竟整理好的方便下手 ~
下载后解压代码到你的博客网站根目录去。(目录位置可以自定义)
正式开工
在你博客程序头部文件(header)引入界面样式,在 head 标签内插入如下代码:
<link rel="stylesheet" href="/live2d/css/live2d.css" />
在 body 标签内合适的位置插入 Live2D 看板娘小人物的元素,按照 Html 书写规范写 ~
<div id="landlord" style="left: -13px; bottom: 94px; display: block;"> <div class="message" style="opacity: 1;">隐藏伊斯特瓦尔,希望隐藏后我们还能再见面!</div> <canvas id="live2d" width="500" height="560" class="live2d"></canvas> <div class="live_ico_box"> <div class="live_ico_item type_youdu" id="youduButton" data-type=""></div> <div class="live_ico_item type_quit" id="hideButton"></div> </div> </div> <div id="open_live2d" style="display: none;">召唤伊斯特瓦尔</div>
在你博客程序页脚文件(footer)引入脚本,在 body 标签结束前插入如下代码:
<script type="text/javascript"> var message_Path = '../'; var model_Path = '/live2d/model/'; var model_textures = ["texture_00.png","texture_01.png","texture_02.png"]; // 贴图数组 var home_Path = '//www.yaohuanet.com'; // 此处修改为你的域名,必须带斜杠 var talkAPI = ""; /script> <script type="text/javascript" src='/live2d/js/live2d.js'></script> <script type="text/javascript" src='/live2d/js/message.js'></script>
鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。
**示例:**
{ "mouseover": [ { "selector": ".title a", //此处修改为你页面元素的标签名 "text": ["要看看 {text} 么?"] //此处修改为你需要提示的文字 }, { "selector": "#searchbox", "text": ["在找什么东西呢,需要帮忙吗?"] } ], "click": [ //此处是 Live2D 看板娘的触摸事件提示 { "selector": "#landlord #live2d", "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"] } ] }
然后,刷新你的博客页面,看看效果吧!
注意路径别弄错了噢 ~
PHP 程序推荐使用主题函数获取绝对路径。
**问:“为什么这个 Live2D 没有换装功能哎?”**
**答:“自己研究去。”**
~~其实,就是动态改变 model.json 内的服装字段,达到随机服装的效果……~~
模型说明
Live2D 并不是一种先进的技术,它产生的效果,都是用基本的平移、旋转、透明、曲面变形等操作实现的。
最终的效果与贴图关系很大,而每一个动作,都需要制作师的精细调整。
这是一个需要消耗大量时间精力的过程,因此质量好的模型并不多,质量好的也一般是在游戏中,版权受到保护,**不能随意使用**。
好了,教程先说到这吧,需要本小人物的扫毛支付后添加微信hp14718获取提取码,免费帮安装制作一次。
文章评论