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

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

1.预览

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

2.使用教程

• 下载代码文件
  CSDN下载：0积分/C币
  百度云下载：vgm4
• 解压下载的文件，文件结构：
  live2d文件夹下：
  
  demo.html：显示Live2D看板娘的网页；
  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：
    
  • modelId = 2：
    
  • modelId = 3：
    
  • modelId = 4：
    
  • modelId = 5：
    
  • modelId = 6：
    
  • modelId = 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看板娘