部落格美化：live2d看板娘使用指南2.0

lrplrplrp發表於2024-10-13

功能說明

  • 過了這麼久，終於也是把支援3.0模型的live2d搞出來了，此版本使用了guansss大佬寫的pixi-live2d-display作為框架，支援了全部模型的同時，也對後端模型的列表檔案結構和以前的文字檔案進行了些修改，總之就是增強了模型的角色表現力，讓老婆們更加生動（味大，無需多鹽）

基礎配置

  • 如果嫌繁瑣的配置麻煩，這次依然有最簡單的使用方案，直接將下面的html程式碼粘入你的網頁
<script src="https://fastly.jsdelivr.net/gh/lrplrplrp/live2d@master/loads.js"></script>


噹噹，老婆出現，不過先別急著發癲，不單獨進行一下“調教”怎麼能叫自己的老婆呢，你也不想某天老婆突然變成控制檯的一串串紅色error吧，所以，強烈建議你看完下面的部分，至少將倉庫fork一份出來。

深入配置

  • 首先，fork以下倉庫到自己的倉庫，fork的步驟我不在贅述，真的不會可以參考我的上一篇教程部落格美化：live2d看板娘使用指南

https://github.com/lrplrplrp/live2d
https://github.com/lrplrplrp/live2d_api

  • live2d是看板孃的邏輯部分，live2d_api是模型和文字部分

live2d

  • 這部分需要修改的和以前大差不差，我懶得截圖了，直接上鍊接吧首先是將loads.js的第二行live2d_path後面的地址改為你的live2d的倉庫地址，地址格式我也不在贅述，不懂請參考部落格美化：live2d看板娘使用指南，然後是第三行改為你的live2d_api的倉庫地址，最後將waifu-tips.js的218行的主頁判斷條件改掉，至此，基本配置已經完成，已經不用擔心看板娘消失了，要求比較低的小夥伴到這就可以結束了，如果你還需要更加“深入”的配置，請繼續往下看。
  • waifu-tips.js的4行到8行是畫布大小，模型材質ID以及github主頁的配置，我都做了備註，可以根據個人情況進行修改

live2d_api

  • model_list.json進行的改動比較大，相比以前，這裡除了存放模型的地址還附帶了其他配置
    {
      "url":"./model/genshin/BCSZ1.1/BCSZ1.1.model3.json",
      "tipsUrl":"./model/genshin/BCSZ1.1/waifu-tips-BCSZ.json",
      "config":{
        "x":0,
        "y":0,
        "scaleX":2,
        "scaleY":2
      }
    }
  • 其中url是模型的地址，為必填項，無預設值，tipUrl與config可以預設，tipUrl的預設值是live2d下的waifu-tips.jsonconfig預設偏移是0，縮放是1，注意，如果配置了config，請不要預設config中的引數，config中x，y是模型相對畫布的偏移，但注意單位不是px是以畫布中心點為原點的直角座標系，修改儘量嘗試使用0.幾的小數。
  • waifu-tips.json
  • 此檔案不做改動，但需要以此檔案為模板建立新的模型文字檔案

舉個例子

  • waifu-tips-BCSZ.json
{
		"selector": "#waifu-tool .fa-paper-plane",
		"interaction":{
			"text": ["要不要來玩飛機大戰？", "這個按鈕上寫著「不要點選」。", "怎麼，你想來和我玩個遊戲？", "聽說這樣可以蹦迪！"],
    	    "motion":"Start"
        }
}
  • 相比之前的文字配置，新的文字配置用interaction代替了text幷包含了以前的文字，而motion就是模型播放的動作，動作名稱可以在模型的入口檔案中找到，同時，這個位置也可以填寫表情，同時配置動作和表情時，將會只播放動作。表情配置如下：
  • waifu-tips-草神.json
{
		"selector": "#waifu-tool .fa-comment",
		"interaction":{
		    "text": ["猜猜我要說些什麼？", "我從青蛙王子那裡聽到了不少人生經驗。"],
            "expression":1
        }
}
  • 表情可以使用索引，索引按照入口檔案中的順序從0開始，播放時間為預設四秒，還沒在檔案中開放配置
  • 除此之外，表情和動作也可以單獨設定文字，這樣在觸發表情和動作時就會播放設定好的表情或動作文字，不過這種設定的優先順序最低，會被其他文字覆蓋
	"expression":{
		"黑.exp3.json":"這樣不太明智...",
		"臉紅.exp3.json":"我早就不滿足於當一個聽眾了，一直都想出去看看。你冒險經驗這麼豐富，當我的嚮導好不好啊?你之後所有的故事，我都想親身感受。",
		"姿勢1.exp3.json":"果然要親眼去看，才能感受到世界的美。"
	}

	"motion":{
		"Tap早上好":"早，嗯?怎麼一副無精打采的樣子，沒有睡好嗎?哎呀，昨晚是去做什麼壞事了麼?",
		"Tap中午好":"嗯~傷腦筋，中午吃些什麼呢?油豆腐吃膩了，想吃點清淡的。話說好久沒見到社奉行家的小姑娘了，我們不如就去吃她做的點心吧。",
		"Tap晚上好":"今夜的月光如此清亮，不做些什麼真是浪費。隨我一同去月下漫步吧，不許拒絕。",
		"Start":"我是鳴神大社的宮司，此番造訪，自是為了確認你的一舉一動，此為大社詔令..呵，不用那麼緊張，場面話罷了，這樣才有正當理由休沐嘛。快，去做些有趣的事讓我看看吧。",
		"Tap無聊":"",
		"Tap不變":"所謂的永恆，就是不再失去已擁有之物，但從別的角度說，也放棄了得到更多的可能，不過世事總是如此，沒人能夠得到全部。"
	}
  • 剩下的就是新的時間文字
{
		"date": "12/20-12/31",
		"interaction":{
			"text": "這幾天是<span>聖誕節</span>，主人肯定又去剁手買買買了～"
		}	
	},  {
		"time": "5:00-7:00",
		"interaction":{
			"text": ["早上好！一日之計在於晨，美好的一天就要開始了。","早啊，叫醒你的是理想還是鬧鐘呢。"]
		}
}
  • 新的時間文字可以使用日期段，時間段，固定日期，固定時間，或者其中日期和時間的任意組合，不過當前並不會在整點或整分觸發，最小單位為分鐘，不能在固定的幾秒觸發，畢竟感覺也沒這個必要。
  • 好了，配置到此結束，快在html中引用你的看板娘地址看看配置的如何吧，之後如果有問題我也會隨緣更新的，大家多多fork多多star。

最後奉上芙寧娜的生日官圖

相關文章