Live2D(Cubism3.x)网页看板娘设置（三）
本期主要内容
一，完善一下之前没注意到的地方，之前设置好鼠标移动事件，忘了鼠标点击事件也要进行修改了
还是在原来的地方添加代码
二，了解这个模型文件的配置文件，并根据自己需要进行配置
三，修改源码来适应我们的模型文件。
一、完善一下之前没注意到的地方
首先是鼠标点击事件，打开【Sample\TypeScript\Demo\src\lappdelegate.ts】找到initialize()，在该函数中添加
//添加鼠标点击事件
//监听全局的鼠标点击事件
document.addEventListener("click",function(e){
if(!LAppDelegate.getInstance()._view){
LAppPal.printLog("view notfound");
return;
}
let rect = canvas.getBoundingClientRect();
let posX: number = e.clientX -rect.left;
let posY: number = e.clientY - rect.top ;
//其实就是照抄上面的，把下面两行代码加上
LAppDelegate.getInstance()._view.onTouchesBegan(posX, posY);
LAppDelegate.getInstance()._view.onTouchesEnded(posX, posY);
},false);
还是这个函数体内，把else里的内容删了
if(supportTouch){
// タッチ関連コールバック関数登録
//这个好像是手机上面的触摸事件
canvas.ontouchstart = onTouchBegan;
canvas.ontouchmove = onTouchMoved;
canvas.ontouchend = onTouchEnded;
canvas.ontouchcancel = onTouchCancel;
}else{
//将这个分支部分全部删除
//由于我们已经添加了鼠标点击事件了，所以把官方的canvas上注册的事件给删了，方便后期调试代码
}
二，了解这个模型文件的配置文件
首先我们要认识一下各个文件的作用，进而去进行自定义出我们想要的效果。
游戏里面提取的一般都是这种构成，最主要的是motions（动作文件）、textures（贴图）、moc3文件（人物模型文件）、model3.json文件(资源加载管理文件，相当于程序的入口)。我们在进行自定义时，只能修改json结尾的文件。
model3.json文件：
#model3.json文件，负责管理各类要加载的动作，贴图以及人物模型资源
{
"Version": 3,
"FileReferences": {
#模型文件的文件名，不改moc3文件名字不需要改动
"Moc": "l2d18.u.moc3",
#贴图，修改意见同上
"Textures": [
"textures/texture_00.png"
],
#有时模型鬼畜的话，把这句删除了说不定就好了
"Physics": "l2d18.u.physics3.json",
#这里是我们改动的重点，只加载我们喜欢的动作，而不是所有的动作，也就是把想要的动作文件的相对路径和文件名填写到File字段后面
"Motions": {
#这里的数组命名时参照照官方的模型文件来进行修改的。
"Idle":[
#打开网页后，即使没有交互也会有的动作，随机播放
{"File":"motions/Mgirl06_stand.motion3.json"},
{"File":"motions/Mgirl06_weixiao.motion3.json"}
],
"TapBody":[
#点击身体区域时响应的动作
{"File":"motions/Mgirl06_baoxiong.motion3.json"},
{"File":"motions/Mgirl06_lahua.motion3.json"}
]
}
},
"Groups": []
}
motions/xxx.motion3.json文件
#这个文件一般我们不需要动，当软件加载模型能正常加载而放到网页上就什么也没有时再修改
{
"Version": 3,
"Meta": {
#这个会影响到人物动作的持续时间
"Duration": 30,
"Fps": 30.0,
"Loop": true,
"AreBeziersRestricted": true,
"CurveCount": 134,
#当只在网页上加载模型出问题时，再修改相应动作文件的这两个值，适当改大一点就行。
"TotalSegmentCount": 3000,
"TotalPointCount": 6000,
"UserDataCount": 0,
"TotalUserDataSize": 0
},
"Curves": [
{
"Target": "Parameter",
"Id": "PARAM_ANGLE_X",
"Segments": [
......以下省略....
2.1 导入自己找的模型文件
- moc3文件的文件名必须和其文件夹名相同
- 如果感觉自己配置没啥问题的话，仍然加载不出来模型，可以通过浏览器的开发者工具来监控网络请求，看下载链接是否请求是否 被提示【HTTP响应截断】，如果有的话，只能放弃了，再换个模型文件（web前端技术以及live2D都是超级小白，只能放弃这个模型了）
- 进行一些编辑后不要不开服务器直接在本机预览，不然会啥都没有。因为浏览器安全问题，配置文件只能通过网络请求来进行加载，如果直接本地请求的话会报同源策略错误
- 如果是游戏中或者其他方式提取出来的素材，正常软件打开没问题，放到web里面会加载不了，又排除了上面的问题，原因大部分是因为motion文件夹xxx.motion3.json文件中的TotalSegmentcount 和TotalPoints数量不足，将数值改大点就行。
2.2 配置文件修改
修改配置文件需要模型和官方源码比对来进行修改
将我们自己弄的人物模型使用Cubism 3 Viewer打开 xxx.model3.json文件，然后在左边框找到moc3文件，点击后下边会出现各种参数以及一条线段。同时，打开项目中的【Framework\cubismdefaultparameterid.ts】文件，找到第二行注释下边的内容。
我们要做的是根据源码常量（黄色方框内）的意思，去与moc3（黑色方框内）文件的参数进行匹配进而去修改常量的赋值语句。
如果意思上不匹配，那就以常量意思为准，去拖动黑色方框内各个参数的属性值（黑框右边），进而确定哪个参数改变时，人物模型有动作的相应部位或者动作的英文意思符合常量的值，然后按照对应关系修改即可。
有些参数并无实际的英文意思，例如 AngleX，AngleY和AngleZ这三个（必须修改），这三个参数一般是头或者身体扭动（不改变该部位的中心位置，例如头部的只是扭头），上下动和左右动（改变相应部位的中心位置，例如头部是以颈部为圆心动）
我们要修改的一般就是：AngleX,Y,Z，头部，身体和眼珠，因为跟随鼠标这个交互一般只涉及这几项。
这里修改完毕后，导入我们的模型文件（记得xxx.model3.json文件的名字一定要与文件夹名字一样），再次编译项目应该就能观察到人物模型已经可以进行鼠标交互了。
嘛，仅仅是鼠标移动方面的交互肯定不满足我们的需求哒，不能点怎么能行。
想要有点击事件，一定要先在model3.json文件中添加"TapBody"数组和相应的动作文件，配置方法参照官方或者上面的相应json文件，下面演示源码修改
打开【Sample\TypeScript\Demo\src\lapplive2dmanager.ts】找到onTap函数
/**
* 画面をタップした時の処理
*
* @param x 画面のX座標
* @param y 画面のY座標
*/
public onTap(x: number, y: number): void
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]tap point: {x: {0} y: {1}}", x.toFixed(2), y.toFixed(2));
}
//点击事件触发，提供的模型没有hit效果时，可以手动设置点击效果：
for(let i: number = 0; i < this._models.getSize(); i++)
{
if(this._models.at(i).hitTest(LAppDefine.HitAreaNameHead, x, y))//如果点击的是头部
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}]", LAppDefine.HitAreaNameHead);
}
this._models.at(i).setRandomExpression();
}
else if(this._models.at(i).hitTest(LAppDefine.HitAreaNameBody, x, y))//如果点击的是身体
{
if(LAppDefine.DebugLogEnable)
{
LAppPal.printLog("[APP]hit area: [{0}]", LAppDefine.HitAreaNameBody);
}
this._models.at(i).startRandomMotion(LAppDefine.MotionGroupTapBody, LAppDefine.PriorityNormal);
}
//下面的代码是我们要添加的区域判定代码，接到原来的if-else语句后面
else{//当都不是时，我们可以在这里自定义自己的点击触发事件，有效范围为 x[-1,1] y [-1,1] 时
//代表点击的是模型的canvas所在区域
if(x > -1 && x<1&&y<1&&y>-1){
//有效范围为 x[-1,1] y [-1,1]
if(x > -0.20 && x < 0.20 && y>0.20 && y< 0.65){
//这里是头部区域，在下方设置对应表情动作
this._models.at(i).setRandomExpression();
}
if(x > -0.20 && x < 0.20 && y>-1.0 && y< 0.1){
//这里是身体区域，设置对应动作
this._models.at(i).startRandomMotion(LAppDefine.MotionGroupTapBody, LAppDefine.PriorityNormal);
}
}
}
}
}
添加完毕后，再次编译测试，应该就能对点击事件进行交互了。
这时你应该会发现，你的人物头部跟随鼠标时有点鬼畜，下面是一种解决办法
找到【Sample\TypeScript\Demo\src\lappmodel.ts】文件的update函数
//注释是日文翻译过来的，感觉怪怪的，我只对一个模型进行了测试，并不一定适合你的模型，这里面的倍率可能需要自己修改测试比较好
// 拖动更改
// 通过拖动来调整面部方向
this._model.addParameterValueById(this._idParamAngleX, this._dragX*30 ); // 将值加到-30至30
this._model.addParameterValueById(this._idParamAngleY, this._dragY*2);
this._model.addParameterValueById(this._idParamAngleZ, this._dragX * this._dragY * -2);
// 通过拖动来调整身体方向
this._model.addParameterValueById(this._idParamBodyAngleX, this._dragX * 10); // -10から10の値を加える
// 拖动以调整眼睛方向
this._model.addParameterValueById(this._idParamEyeBallX, this._dragX); // -1から1の値を加える
this._model.addParameterValueById(this._idParamEyeBallY, this._dragY);
至此教程全部完结，能力有限，只能修改到这种地步，不过当看板娘问题应该不大（个人觉得）
本期也有相应视频，但因为新冠病毒影响，B站审核较慢，等审核完毕后我再把链接加上
感谢各位的支持！
下一篇： Servlet笔记