用于SAO Utils桌面网页挂件的Live2D看板娘

本文提供了一个使用SAOUtils桌面网页挂件展示Live2D看板娘的教程,包括预览效果、下载及使用步骤、参数设置和相关代码引用。用户可以通过修改配置参数实现个性化设置,如模型选择、功能开关等。同时,文章强调了作品仅供学习研究,禁止商业用途,并提供了模型和资源的来源信息。
摘要由CSDN通过智能技术生成

用于SAO Utils桌面网页挂件的Live2D看板娘


本文使用了FGHRSH博客中的代码,部分“药水制作师”作者Sinsiroad的相关模型、图片、文字和动作数据等,以及其他一些模型、图片、文字和动作模型,仅用于研究学习,禁止商业用途,若有侵权,请联系本人,本人会尽快删除。

1.预览

使用SAO Utils桌面网页挂件放到桌面上的效果图如下:
预览图

2.使用教程

  • 下载代码文件
    CSDN下载0积分/C币
    百度云下载:vgm4
  • 解压下载的文件,文件结构:
    live2d文件夹下:
    live2d文件夹
    demo.html:显示Live2D看板娘的网页;
    assets文件夹下:
    assets文件夹
    • flat-ui-icons-regular.eot文件、flat-ui-icons-regular.svg文件、flat-ui-icons-regular.ttf文件和flat-ui-icons-regular.woff文件用于显示预览图中的工具栏图标;
    • jquery.min.js文件和jquery-ui.min.js文件引用jQuery库
    • live2d.min.js文件实现Live2D看板娘相关功能的核心文件;
    • waifu.min.css文件、waifu-tips.js文件和waifu-tips.json文件用于实现在网页显示Live2D看板娘等功能。
  • 使用SAO Utils桌面网页挂件显示Live2D看板娘:直接将demo.html文件拖进挂件中,调整页面大小即可显示Live2D看板娘(与桌面时钟挂件的使用方法相同)。

3.相关参数设置

在文件waifu-tips.js中,可以修改以下参数设置Live2D看板娘:

  • 参数live2d_settings['modelAPI']:用于获取Live2D模型的API地址,不建议修改,因为这里使用的是原作者FGHRSH搭建的API;
  • 参数live2d_settings['tipsMessage']:保存提示语的JSON文件路径,同目录下可省略路径,默认为waifu-tips.json
  • 参数live2d_settings['hitokotoAPI']:名言引用API地址,如lwl12.com、hitokoto.cn、jinrishici.com等;
  • 参数live2d_settings['modelId']:默认模型ID,可在开发者工具的Resources -> Session Storage -> file://找到,如下图:
    控制台
    作者搭建的API中拥有的模型如下表:
    • modelId = 1
      模型1
    • modelId = 2
      模型2
    • modelId = 3
      模型3
    • modelId = 4
      模型4
    • modelId = 5
      模型5
    • modelId = 6
      模型6
    • modelId = 7
      模型7
  • 参数live2d_settings['modelTexturesId']:默认模型贴图ID,用于实现模型换装功能,也可在开发者工具中找到,同上;
  • 参数live2d_settings['showToolMenu']:是否显示工具栏,即预览图中右侧的一串按钮;
  • 参数live2d_settings['canCloseLive2d']:是否显示关闭看板娘按钮;
  • 参数live2d_settings['canSwitchModel']:是否显示模型切换按钮;
  • 参数live2d_settings['canSwitchTextures']:是否显示服装切换按钮;
  • 参数live2d_settings['canSwitchHitokoto']:是否显示名言切换按钮;
  • 参数live2d_settings['canTakeScreenshot']:是否显示照相按钮,建议关闭(false),因为SAO Utils的桌面网页挂件暂时没有下载功能;
  • 参数live2d_settings['canTurnToHomePage']:是否显示返回主页按钮,建议关闭(false),这一功能可用于为自己的网站设置Live2D看板娘;
  • 参数live2d_settings['canTurnToAboutPage']:是否显示跳转到相关页按钮,建议关闭(false),这一功能可用于为自己的网站设置Live2D看板娘;
  • 参数live2d_settings['modelStorage']:是否记录模型ID,暂时没搞懂什么意思;
  • 参数live2d_settings['modelRandMode']:模型切换方式,随机切换:'rand',顺序切换:'switch'
  • 参数live2d_settings['modelTexturesRandMode']:服装切换方式,同上,有随机和顺序两种方式;
  • 参数live2d_settings['showHitokoto']:是否在空闲时显示提示语;
  • 参数live2d_settings['showF12Status']:是否在控制台显示加载状态,若为true,在开发者工具的Console中可以看到模型ID和服装ID,如图:
    控制台显示加载状态
  • 参数live2d_settings['showF12Message']:是否在控制台显示看板娘信息,若为true,在开发者工具的Console中可以看到提示语,如图:
    控制台显示看板娘提示语
  • 参数live2d_settings['showF12OpenMsg']:是否在打开控制台时显示提示语,如图所示:
    打开控制台时显示提示语
    默认提示语为哈哈,你打开了控制台,是想要看看我的秘密吗?,如果要修改该提示语,需修改waifu-tips.json文件waifu中的console_open_msg值;
  • 参数live2d_settings['showCopyMessage']:是否在复制内容时显示提示语,默认提示语为你都复制了些什么呀,转载要记得加上出处哦,如果修改该提示语,需修改waifu-tips.json文件waifu中的copy_message值;
  • 参数live2d_settings['showWelcomeMessage']:是否在进入页面时显示提示语,作者FGHRSH根据不同域名设置了不同的提示语,一般用于搭建自己的网站;
  • 参数live2d_settings['waifuSize']:设置看板娘大小,示例:'280x250'
  • 参数live2d_settings['waifuTipsSize']:设置提示框大小,示例:'250x70'
  • 参数live2d_settings['waifuFontSize']:设置提示语字体大小,示例:'12px'
  • 参数live2d_settings['waifuToolFont']:设置工具栏字体大小,示例:'14px'
  • 参数live2d_settings['waifuToolLine']:设置工具栏行高,示例:'20px'
  • 参数live2d_settings['waifuToolTop']:设置工具栏顶部边距,示例:'-60px'
  • 参数live2d_settings['waifuMinWidth']:当页面宽度小于该值时隐藏看板娘,可设置为:'disable'(禁用)'768px'
  • 参数live2d_settings['waifuEdgeSide']:设置看板娘贴边方向,示例:'left:0'(靠左0px)'right:30'(靠右30px)
  • 参数live2d_settings['waifuDraggable']:设置看板娘拖拽样式,可设置为:'disable'(禁用)'axis-x'(仅水平方向)'unlimited'(自由拖拽)
  • 参数live2d_settings['waifuDraggableRevert']:是否在松开鼠标时还原拖拽位置;
  • 参数live2d_settings['homePageUrl']:设置主页地址,可设置为:'auto'(自动)或网址;
  • 参数live2d_settings['aboutPageUrl']:设置关于页地址;
  • 参数live2d_settings['screenshotCaptureName']:设置看板娘截图文件名,示例:'live2d.png'

4.相关引用

FGHRSH的博客——网页添加Live2D看板娘

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值