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

最新推荐文章于 2024-05-14 09:39:45 发布

仰望星空的sun

最新推荐文章于 2024-05-14 09:39:45 发布

阅读量4.1k

点赞数 2

分类专栏： Live2D网页看板娘

本文链接：https://blog.csdn.net/qq_37735413/article/details/104857940

版权

Live2D网页看板娘专栏收录该内容

5 篇文章 6 订阅

订阅专栏

教程已经更新，如果你是第一次看这个系列的请移步下方链接

Live2D(WebSDK 4.X)网页看板娘设置（一）
live2d（Web SDK 4.x）Web看板娘进阶

本期主要内容

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

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

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

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

首先是鼠标点击事件，打开【Sample\TypeScript\Demo\src\lappdelegate.ts】找到initialize()，在该函数中添加

//添加鼠标点击事件
//监听全局的鼠标点击事件，使用document的话，在用户点击页面时，看板娘会不在看向鼠标，直到再次移动
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\src\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*2 );  // 将值加到-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 * 1);  // -10から10の値を加える

        // 拖动以调整眼睛方向
        this._model.addParameterValueById(this._idParamEyeBallX, this._dragX); // -1から1の値を加える
        this._model.addParameterValueById(this._idParamEyeBallY, this._dragY);

至此教程全部完结，能力有限，只能修改到这种地步，不过当看板娘问题应该不大（个人觉得）

视频也时基于beta2的，视频中修改的源代码的文件名并未改变，只是路径有一小部分有变化

Live2D网页看板娘设置教程(三)

感谢各位的支持！

仰望星空的sun

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
8
评论
Live2D(Cubism3.x)网页看板娘设置（三）

上期教程本期主要内容一，完善一下之前没注意到的地方，之前设置好鼠标移动事件，忘了鼠标点击事件也要进行修改了还是在原来的地方添加代码二，了解这个模型文件的配置文件，并根据自己需要进行配置三，修改源码来适应我们的模型文件。一、完善一下之前没注意到的地方首先是鼠标点击事件，打开【Sample\TypeScript\Demo\src\lappdelegate.ts】找到initiali...
复制链接

扫一扫