banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

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

Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解`

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

日期:2017-12-24 阿珏 折腾代码 浏览:10584 次 评论:43 条

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

前言 #

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

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

准备工作 #

俗话虽说:“授人以鱼不如授人以渔”, 但是由于这鱼比较难钓,我们还是乖乖搬个小板凳坐吃鱼群众吧!
以下代码是我 光明正大 后宫学长 那偷过来的鱼加以烹饪而成。

先到我的 Github 去下载我再次整理过后的live 2D的代码( 包含两人的动作和初始的三套贴图 ),毕竟还是煮熟的好吃点~

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

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

食用方法 #

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

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


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

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

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


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


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


成品效果欣赏 #

Pio
image

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


结语 #

关于如何进行换装play 请参考原作者( 猫和向日葵 )的这篇文章《 给博客添加能动的看板娘(Live2D)-关于模型的二三事
请注意本文中出现的 “药水制作师”、“Potion Maker”字样及应用内包含的文本、模型、图片、动作数据等所有权均属于 “药水制作师”作者 Sinsiroad,仅供研究学习,不得用于商业用途 image

网友评论:

image 路人甲 7 个月前 (2020-09-03)
真优秀

image 6666666 9 个月前 (2020-07-24)
我想用站长现成的看板娘,可以打包分享吗 [# 得意]

image 锟斤拷锟斤拷. 1 年前 (2020-01-23)
真实的回到分为负二负一

image 阿珏 1 年前 (2020-01-24)
@锟斤拷锟斤拷.:对方不是很懂你的意思,于是送了你个帽子 [#aru_136]

image ICON 1 年前 (2019-11-23)
第一个紫色图标里面一个 v 的是个啥软件哦 [#aru_21]

image 阿珏 1 年前 (2019-11-23)
@ICON:查看模型使用的是 LIVE2D 官方提供的 Live2D Viewer

image 龗尧 2 年前 (2019-04-18)
追问
留的 ip 地址、然后
看板娘显示不出来
这是为什么呢?

image 阿珏 2 年前 (2019-04-19)
@龗尧:听不懂

image 龗尧 2 年前 (2019-04-21)
@阿珏:啊... 您好这是我的博客:http://www.zhangyyao.com/
具体讲起来确实感觉很难表达
您可以点进去看一看
麻烦了(捂脸)

还有可以长期保持联系么?(我怕我问着问着就不回复我了)

image 阿珏 2 年前 (2019-04-22)
@龗尧:很正常啊 ,不用看啊 ,想保持长期联系可以加群,群号自己找 [#wb_doge]

image 龗尧 2 年前 (2019-04-18)
"合适的页面位置插入 live2D 元素" 底下这行代码是放到 footer.php 里面吗?
顺便求看板娘换装(星星眼恳切)

image 阿珏 2 年前 (2019-04-19)
@龗尧:都行,换装你去我友链里 FGHRSH 博客里去找新版的

image 苏哲 2 年前 (2019-02-15)
是不是跟知更鸟主题有冲突,加了之后网站文章的图片 就不显示了

image 阿珏 2 年前 (2019-02-16)
@苏哲:那可能就是有些地方有冲突了,具体哪里这就很难讲

image QQ 账号错误 2 年前 (2019-01-06)
皮肤给一下呗
mynamezhf@gmail.com谢谢啦

image wa 2 年前 (2018-11-11)
大佬你好根据这个 还有 广树 typecho 插件和 imjad.cn 大佬的血小板

集成了一个https://github.com/samondlee/typecho_Live2dHistoire1/tree/master/Live2dHistoire

但是发现不能像你的一样 截图、换装 也不能像猫与向日葵大佬 的血小板一样蹦蹦跳跳为啥呀呜呜呜

明明动画都加载了

image 阿珏 2 年前 (2018-11-12)
@wa:不能蹦跶可能是动作文件有问题吧,截图换装不能那应该是 js 文件出问题了。具体的我也不是很清楚,用现成的多好啊。哈哈

image 失去才会珍惜 2 年前 (2018-11-07)
## 这篇评论是私密评论 ##

image 阿珏 2 年前 (2018-11-08)
@失去才会珍惜:去 17 素材网可以搜索到

image Į 2 年前 (2018-09-01)
能不能给普通的网页加上看板娘呢 [#aru_1]

image Į 2 年前 (2018-09-01)
@Į:而且我这文字是出来了 就是动画模型一直出不来

image 阿珏 2 年前 (2018-09-01)
@Į:理论都是可以的,只要不冲突

image 晨熙 2 年前 (2018-08-24)
表白墙可以放这个吗??

image 阿珏 2 年前 (2018-08-24)
@晨熙:理论都可以的

image 交际猫 2 年前 (2018-07-20)
代码无法复制 233 [#aru_113]

image 牧羊 2 年前 (2018-07-14)
复制不了那些代码,还有想要贵站的换装,谢谢了

image 易小独 2 年前 (2018-07-09)
为了那到那些框框代码 我把开发者弄出来 结果电脑死了半小时 [#aru_15]

image 阿珏 2 年前 (2018-07-09)
@易小独:真是灰常抱歉了,你可以来找我给你的

image 牧羊 2 年前 (2018-07-14)
@阿珏:我要

image 刘德华 2 年前 (2018-07-19)
@易小独:chrome 里禁用断点就好啦~[#(哈哈)]

image 阿珏 2 年前 (2018-07-19)
@刘德华:别说出来,嘘~

image 杨小杰博客 2 年前 (2018-05-10)
这姑娘 6

image 阿珏 2 年前 (2018-05-11)
@杨小杰博客:你喜欢就好

image henry 2 年前 (2018-05-10)
## 这篇评论是私密评论 ##

image henry 2 年前 (2018-05-10)
[#aru_42] 其他网站程序可以添加嘛。例如我这个。

image 阿珏 2 年前 (2018-05-11)
@henry:理论上都可以的

image 冷梦丶 2 年前 (2018-04-08)
[#aru_18] 你这个板娘的分不分享呀~[#aru_91]

image 星星 2 年前 (2018-03-30)
求皮肤 谢谢 [#aru_1]

image 星星 3 年前 (2018-03-30)
求皮肤 谢谢 [#aru_1]

image inpm 3 年前 (2018-03-13)
+1 求皮肤
inpm.cy@gmail.com

image pony 4 年前 (2018-01-28)
= =,想要贵站的刷新换衣服的方法。

image 阿珏 4 年前 (2018-01-31)
@pony:网址或 qq 都不愿意留下,你想我怎么给你?

image ′千玄 4 年前 (2018-02-22)
@阿珏:换衣服这个细节还没注意,厉害了~

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。