ff14高级触发器不正经教程(3)-无面捕/动捕Live2D直播方案介绍及初步教程

2023-01-01 01:15 作者:纤凌依 0人读过 | 我要投稿

几个月前我直播时用了这套方案，效果注定是比不上面捕的。毕竟全靠高级触发器和那么不到百行代码支撑着，并不复杂的工作量决定了其上限。但如果有心想沿着这个思路走下去的话，1500多行代码应该就能让模型的动作流畅且自然到到一个不亚于世面上常见面捕的水平，而且动作更为平滑（上限基本取决于Live2D模型）。

整个过程中最困难的部分应该是第三步的“使用SDK打包模型”可以先看看那一段以及参考链接中的内容再决定是否要动手搞。需要的环境配置很多，不同版本的兼容或者模型自身或者模型版本也可能会出问题，而且我没有把握能帮大家解决QAQ。

如果你懂环境搭建、TypeScript(JavaScript)、Node.js、HTML、Java Web（其他web项目开发语言亦可）的相关知识，你会十分轻易的理解这篇专栏的相关内容，而且比我做的更好。
如果你有使用哔哩哔哩直播姬的经验，你应该会在最后直播设置相关的部分比我做的更好。我的直播总是被吐槽很模糊。
如果你有ff14高级触发器的编写经验，你可能会比我写出更高效的触发器。完全不会的话可以看看我往期专栏，对于搞不定的正则表达式我也愿意提供力所能及的帮助。
如果你使用过Visual Studio的话就太好了，官方的SDK推荐使用这款编辑器。
希望你能熟练地下载软件，我可能只会在专栏中放个链接。如果找不到的话可以留言或者私信问我，我会提供力所能及的帮助。
ACT不打印日志或者插件不好使的问题我能提供的帮助比较有限，建议大家去插件求助群求助开发者们。

我的笔记、旧代码被我搞丢了，之前使用的模型原作者也不再供大家免费使用了。虽然本地有模型文件但是再用可能会产生纠纷与不好的影响。这次我也是一边尝试开发，一边写本篇专栏，而且换用了新的模型，需要重新编写动作相关的触发器与配置文件。因此本篇不会像前两篇那样花较多时间排版，请见谅。

第一步，下载Live2D Cubism

你需要一个软件来查看你下载的模型是否符合你的要求，以及是否能做出你想要的动作。使用JavaScript/TypeScript代码（后文全部简略且笼统的称呼为js代码）来控制Live2D模型能做的远比模型展示视频能做的动作多得多。链接如下：

https://www.live2d.com/zh-CHS/download/cubism/

你会注意到页面说有42天的试用时间什么的，不过其实没关系。试用时间指的是Live2D建模软件的完整功能PRO版，好像是更多图层更多变形器更多节点什么的。我们完全可以仅使用FREE版，甚至我们不需要使用编辑器来创建模型或者编辑模型的工程文件，而是只使用别人已经创建好的模型。

下载并安装好后的文件大概如上，Editor什么的是模型编辑器，Viewer什么的是模型查看器。以上内容我们都不用管，因为模型下载好以后直接点击模型文件（.moc3）就能自动打开了。

第二步，获取一个心仪的模型

无论直接面捕/动捕直播还是写代码玩，我的建议是先用前辈们的公开模型练练手，之后再决定是不是要定制模型。毕竟完全无人使用的话，模型也是会伤心的。

【免费L2D模型展示】超绝可爱JK系猫猫免费大派送！！up：慕星Mux

我准备用这一个模型做尝试，在视频的下方有模型获取地址，喜欢的话请多多支持原作者。

百度了一下，caracal好像是薮猫的意思。不知道是什么猫，但是模型很可爱，很多使用该模型的主播人气也蛮高的。

对于配合高级触发器直播使用来说，我不太记得哪些文件是必须的了。各个文件的具体作用请查看官网文档或观看各平台官方及非官方教程。

双击caracal.moc3文件打开模型（其他模型就是xxx.moc3）。可能要等待个一两分钟，别急~

多数模型打开后是默认使用待机（呼吸）动作的，而且视线默认跟随鼠标（需左键点击空白处）。可以使用鼠标滚轮缩放视角，鼠标左键和键盘空格键配合移动模型的位置。这猫猫越看越可爱，让妈咪抱抱，嘿嘿嘿嘿嘿嘿

下方的“显示全部”“置中”按钮也留意下，蛮方便的。

动画菜单里面的东西留意一下，可以视情况打开或关闭。具体的功能和效果可以配合模型感受下。有些模型可能做得不好，和这里的设置不适配，所以还是要尽量找一个好点的模型的。

把动画菜单下除“使用旧的动态再生方式”各项均打开，然后点击页面左上方expression菜单下的各项动作（.json后缀），这些是模型作者已经制作完成的表情动作，可以让我们初步感受下模型是否合胃口。

猫猫的模型就很棒，物理模拟不会很突兀，呼吸什么的也比较自然。她害羞的样子有点点可爱，眼泪汪汪的样子也很惹人怜爱。如果你没有这个文件夹，较大的可能是作者没给模型做动作。不碍事，我们可以用触发器自己写动作文件。

留意一下图中“自动眨眼”那个选项后面的按钮，点击以后会出现图中左下方的各项参数。这些参数很重要，决定了你用触发器控制这个模型所能做到的上限。

在你冷静下来之后把动画菜单中的各项全部关闭，让你的模型变的一动不动，然后调出参数菜单（上图那个一堆滑杆的）我们现在要客观评价我们所选模型的各项参数。

以“角度Y”为例，按住红点往左拉猫猫会低头，往右拉猫猫会抬头。试试各项参数，有些可能没效果，有些可能调整不了，有些（比如手臂切换）甚至还会很大幅度的改变表情、改变姿势（改变贴图），请仔细感受。表情也可以通过这里来改变，毕竟表情动作的远离就是修改各项参数。有些需要多项参数配合着使用，也请仔细观察。赞美作者，猫猫的模型花样好多。

第三步，使用官方SDK打包模型

放一个官方环境搭建的链接：

https://docs.live2d.com/zh-CHS/cubism-sdk-tutorials/sample-build-web/#

这篇是其他作者的笔记，参考价值很高，感谢原作者

https://blog.csdn.net/weixin_42578046/article/details/123509508

我们需要下载Visual Studio（后面简称为VS）并为其安装Live2D Cubism SDK for Web（后面简称为官方SDK）、Node.js、TypeScript环境。

具体安装流程可能如下（优先查看官方教程，我真的想不起来了qwq）：

安装VS
安装Node.js与TypeScript（这两步我完全没有记忆了，甚至怀疑是否需要安装）
下载官方SDK

然后来到D:\CubismSdkForWeb-4-r.4\Samples\Resources（具体路径取决于你官方SDK解压路径）目录下，把下载的模型文件夹放进去，如下：

caracal文件夹是我刚放进去的，其余几个则是之前就有的示例文件。打开文件夹会发现里面的目录层级类似，如果差的很多可能是模型版本导致的，不保证能打包成功。

接下来回到外层目录（我这里是直接回到D盘根目录），右键文件夹使用VS打开，如下：

猫猫的模型在这：

在VS中打开Samples/TypeScript/Demo/src/lappdefine.ts这个文件，找到下图中这行代码：

编辑一下选中的那行，可以把你的模型加上或者删掉其余的部分。猫猫的模型名是caracal，所以我做了如下修改：

点击视图→终端，打开VS的PowerShell，输入命令npm install

默认你是在项目根目录的，你需要使用命令进入package.json所在的目录：

然后看看终端提示是否类似这个：

它表示你所处的位置是Demo文件夹下，现在你需要根据package.json安装项目中所需的插件，使用下方命令进行安装：

然后一边向海德林祈愿一边见招拆招吧（日志有复制按钮，复制按钮的截图下一张就是，遇到问题别傻乎乎的挨个字母敲），我遇到的问题是：

网上查了一下，先用一下这个然后再npm install就可以了（原因不深究，毕竟无论TypeScript还是VS我都完全不懂）

打包看起来蛮顺利的（下方为打包时运行的命令与控制台信息），运行的命令为npm run build

打包成功之后会出现一个新文件bundle.js，这个就是移植到其他环境用的重要文件之一了：

下方的那两个是复制和粘贴按钮。

可以使用npm run serve命令尝个鲜，等待数秒后服务启动，并提示你可访问的路径

不喜欢图片太大，所以把浏览器稍稍缩小了一点。

我顺便把路径贴上来，不清楚你们的是否为同一个

右上方有个齿轮，是切换模型用的（具体有哪些模型取决于前面步骤中lappdefine.ts怎么改的）。网页打开后模型会加载一会。可能有点慢，别担心很正常。现在你可以点一点了，你的模型（可能）会使用待机动作或跟随你的鼠标转头并移动视线。

（在你玩够了之后）回到你的VS终端，ctrl+c停止服务。你会发现你浏览器中的模型仍然能跟随你的鼠标转头。这没问题，因为到目前为止模型还不需要和后台有交互。我们下一步（也可能是再下一步）涉及到Live2D模型与高级触发器交互时若关掉后台服务，你的模型可能就会变为木头人了。

第四步，移植模型

说的可能有点笼统，这一步我要做的是把模型以及js文件移植到Java环境。用Java是因为我最熟悉的是Java，你可以使用其他你擅长的语言。要是你不掌握相关知识的话也许你可以跟着我浅学一点Java。

我使用的是Eclipse，相关的Java环境与Maven环境已经搭建好了，接下来我会创建一个Maven项目并使用SpringBoot搭建一个后台服务（为方便理解，后台服务相关的东西我在后文笼统的称呼为Java）。接下来的部分主要介绍Live2D与触发器相关的部分，涉及到Java的仅介绍关键部分。

我们先去VS中把重要的文件拿出来，需要的是选中的那3个。

上一步中打包生成的bundle.js每次改.ts代码都需要重新打包，把他们三个拷贝出来，连同你的模型文件夹一起放进你的资源目录文件夹下。

上面提到的资源目录文件夹对于Java而言就是图中的static文件夹，html网页、js代码（如果有）、css代码（如果有）以及模型文件夹我都会放在static下。那个caracal文件夹就是你们熟悉的模型文件夹，从始至终只有一个caracal文件夹。

在bundle.js中搜一下ResourcesPath，找到了如下一行：

它表示引用这个js的文件（html文件）与放着模型文件夹的目录的相对位置。我们需要对照着java的目录层级进行调整。由于我caracal和html文件都直接放在static文件夹下，我可以这么写：

同理，我们打开index.html

别的可以先不管，主要是相对路径我们需要改一下

上面这些改成下面这些（视具体情况而定）。第一个不知道做什么用的，直接注了。

最后调整下Java相关的配置，启动服务，访问Java默认路径：http://localhost:8080/

关于后端的部分我不打算上代码了，有想要的小伙伴可以问我要。想要前端/后端代码我可以传github或者直接给你，想整套直接用的话我可以打jar包发你，装完java的jdk环境直接运行就好。

f12看了眼浏览器控制台，有报错，但是跑起来了。移植比我想象的简单的多。

第五步，修改报错

以下操作我自己看了都高血压，正规操作其实应该是修改ts代码然后重新编译。各位按需求决定是治标、治本还是放弃治疗。

提示一个名为m的变量未定义的报错可以注释掉bundle.js中这一行：

提示this._gear为空可以注释掉bundle.js中这3行：

提示this._back为空可以注释这一行：

最后还会提示两个图片404的错误，这两个是齿轮和背景图片，如果想予以保留的话可以导入图片然后修改变量地址，我这里直接将值设为空字符串。

这时候注意到背景是黑色的，我们需要它变成透明的，不然直播时会遮住后面的直播画面。我们注释掉这一行：

好的，差不多了。

看看效果，舒服些了，没有太多的报错信息，背景为透明。微张的小嘴以及发型的变化我们下一章介绍。

如果只是想在直播间或者个人网页上放一个live2D做一些待机动作，那么上述步骤完成后就已经可以使用了。但若是想让其做一些表情动作或者调整模型的参数，还需要继续往下看。

第六步，模型动作修改方法介绍、数据结构的创建、建立websocket链接

在bundle.js中，我们控制模型动作的代码较为集中。结合官方SDK使用手册（你比较关心的大概是下图中的部分）：

https://docs.live2d.com/zh-CHS/cubism-sdk-manual/top/#

我们发现官方比较推荐我们在如下代码中修改/添加：可以搜this._model.loadParameters()

这段代码所处的方法LAppModel.prototype.update如果我没理解错的话是一帧执行一遍的，官方SDK通过这里的代码来更新模型每一帧各图层的参数。

我来介绍文档中大家可能最为关心的用法：设定参数。我没有太深入研究，如有需要请查阅官方文档。

先来看一下自带的动作影响了哪些参数：

可以直接去模型浏览器中查看，还能直接看效果。在页面左下方会显示影响的参数中文名，记住这个中文名，然后按照下一步的方法查找ID。记得把“动画”菜单中需要勾选的选项都勾上，不然表情可能没效果。

设定参数在官方文档中章节名为“参数操作-设定参数-覆盖值”。

第一行获取id，第二行设定参数值。

用于获取id的字符串查看方法如下：

左上方选中模型文件，在下方涨到想要调整的参数。鼠标移动上去括号中的就是ID，右键汉字部分可以直接复制ID。

setParameterValueById方法包含三个值：id、参数的值、影响程度。影响程度有点类似权重的概念，简单来说，设定为1就会瞬间变化，而像我一样设定为0.001就会变化很慢。如果你和我上方代码块中的写法相同，那猫猫的嘴会从模型加载完毕开始，逐渐张大，最后完全张开。

至于参数的取值范围……我不知道如何获取，官方文档不知道是没写还是我看漏了。代码中获取的话可以代码中搜一下“getParameterMaximumValue”和“getParameterMinimumValue”，参数都是parameterIndex，需要先获取参数的索引。

第五步最后一张图片是代码修改如下的结果：

动手能力强的后面的部分可以不用看了，我下面将会使用播放表情与设定参数两个方法配合websocket链接的方式从外部控制猫猫的动作。

在建立websocket链接之前，我们需要约定一种数据结构。websocket接收数据，并存入其中。LAppModel.prototype.update这个方法（上方代码块所处的方法）读取其中的数据，修改模型。

观察一下，发现设定参数这个方法需要三个参数：一个代表参数/动作名的字符串以及另外两个参数。javascript为弱类型语言，我们可以为待设定参数创建一个二维数组。二维数组的索引为代表参数/动作名的字符串，值为一个长度为2的一维数组。该一维数组中两项分别代表参数的值和影响程度。

bundle.js中的代码很多，为了方便查找我们把这个二维数组定义在window.onload触发的方法上方：

简陋了点，但是可行。

接下来写一下websocket的代码，依旧是在bundle.js中，修改window.onload就ok的。

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload是很常见的用法，bundle.js中window.onload方法如下（上方的两行代码是我们刚添加的）：

我们在这个方法体中找一个合适的地方插入我们建立websocket链接的代码，添加在方法体中的最后一行就不错（有注释的都是我新添加的代码）：

正常工作时，上方代码块中的onopen、onclose、onerror用途其实都不大，打印两行日志而已。创建连接那里的连接地址取决于你的后台服务，在我这里对应的是java相关的部分。

如果你的服务部署在远程服务器上，那你可以把代码块中的localhost更换为远程服务器的ip地址。

现在我们定义一下json报文的格式，我计划该报文由高级触发器生成，发给后台服务（java）并由后台服务直接转发给websocket并反映到live2D模型上，让后台服务器做尽可能少的事情。掉线了六个大章节的高级触发器终于有了露脸的机会。

报文每次可以发送若干个动作，动作分为两大类：参数(p)、删除参数(dp)。这里的删除参数指将该项数据恢复为默认值。p代表parameter，d代表delete，短一点的话写触发器时能轻松些。

我来给出两个示例报文，第一个和第五步末尾的效果相同——扎起头发并逐渐张开嘴；第二个让头发恢复原样，小嘴立刻闭合（想让嘴慢慢闭合的话可以仿照示例报文1写，叫参数值从1改为0）。

示例报文1：

示例报文2：

请结合上述两条示例报文食用下方ws.onmessage代码：

有点过分紧凑了，可能不太好阅读。逻辑还是蛮简单的：

把报文按照不同的分组拆分。
判断分组是添加参数(p)还是删除参数(dp)。
p的话直接设定parameter数组就行，dp的话要删除parameter数组并添加进parameter_del数组。
等待前文提到的LAppModel.prototype.update处理数组。

假设你的后台服务已经创建成功，那么剩余的工作已经不多了。（java关键代码我会放在本专栏较靠后的位置）。

现在我们动手改造this._model.loadParameters();和this._model.saveParameters();中间的部分。（前面展示过，让猫猫小嘴张开以及修改为短发的那段代码）

这是改造完成的样子，我删除了之前写死的参数，修改为读取数组对象的动态方法：

核心知识点已经讲完了，启动服务，将示例报文1发往后台——猫猫换了发型并慢慢张开了嘴。将示例报文2发往后台，变回及腰长发、张开的嘴合上了。再发报文1，又变成了短发，并慢慢张开了嘴。

第七步，优化点

你可能还想根据模型做一点其他的小改动，我来介绍一些我想做的改动：

我注意到猫猫有时候不眨眼，有时候会疯狂眨眼。查了下官方文档（https://docs.live2d.com/zh-CHS/cubism-sdk-manual/autoeyeblink/#），理论应该是0~2*设定值眨眼一次的，对于猫猫的模型来说是0~8s。

看了眨眼相关的代码发现this._eyeBlink.updateParameters(this._model, deltaTimeSeconds);的调用频率与预期不符，比预期的低了太多太多。排查了一下把这段代码注了（这段代码在前文提到过），示例中保留它不知是否为教程/展示用。

修改后眨眼频率正常了，在0~8秒的范围内喵。她眨眼时耳朵也会动！超可爱的！

翻了翻代码，在this._model.saveParameters();下面几行发现了一个控制视线以及转头角度的方法：

这么好用的方法感觉有必要利用一下，到时候配合高级触发器处理一下，根据游戏角色选中目标的位置转动live2D视角什么的。

先新增一个视角位置的变量。

再把websocket的处理逻辑补充上~好的做完了，发个报文试试效果。

具体的数字要取决于你的模型，猫猫这个模型(x,y)=(1,-1)时就差不多已经崩了。

猫猫呼吸时身体会左右摇晃，感觉动作摇晃有点大。改了一下呼吸影响的参数的最大值和权重，搜setupBreath可能比较好找。官方关于这里的介绍文档在https://docs.live2d.com/zh-CHS/cubism-sdk-manual/breath/#

想呼吸时加点别的参数也不影响，上面的东西也可以注掉几行，参数可以自己修改体验一下。

有趣的是，猫猫的尾巴并不是呼吸导致的，呼吸那里甚至全篇都没有尾巴的参数——猫猫的尾巴是因为开着物理模拟，呼吸导致来回晃。把物理模拟的代码注掉后尾巴就不晃了。

第八步，触发器编辑

掉头发的部分终于写完了，接下来是愉快的设计触发器时间了。这次的高级触发器入门门槛就很低了，不需要太复杂的逻辑，基本上抓日志然后使用“通用JSON操作”发请求就好。

图中正则表达式那里别抄，请换成正确的正则表达式！对于高级触发器不熟悉的小伙伴可以看我同系列往期教程。摇尾巴的那篇讲的还是蛮细的。

第九步，开直播

打开我们好用的哔哩哔哩直播姬，点击左侧“素材”，选择浏览器：

来源命名随便输入。URL写你浏览器内能访问到的链接就可以。宽度高度自己调下，模型是能自适应的，只要不大的离谱都十分清晰。自定义CSS可以默认，也可以清空，不碍事的。点确定之后可以挪移调整位置。

如果想调整大小的话不建议直接拖动那个方框，会失真，变得很模糊。请鼠标移动到页面左上方，点击“Live2D”旁的编辑按钮，以此来调整页面大小。

执行触发器，观察一下角色的衣服。有变化，很成功。

当Live2D突然收不到后台的信号时，可以在直播姬素材页面Live2D的编辑窗口点击刷新当前页面缓存。效果同使用浏览器时的刷新按钮，多数情况下会恢复正常。

完结撒花~新年快乐

附件，java代码

java代码（maven构建项目、springboot框架）（只贴了websocket相关的部分）：

Chat.java

Config.java

再贴一小段pom.xml

别的就是编辑器、java、Maven和springboot基本功了吧，如果遇上其他我能提供帮助的问题也请私信或留言~