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

最新推荐文章于 2023-09-18 15:01:29 发布

仰望星空的sun

最新推荐文章于 2023-09-18 15:01:29 发布

阅读量3.1k

点赞数 2

分类专栏： Live2D网页看板娘

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

版权

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

5 篇文章 6 订阅

订阅专栏

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

Live2D(WebSDK 4.X)网页看板娘设置（一）
live2d（Web SDK 4.x）Web看板娘进阶
这篇文章的操作内容已经更新到官方最新的SDK，但视频还未及时更新，由于新版与旧版大多是目录结构上的差异，所以影响并不大

上一期主要讲了官方的Demo的修改方法，导入自己的模型文件并导出编译后的js脚本。
但是由于我们用的是官方Demo，人物的交互方式并不符合我们要求，而且页面布局也有问题。
本期就解决部分交互问题和页面布局。

本期所做的修改请一定要使用官方提供的人物模型进行测试

1. Typescript源文件修改

1.1修改过程中涉及的文件（src内的）

文件名	作用
Demo\src\lappdefine.ts	主要用来改变加载的模型文件
Demo\src\lappdelegate.ts	这个文件我们修改的比较多，将网页的各种事件传递给模型加载器，负责人机交互的功能
Demo\src\lappview.ts	主要是将鼠标坐标转为模型核心驱动需要的坐标的，也可以对一些事件进行更有针对性的定制

1.2 去掉Demo中不需要的背景图案和切换模型的按钮

demo中的模型占据了整个网页正中央，而且右上角还带有齿轮切换标志，直接作为看板娘是肯定不行的啦，下面来说一下如何去掉背景图片和齿轮图案。我们找到Sample\TypeScript\Demo\src\lappview.ts文件，定位至以下位置，将我们不需要的功能注释掉。

initializeSprite()函数

  /**
     * 执行图像初始化
     */
    public initializeSprite(): void
    {
        let width: number = canvas.width;
        let height: number = canvas.height;

        let textureManager = LAppDelegate.getInstance().getTextureManager();
        const resourcesPath = LAppDefine.ResourcesPath;
        let imageName: string = "";
        //注释掉所有图片加载方法
    /** 
        // 背景画像初期化
        imageName = LAppDefine.BackImageName;
        // 创建回调函数，因为它是异步的
        let initBackGroundTexture = (textureInfo: TextureInfo): void =>
        {
            let x: number = width * 0.5;
            let y: number = height * 0.5;
            let fwidth = textureInfo.width * 2.0;
            let fheight = height * 0.95;
            this._back = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
        };
         //将背景图片的注释掉
        textureManager.createTextureFromPngFile(resourcesPath + imageName, false, initBackGroundTexture);
        // 歯車画像初期化
        imageName = LAppDefine.GearImageName;
        let initGearTexture = (textureInfo: TextureInfo): void =>
        {
            let x = width - textureInfo.width * 0.5;
            let y = height - textureInfo.height * 0.5;
            let fwidth = textureInfo.width;
            let fheight = textureInfo.height;
            this._gear = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
        };
        textureManager.createTextureFromPngFile(resourcesPath + imageName, false, initGearTexture);
*/
        -------
        省略其他代码
        -------
    }

onTouchesEnded函数

public onTouchesEnded(pointX: number, pointY: number): void
    {
        // 触摸结束
        let live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
        live2DManager.onDrag(0.0, 0.0);
        {
            let x: number = this._deviceToScreen.transformX(this._touchManager.getX()); // 論理座標変換した座標を取得。
            let y: number = this._deviceToScreen.transformY(this._touchManager.getY()); // 論理座標変化した座標を取得。
            if(LAppDefine.DebugTouchLogEnable)
            {
                LAppPal.printLog("[APP]touchesEnded x: {0} y: {1}", x, y);
            }
            live2DManager.onTap(x, y);
          /*
            // 点击了齿轮，调用live2D管理器切换人物模型
            if(this._gear.isHit(pointX, pointY))
            {
                live2DManager.nextScene();
            }
          */
        }
    }

修改完毕后再次编译打开就会发现背景图片和齿轮图案没了，但是整个页面都是黑色的。
接下来把背景调整成透明的。
找到Sample\TypeScript\Demo\src\lappdelegate.ts的run函数

 /**
     * 実行処理。
     */
    public run(): void
    {
        // メインループ
        let loop = () =>
        {
            // インスタンスの有無の確認
            if(s_instance == null)
            { return;}
            // 時間更新
            LAppPal.updateTime();
            
            // 画面の初期化
            //这里时初始化背景的，四个参数分别是 r g b a
            //原本的参数是0，0，0，1
            //我们把它改成0，0，0，0
            gl.clearColor(0.0, 0.0, 0.0, 0.0);
            ----------------------
                    省略.....
            ----------------------
        };
        loop();
    }

再次编译查看应该就修改成功了。修改完背景后，我们修改模型在页面中的布局。
整个布局是复制的大佬Github中的布局文件：
适用于旧版模型的Live2D项目
我们这里把他的代码抄过来：
项目下载下来后我们首先把live2d文件夹拷贝到我们的项目中，并把该文件夹里的js/live2d.js（这个其实就是我们编译后的bundle.js，好像还有一个live2d相关的核心js文件，有的话一并删除）文件删除
接下来用文本编辑器打开**demo.html.**将相关css和js内容引入到我们项目中的html页面内

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Live2D！把可爱的看板娘扑捉到你的博客去吧！</title>
    <link rel="stylesheet" href="/live2d/css/live2d.css" />
</head>
<body>

<!-- 这一段直接拷贝过去就行，id和class如果要自行修改的话，将刚才复制的live2d内的js和css文件的相关内容也进行修改 -->
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div>

<!--引入相关js脚本-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
    var message_Path = '/live2d/'
   
    //这个home_path可要可不要
    var home_Path = 'https://haremu.com/'

</script>
<!--这个就不要引用了，我们刚才删除了-->
<script type="text/javascript" src="/live2d/js/live2d.js"></script>

<script type="text/javascript" src="/live2d/js/message.js"></script>

<!--这个也没用，不需要复制过来-->
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>
</body>
</html>

然后打开【Samples\TypeScript\Demo\src\lappdelegate.ts】找到initialize() 函数并删除下面的代码：

 // キャンバスの作成
    canvas = document.createElement('canvas');
    canvas.width = LAppDefine.RenderTargetWidth;
    canvas.height = LAppDefine.RenderTargetHeight;
	-------
	// キャンバスを DOM に追加
    document.body.appendChild(canvas);

删除后加入以下内容：

//这里时获取html页面里的canvas元素的，id值需要根据实际情况变动
canvas = <HTMLCanvasElement>document.getElementById("live2d");

这一步做完后再次编译运行，就能在浏览器左下角看到我们的看板娘了，但是这时会发现我们的看板娘太小了。
接下来就来进行放大操作
打开Framework\math\cubismmodelmatrix.ts文件

  /**
         * 横幅を設定
         *
         * @param w 横幅
         */
        public setWidth(w: number): void
        {
            const scaleX: number = w / this._width;
            const scaleY: number = scaleX;
            //先放大到二倍试试，想放大多少倍在后面乘以相应倍率就行了
            this.scale(scaleX*2, scaleY*2);
        }
        /**
         * 縦幅を設定
         * @param h 縦幅
         */
        public setHeight(h: number): void
        {
            const scaleX: number = h / this._height;
            const scaleY: number = scaleX;
            //这里也是
            this.scale(scaleX*2, scaleY*2);
        }

进行到这一步，整个看板娘的布局就搞定了。接下来是交互问题，官方的鼠标交互方式是按下鼠标人物才会跟随，而我们要的是一直跟随鼠标移动。
打开Sample\TypeScript\Demo\src\lappdelegate.ts 文件的**initialize()**函数内添加以下内容：

public initialize(): boolean
    {
        // キャンバスの取得
        
        //注意！这里时获取html页面里的canvas元素的，id值需要根据实际情况变动
        canvas = <HTMLCanvasElement>document.getElementById("live2d");
       
        //添加全局鼠标移动事件监控
         document.addEventListener("mousemove",function(e){
          
            if(!LAppDelegate.getInstance()._view)
            {
                LAppPal.printLog("view notfound");
                return;
            }
          
       		//这里id的值与上方的 cavans 变量保持一致
            let rect =  document.getElementById("live2d").getBoundingClientRect();
            let posX: number = e.clientX -rect.left;
            let posY: number = e.clientY - rect.top ;
           // console.log("onMouseMoved: gate文件中posY值为： 【"+posY+"】  canvas的top距离为："+rect.top);
            LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
            
        },false);

        //在这里加上鼠标离开浏览器后，一切归位
        document.addEventListener("mouseout",function(e){
            //鼠标离开document后，将其位置置为（0，0）  
            let live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
            live2DManager.onDrag(0.0, 0.0);
        },false);
         //添加鼠标点击事件
      //监听cavas的鼠标点击事件,如果你希望在鼠标点击页面元素后
      //看板娘不在看向鼠标，直到你再次移动鼠标，把监听事件对象从canvas换成document
      canvas.addEventListener("click",function(e){
		  if(!LAppDelegate.getInstance()._view)
          {
              LAppPal.printMessage("view notfound");
              return;
          }
          let rect =  canvas.getBoundingClientRect();
          let posX: number = e.clientX -rect.left;
          let posY: number = e.clientY - rect.top ;
         // console.log("onMouseMoved: gate文件中posY值为： 【"+posY+"】  canvas的top距离为："+rect.top);
         //其实就是照抄上面的，把下面两行代码加上
          LAppDelegate.getInstance()._view.onTouchesBegan(posX, posY);
          LAppDelegate.getInstance()._view.onTouchesEnded(posX, posY);
      },false);
		-----------------------------------------
		         省略...........
		-----------------------------------------
    }