给你的博客加上个Live2D看板娘吧

前段时间,在不少人博客看到这个 Live2D 看板娘,颇感兴趣!就查阅了点相关教程为自个博客也添加上了

前言

live2d并不是一种先进的技术,它产生的效果,都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大,而每一个动作,都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程,因此质量好的模型并不多,质量好的也一般是在游戏中,版权受到保护,不能随意使用。

本文章中所用模型解包自药水制作师手机游戏,版权归该官方所有。(没错,我也是来安利这款游戏的)

准备工作

俗话虽说:“授人以鱼不如授人以渔”,但是由于这鱼比较难钓,我们还是乖乖搬个小板凳坐吃鱼群众吧! 以下代码是我光明正大从后宫学长那偷过来的鱼加以烹饪而成。 先到我的 Github 去下载我再次整理过后的live 2D的代码(包含两人的动作和初始的三套贴图),毕竟还是煮熟的好吃点~

下载后解压代码到你的博客网站根目录去。(目录位置可以自定义)

然后把解压出来的文件夹改名为:live2d 。(叫啥无所谓,好看最重要) (少女盲目分析中)

食用方法

然后就教大家怎么吃吧,呸,还真吃起来了

在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码:

<link rel="stylesheet" href="/live2d/css/live2d.css" />

在你博客程序页脚文件(footer.php)引入脚本,在 body 标签结束前插入如下代码:

<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://www.52ecy.cn/'  
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>

以上代码在使用绝对路径时要注意一个问题: 像我博客 www.52ecy.cn 和 52ecy.cn 都可以进行访问,但是如果在引用的时候使用了www,访问www.52ecy.cn的时候是没有问题,但在直接访问52ecy.cn的时候,会因为跨域问题(子域名不同也属于跨域),导致json无法加载,然后你的看板娘就出不来了。 可以改为以下代码(人物的切换也只需改为相应的文件夹名字即可)

<script type="text/javascript">
    loadlive2d("live2d", "<?php echo 'http://'.$_SERVER['HTTP_HOST'].'/'; ?>live2d/model/Pio/model.json");
</script>

在合适的页面位置插入 Live2D 看板娘的元素,可以放在底部:

<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>

鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。

{
    "mouseover": [
        {
            "selector": ".container a[href^='http']",  //此处修改为你页面元素的标签名
            "text": ["要看看 {text} 么?"]  //此处修改为你需要提示的文字
        },
        {
            "selector": ".navto-search",
            "text": ["在找什么东西呢,需要帮忙吗?"]
        }
    ],
    "click": [  //此处是 Live2D 看板娘的触摸事件提示
        {
            "selector": "#landlord #live2d",
            "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"]
        }
    ]
}

然后,刷新你的博客页面,看看效果吧!

注意路径别弄错了噢 ~ 使用主题函数获取路径其实是很好的。 建议都使用绝对路径进行引用,而不是像列子中的相对路径

成品效果欣赏

Pio

Tia

喵的,万恶的水印你走开! 具体效果你可以调戏一下本博客左下角的Pio(没错,我觉得她更可爱)

结语

关于如何进行换装play 请参考原作者(猫和向日葵)的这篇文章《给博客添加能动的看板娘(Live2D)-关于模型的二三事》

请注意本文中出现的“药水制作师”、“Potion Maker”字样及应用内包含的文本、模型、图片、动作数据等所有权均属于“药水制作师”作者Sinsiroad,仅供研究学习,不得用于商业用途

本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《给你的博客加上个Live2D看板娘吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android通知栏微技巧,那些你所没关注过的小细节

本篇文章首发于我的微信公众号,其实通常情况下我都不会将微信文章再在博客上发表的,因为我认为两者区别比较大。微信文章偏向于短小精炼,毕竟要在手机上阅读,博客文章则...

36480
来自专栏IT派

5月份GitHub上最热门的JavaScript项目

本篇文章为大家盘点了5月份最热门的 JavaScript 项目,一起来看看你都知道哪些,或者有哪些你已经在使用的了。

14520
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1.5K30
来自专栏java工会

前端进阶攻略|最全的前端开源JS框架和库

50770
来自专栏编程

百度指数之图像数字识别(2)

作者介绍: 叶成,数据分析师,就职于易居中国,热爱数据分析和挖掘工作,擅长使用Python倒腾数据。 在开始本位之前,这里先感谢一下本人公司的伟哥和孟哥(虽然孟...

46360
来自专栏小灰灰

cocos2dx-v3.5 2048 (一): 项目架构

前言 ---- 开始学习cocos2dx, 在看完官方的基本文档之后,选择2048游戏作为第一次实战训练,并记下整个开发过程 关于2048的教程和源码很多,即便...

25570
来自专栏前端儿

【转】不同内核浏览器的差异以及浏览器渲染简介

浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(...

24110
来自专栏非著名程序员

网易严选 App 感受 Weex 开发

这一篇来自于网易的前端工程师分享的一篇关于使用 Weex 开发网易严选的文章,内容非常的详细,认真,希望对大家能够有所帮助。 自打出生的那一天起,WEEX就免不...

1.1K90
来自专栏章鱼的慢慢技术路

Unity入门教程(上)

62770
来自专栏葡萄城控件技术团队

【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效...

13920

扫码关注云+社区

领取腾讯云代金券