博客美化：live2d看板娘使用指南2.0

功能说明

  • 过了这么久，终于也是把支持3.0模型的live2d搞出来了，此版本使用了guansss大佬写的pixi-live2d-display作为框架，支持了全部模型的同时，也对后端模型的列表文件结构和以前的文本文件进行了些修改，总之就是增强了模型的角色表现力，让老婆们更加生动（味大，无需多盐）

基础配置

  • 如果嫌繁琐的配置麻烦，这次依然有最简单的使用方案，直接将下面的html代码粘入你的网页
<script src="https://fastly.jsdelivr.net/gh/lrplrplrp/live2d@master/loads.js"></script>


当当，老婆出现，不过先别急着发癫，不单独进行一下“调教”怎么能叫自己的老婆呢，你也不想某天老婆突然变成控制台的一串串红色error吧，所以，强烈建议你看完下面的部分，至少将仓库fork一份出来。

深入配置

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是模型相对画布的偏移，scaleX,scaleY是模型的缩放
  • waifu-tips.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。

参考链接

最后奉上芙宁娜的生日官图

posted @ 2024-10-13 16:21  lrplrplrp  阅读(54)  评论(2)  编辑  收藏  举报