用于SAO Utils桌面網(wǎng)頁(yè)掛件的Live2D看板娘

• • • 1.預(yù)覽
    • 2.使用教程
    • 3.相關(guān)參數(shù)設(shè)置
    • 4.相關(guān)引用

本文使用了FGHRSH博客中的代碼，部分“藥水制作師”作者Sinsiroad的相關(guān)模型、圖片、文字和動(dòng)作數(shù)據(jù)等，以及其他一些模型、圖片、文字和動(dòng)作模型，僅用于研究學(xué)習(xí)，禁止商業(yè)用途，若有侵權(quán)，請(qǐng)聯(lián)系本人，本人會(huì)盡快刪除。

1.預(yù)覽

使用SAO Utils桌面網(wǎng)頁(yè)掛件放到桌面上的效果圖如下：

2.使用教程

• 下載代碼文件
  CSDN下載：0積分/C幣
  百度云下載：vgm4
• 解壓下載的文件，文件結(jié)構(gòu)：
  live2d文件夾下：
  
  demo.html：顯示Live2D看板娘的網(wǎng)頁(yè)；
  assets文件夾下：
  
  • flat-ui-icons-regular.eot文件、flat-ui-icons-regular.svg文件、flat-ui-icons-regular.ttf文件和flat-ui-icons-regular.woff文件用于顯示預(yù)覽圖中的工具欄圖標(biāo)；
  • jquery.min.js文件和jquery-ui.min.js文件引用jQuery庫(kù)；
  • live2d.min.js文件實(shí)現(xiàn)Live2D看板娘相關(guān)功能的核心文件；
  • waifu.min.css文件、waifu-tips.js文件和waifu-tips.json文件用于實(shí)現(xiàn)在網(wǎng)頁(yè)顯示Live2D看板娘等功能。
• 使用SAO Utils桌面網(wǎng)頁(yè)掛件顯示Live2D看板娘：直接將demo.html文件拖進(jìn)掛件中，調(diào)整頁(yè)面大小即可顯示Live2D看板娘（與桌面時(shí)鐘掛件的使用方法相同）。

3.相關(guān)參數(shù)設(shè)置

在文件waifu-tips.js中，可以修改以下參數(shù)設(shè)置Live2D看板娘：

• 參數(shù)live2d_settings['modelAPI']：用于獲取Live2D模型的API地址，不建議修改，因?yàn)檫@里使用的是原作者FGHRSH搭建的API；
• 參數(shù)live2d_settings['tipsMessage']：保存提示語(yǔ)的JSON文件路徑，同目錄下可省略路徑，默認(rèn)為waifu-tips.json；
• 參數(shù)live2d_settings['hitokotoAPI']：名言引用API地址，如lwl12.com、hitokoto.cn、jinrishici.com等；
• 參數(shù)live2d_settings['modelId']：默認(rèn)模型ID，可在開(kāi)發(fā)者工具的Resources -> Session Storage -> file://找到，如下圖：
  
  作者搭建的API中擁有的模型如下表：
  • modelId = 1：
    
  • modelId = 2：
    
  • modelId = 3：
    
  • modelId = 4：
    
  • modelId = 5：
    
  • modelId = 6：
    
  • modelId = 7：
    
• 參數(shù)live2d_settings['modelTexturesId']：默認(rèn)模型貼圖ID，用于實(shí)現(xiàn)模型換裝功能，也可在開(kāi)發(fā)者工具中找到，同上；
• 參數(shù)live2d_settings['showToolMenu']：是否顯示工具欄，即預(yù)覽圖中右側(cè)的一串按鈕；
• 參數(shù)live2d_settings['canCloseLive2d']：是否顯示關(guān)閉看板娘按鈕；
• 參數(shù)live2d_settings['canSwitchModel']：是否顯示模型切換按鈕；
• 參數(shù)live2d_settings['canSwitchTextures']：是否顯示服裝切換按鈕；
• 參數(shù)live2d_settings['canSwitchHitokoto']：是否顯示名言切換按鈕；
• 參數(shù)live2d_settings['canTakeScreenshot']：是否顯示照相按鈕，建議關(guān)閉(false)，因?yàn)镾AO Utils的桌面網(wǎng)頁(yè)掛件暫時(shí)沒(méi)有下載功能；
• 參數(shù)live2d_settings['canTurnToHomePage']：是否顯示返回主頁(yè)按鈕，建議關(guān)閉(false)，這一功能可用于為自己的網(wǎng)站設(shè)置Live2D看板娘；
• 參數(shù)live2d_settings['canTurnToAboutPage']：是否顯示跳轉(zhuǎn)到相關(guān)頁(yè)按鈕，建議關(guān)閉(false)，這一功能可用于為自己的網(wǎng)站設(shè)置Live2D看板娘；
• 參數(shù)live2d_settings['modelStorage']：是否記錄模型ID，暫時(shí)沒(méi)搞懂什么意思；
• 參數(shù)live2d_settings['modelRandMode']：模型切換方式，隨機(jī)切換：'rand'，順序切換：'switch'；
• 參數(shù)live2d_settings['modelTexturesRandMode']：服裝切換方式，同上，有隨機(jī)和順序兩種方式；
• 參數(shù)live2d_settings['showHitokoto']：是否在空閑時(shí)顯示提示語(yǔ)；
• 參數(shù)live2d_settings['showF12Status']：是否在控制臺(tái)顯示加載狀態(tài)，若為true，在開(kāi)發(fā)者工具的Console中可以看到模型ID和服裝ID，如圖：
  
• 參數(shù)live2d_settings['showF12Message']：是否在控制臺(tái)顯示看板娘信息，若為true，在開(kāi)發(fā)者工具的Console中可以看到提示語(yǔ)，如圖：
  
• 參數(shù)live2d_settings['showF12OpenMsg']：是否在打開(kāi)控制臺(tái)時(shí)顯示提示語(yǔ)，如圖所示：
  
  默認(rèn)提示語(yǔ)為哈哈，你打開(kāi)了控制臺(tái)，是想要看看我的秘密嗎？，如果要修改該提示語(yǔ)，需修改waifu-tips.json文件的waifu中的console_open_msg值；
• 參數(shù)live2d_settings['showCopyMessage']：是否在復(fù)制內(nèi)容時(shí)顯示提示語(yǔ)，默認(rèn)提示語(yǔ)為你都復(fù)制了些什么呀，轉(zhuǎn)載要記得加上出處哦，如果修改該提示語(yǔ)，需修改waifu-tips.json文件的waifu中的copy_message值；
• 參數(shù)live2d_settings['showWelcomeMessage']：是否在進(jìn)入頁(yè)面時(shí)顯示提示語(yǔ)，作者FGHRSH根據(jù)不同域名設(shè)置了不同的提示語(yǔ)，一般用于搭建自己的網(wǎng)站；
• 參數(shù)live2d_settings['waifuSize']：設(shè)置看板娘大小，示例：'280x250'；
• 參數(shù)live2d_settings['waifuTipsSize']：設(shè)置提示框大小，示例：'250x70'；
• 參數(shù)live2d_settings['waifuFontSize']：設(shè)置提示語(yǔ)字體大小，示例：'12px'；
• 參數(shù)live2d_settings['waifuToolFont']：設(shè)置工具欄字體大小，示例：'14px'；
• 參數(shù)live2d_settings['waifuToolLine']：設(shè)置工具欄行高，示例：'20px'；
• 參數(shù)live2d_settings['waifuToolTop']：設(shè)置工具欄頂部邊距，示例：'-60px'；
• 參數(shù)live2d_settings['waifuMinWidth']：當(dāng)頁(yè)面寬度小于該值時(shí)隱藏看板娘，可設(shè)置為：'disable'（禁用），'768px'；
• 參數(shù)live2d_settings['waifuEdgeSide']：設(shè)置看板娘貼邊方向，示例：'left:0'（靠左0px）、'right:30'（靠右30px）；
• 參數(shù)live2d_settings['waifuDraggable']：設(shè)置看板娘拖拽樣式，可設(shè)置為：'disable'（禁用）、'axis-x'（僅水平方向）、'unlimited'（自由拖拽）；
• 參數(shù)live2d_settings['waifuDraggableRevert']：是否在松開(kāi)鼠標(biāo)時(shí)還原拖拽位置；
• 參數(shù)live2d_settings['homePageUrl']：設(shè)置主頁(yè)地址，可設(shè)置為：'auto'（自動(dòng)）或網(wǎng)址；
• 參數(shù)live2d_settings['aboutPageUrl']：設(shè)置關(guān)于頁(yè)地址；
• 參數(shù)live2d_settings['screenshotCaptureName']：設(shè)置看板娘截圖文件名，示例：'live2d.png'。

4.相關(guān)引用

FGHRSH的博客——網(wǎng)頁(yè)添加Live2D看板娘

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。