用于SAO Utils桌面網頁掛件的Live2D看板娘

• • • 1.預覽
    • 2.使用教程
    • 3.相關參數設置
    • 4.相關引用

本文使用了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看板娘

總結

以上是生活随笔為你收集整理的用于SAO Utils桌面网页挂件的Live2D看板娘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。