欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Live2D(Cubism3.x)网页看板娘设置(三)

程序员文章站 2022-04-28 08:37:50
...

上期教程

本期主要内容

一,完善一下之前没注意到的地方,之前设置好鼠标移动事件,忘了鼠标点击事件也要进行修改了
还是在原来的地方添加代码

二,了解这个模型文件的配置文件,并根据自己需要进行配置

三,修改源码来适应我们的模型文件。

一、完善一下之前没注意到的地方

首先是鼠标点击事件,打开【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上注册的事件给删了,方便后期调试代码
}

二,了解这个模型文件的配置文件

首先我们要认识一下各个文件的作用,进而去进行自定义出我们想要的效果。
Live2D(Cubism3.x)网页看板娘设置(三)
游戏里面提取的一般都是这种构成,最主要的是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 导入自己找的模型文件
  1. moc3文件的文件名必须和其文件夹名相同
  2. 如果感觉自己配置没啥问题的话,仍然加载不出来模型,可以通过浏览器的开发者工具来监控网络请求,看下载链接是否请求是否 被提示【HTTP响应截断】,如果有的话,只能放弃了,再换个模型文件(web前端技术以及live2D都是超级小白,只能放弃这个模型了)
  3. 进行一些编辑后不要不开服务器直接在本机预览,不然会啥都没有。因为浏览器安全问题,配置文件只能通过网络请求来进行加载,如果直接本地请求的话会报同源策略错误
  4. 如果是游戏中或者其他方式提取出来的素材,正常软件打开没问题,放到web里面会加载不了,又排除了上面的问题,原因大部分是因为motion文件夹xxx.motion3.json文件中的TotalSegmentcount 和TotalPoints数量不足,将数值改大点就行。
2.2 配置文件修改

修改配置文件需要模型和官方源码比对来进行修改

将我们自己弄的人物模型使用Cubism 3 Viewer打开 xxx.model3.json文件,然后在左边框找到moc3文件,点击后下边会出现各种参数以及一条线段。同时,打开项目中的【Framework\cubismdefaultparameterid.ts】文件,找到第二行注释下边的内容。
Live2D(Cubism3.x)网页看板娘设置(三)
我们要做的是根据源码常量(黄色方框内)的意思,去与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站审核较慢,等审核完毕后我再把链接加上

感谢各位的支持!

相关标签: Live2D网页看板娘