您现在的位置是:首页 > 学无止境 > 各种折腾各种折腾
给博客增加一个萌萌哒看板娘-基于live2d
2021-07-15 11:59:11各种折腾人已围观
简介给博客增加一个萌萌哒看板娘-基于live2d之前在别的博客上看到了萌萌哒的看板娘,很有意思,就准备自己也增加一个,作为一个不会写程序的人,当然是坚持“拿来主义”,去网
给博客增加一个萌萌哒看板娘-基于live2d
之前在别的博客上看到了萌萌哒的看板娘,很有意思,就准备自己也增加一个,作为一个不会写程序的人,当然是坚持“拿来主义”,去网上找一个就好了。
开始确实踩了很坑,各种问度娘,找相关的博客介绍。最终找了自己能理解的并使用的版本。还有博客美化这种事,只有第一次和无数次,还是适可而止。要不然都把大把时光浪费掉了。
先看图
【版权声明】版权归原著所有,本次只作为分享和记录,如有侵权,请联系陵小宇删除。
程序包下载
原参考与下载地址:https://github.com/fghrsh/live2d_demo
个人打包下载地址:共享地址:http://yun.lingyuyy.com/index.php?share/file&user=1&sid=YCu3DwtA 提取密码:1352
步骤一:复制链接下载相关的文件,并解压。目录文件如下:
demo1-default.html // 经常引用Demo
demo2-autoload.html // autoload.js Demo
demo3-waifu-tips.html // 内置waifu-tips Demo
Assets//资源
autoload.js // 自动异步加载
flat-ui-icons-regular.eot // 平面 UI 字体
flat-ui-icons-regular.svg // 平面 UI 字体
flat-ui-icons-regular.ttf // 平面 UI 字体
flat-ui-icons-regular.woff // 平面 UI 字体
live2d.js // Live2D 核心
waifu-tips.js // Live2D 看板娘扩展
waifu-tips.json // Live2D 看板娘提示语
waifu.css // Live2D 看板娘样式表
waifu.min.css //Live2D 看板娘样式表
步骤二:把相关文件和代码添加到,网页中
实现方式一(常规方式) 1.引入依赖类库和css样式表JQuery (waifu-tips.js)
JQuery UI (仅实现 拖拽效果 需要)
2.代码实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.4 / Demo 1</title>
<!-- waifu.min.css样式 -->
<link rel="stylesheet" type="text/css" href="assets/waifu.min.css"/>
</head>
<body>
<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="assets/jquery.min.js?v=3.3.1"></script>
<!-- 实现拖动效果,需引入 JQuery UI -->
<script src="assets/jquery-ui.min.js?v=1.12.1"></script>
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="assets/waifu-tips.min.js"></script>
<script src="assets/live2d.min.js"></script>
<script type="text/javascript">
/* 可直接修改部分参数 */
live2d_settings['modelId'] = 1; // 默认模型 ID
live2d_settings['modelTexturesId'] = 87; // 默认材质 ID
live2d_settings['modelStorage'] = false; // 不储存模型 ID
live2d_settings['canCloseLive2d'] = false; // 隐藏 关闭看板娘 按钮
live2d_settings['canTurnToHomePage'] = false; // 隐藏 返回首页 按钮
live2d_settings['waifuSize'] = '600x535'; // 看板娘大小
live2d_settings['waifuTipsSize'] = '570x150'; // 提示框大小
live2d_settings['waifuFontSize'] = '30px'; // 提示框字体
live2d_settings['waifuToolFont'] = '36px'; // 工具栏字体
live2d_settings['waifuToolLine'] = '50px'; // 工具栏行高
live2d_settings['waifuToolTop'] = '-60px'; // 工具栏顶部边距
live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式
/* 在 initModel 前添加 */
initModel("assets/waifu-tips.json?v=1.4.2")
</script>
</body>
</html>
实现方式二(autoload.js 引入)
1. 在前引入autoload.js
2. 修改autoload.js文件路径,在autoload.js文件中设置相关的参数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.4 / Demo 2</title>
</head>
<body>
<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="assets/jquery.min.js"></script>
<!-- 实现拖动效果,需引入 JQuery UI -->
<script src="assets/jquery-ui.min.js"></script>
<!-- 使用 aotuload.js 引入看板娘 -->
<script src="assets/autoload.js"></script>
</body>
</html>
# autoload.js(注意对应的文件路径)
try {
$("<link>").attr({href: "assets/waifu.min.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');
$.ajax({url: 'assets/waifu-tips.min.js',dataType:"script", cache: true, async: false});
$.ajax({url: 'assets/live2d.min.js',dataType:"script", cache: true, async: false});
/* 可直接修改部分参数 */
live2d_settings['hitokotoAPI'] = 'hitokoto.cn'; // 一言 API
live2d_settings['modelId'] = 5; // 默认模型 ID
live2d_settings['modelTexturesId'] = 1; // 默认材质 ID
live2d_settings['modelStorage'] = false; // 不储存模型 ID
/* 在 initModel 前添加 */
initModel('assets/waifu-tips.json');
} catch(err) { console.log('[Error] JQuery is not defined.') }
参数设置:
在waifu-tips.js文件修改自己需要的参数(自带默认参数,无特殊要求可以跳过)
后端接口
live2d_settings['modelAPI']= '//live2d.fghrsh.net/api/';// 自建 API 修改这里
live2d_settings['tipsMessage']= 'waifu-tips.json';// 同目录下可省略路径
live2d_settings['hitokotoAPI']= 'lwl12.com';// 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)
默认看板娘模型
live2d_settings['modelId'] = 1; // 默认模型 ID,可在Demo 页[F12]呼出控制台(Console)找到
live2d_settings['modelTexturesId']= 53; // 默认材质 ID,可在Demo 页[F12]呼出控制台(Console)找到
工具栏设置
live2d_settings['showToolMenu'] = true; // 显示 工具栏,可选 true(真), false(假)
live2d_settings['canCloseLive2d'] = true; // 显示 关闭看板娘 按钮,可选 true(真), false(假)
live2d_settings['canSwitchModel'] = true; // 显示 模型切换 按钮,可选 true(真), false(假)
live2d_settings['canSwitchTextures'] = true; // 显示 材质切换 按钮,可选 true(真), false(假)
live2d_settings['canSwitchHitokoto'] = true; // 显示 一言切换 按钮,可选 true(真), false(假)
live2d_settings['canTakeScreenshot'] = true; // 显示 看板娘截图 按钮,可选 true(真), false(假)
live2d_settings['canTurnToHomePage'] = true; // 显示 返回首页 按钮,可选 true(真), false(假)
live2d_settings['canTurnToAboutPage'] = true; // 显示 跳转关于页 按钮,可选 true(真), false(假)
模型切换
live2d_settings['modelStorage'] = true; // 记录 ID (刷新后恢复),可选 true(真), false(假)
live2d_settings['modelRandMode'] = 'switch'; // 模型切换,可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand'; // 材质切换,可选 'rand'(随机), 'switch'(顺序)
提示消息选项
ive2d_settings['showHitokoto'] = true; // 显示一言
live2d_settings['showF12Status'] = true; // 显示加载状态
live2d_settings['showF12Message'] = false; // 显示看板娘消息
live2d_settings['showF12OpenMsg'] = true; // 显示控制台打开提示
live2d_settings['showCopyMessage'] = true; // 显示 复制内容 提示
live2d_settings['showWelcomeMessage'] = true; // 显示进入面页欢迎词
看板娘样式设置h2
live2d_settings['waifuSize'] = '280x250'; // 看板娘大小,例如 '280x250', '600x535'
live2d_settings['waifuTipsSize'] = '250x70'; // 提示框大小,例如 '250x70', '570x150'
live2d_settings['waifuFontSize'] = '12px'; // 提示框字体,例如 '12px', '30px'
live2d_settings['waifuToolFont'] = '14px'; // 工具栏字体,例如 '14px', '36px'
live2d_settings['waifuToolLine'] = '20px'; // 工具栏行高,例如 '20px', '36px'
live2d_settings['waifuToolTop'] = '0px' // 工具栏顶部边距,例如 '0px', '-60px'
live2d_settings['waifuMinWidth'] = '768px'; // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide'] = 'left:0'; // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable'] = 'disable'; // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true; // 松开鼠标还原拖拽位置,可选 true(真), false(假)
其他选项设置
live2d_settings['l2dVersion'] = '1.4.2'; // 当前版本
live2d_settings['l2dVerDate'] = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl']= 'auto'; // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl'] = 'https://www.fghrsh.net/post/123.html'; // 关于页地址, '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'
定制个性提示语
文件:waifu-tips.json(自带默认,无特殊要求可以跳过)
"waifu" 系统提示
"console_open_msg" 控制台被打开提醒(支持多句随机)
"copy_message" 内容被复制触发提醒(支持多句随机)
"screenshot_message" 看板娘截图提示语(支持多句随机)
"hidden_message" 看板娘隐藏提示语(支持多句随机)
"load_rand_textures" 随机材质提示语(暂不支持多句)
"hour_tips" 时间段欢迎语(支持多句随机)
"referrer_message" 请求来源欢迎语(不支持多句)
"referrer_hostname" 请求来源自定义名称(根据 host,支持多句随机)
"model_message" 模型切换欢迎语(根据模型 ID,支持多句随机)
"hitokoto_api_message",一言 API 输出模板(不支持多句随机)
"mouseover" 鼠标触发提示(根据 CSS 选择器,支持多句随机)
"click" 鼠标点击触发提示(根据 CSS 选择器,支持多句随机)
"seasons" 节日提示(日期段,支持多句随机)
工具栏样式设置
文件waifu.min.css 设置相关css样式
参考文献:https://www.fghrsh.net/post/123.html(网页添加live2d看板娘)
https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02/(给博客添加能动的看板娘(Live2D))
Tags:看板娘
很赞哦! ()
上一篇:宅音乐播放器插件安装
下一篇:返回列表
相关文章
随机图文
-
给博客增加一个萌萌哒看板娘-基于live2d
给博客增加一个萌萌哒看板娘-基于live2d之前在别的博客上看到了萌萌哒的看板娘,很有意思,就准备自己也增加一个,作为一个不会写程序的人,当然是坚持“拿来主义”,去网 -
宅音乐播放器插件安装
宅音乐播放器插件安装在很多时候我们都会运用到播放器插件,陵小宇分享一款好用的宅音乐播放器插件。本插件来源于it技术宅,使用 thinkPHP开发后台。HTML5网页播放器,集成后台管 -
html音乐播放器插件-宅音乐播放器插件的接入和应用
在很多时候,我们都会给网页添加一个音乐播放器的插件,但自己写插件,需要花费很多时间和精力。在网上发现了这款音乐插件,感觉很不错的,需要的小伙伴也可以直接注册接入就可以
文章评论
留言与评论(共有 0 条评论) |