Live2d网页看板娘-快把可爱的看板娘放进你的网站吧

程序员+二次元=出现了看板娘！！！早就在网上看到了看板娘，十分可爱，触到了xp。可网上都是引用了旧版Cubism2.0的live2d，不适用新版3.0的live2d模型。且人物单一，来来去去就那几个。怎样将自己老婆放上网站呢？

经过了无数踩坑与实践，用live2d web终于搞出了萌萌的幼刀（柚子社狂喜）！！！！

部分资料来源于https://blog.csdn.net/qq_37735413/article/details/104769280

正文开始

1.准备工作

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.1首先下载live2d官方的Live2D Cubism SDK for Web https://www.live2d.com/en/download/cubism-sdk/download-web/

注意！！！不要点上面的链接！！！！千万不要下最新的sdk！不然到后面的步骤会出现模型无法适配live2d驱动而导致看板娘在网页的位置鬼畜

正解：

下载CubismSdkForWeb-4-r.1，密码：102030

经过踩坑，官方目前最新版本为4-r.2，只有4-r.1才能适配看板娘。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.2安装Visual Studio Code https://code.visualstudio.com/Download

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.3安装Node.js https://nodejs.org/en/download/

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.4安装Visual Studio Code https://code.visualstudio.com/Download

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.开始工程

2.1安装visual studio code插件Live Server和 Debugger for Chrome

2.2在Demo目录下安装npm依赖包

//解压官方SDK包，用管理员模式打开cmd，输入cd 刚解压的sdk包位置/CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo
//按顺序执行
npm install 
//等待执行完毕后即可进入下一步。如果报错，类似 rollbackFailedOptional这样的，可以尝试使用国内代理
npm config rm proxy
npm config rm https-proxy
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

2.3构建SDK提供的项目

命令执行完毕后点击右下角go live，会自动弹出浏览器，进入demo文件夹就可以看到官方sdk里自带的live2d人物了

若npm build过程报错，请删掉文件夹，重新执行npm install

3.修改Demo

3.1sdk包结构

项目根目录
├─ .vscode              # Visual Studio Code 的一些配置文件，用vscode编辑改项目时，以上几个一键操作基本基于这里面的配置
├─ Core                 # Cubism Core 顾名思义，核心库
├─ Framework            #包含渲染和动画功能等的源代码的目录
└─ Samples              #示例项目，我们关注的重点
   ├─ Resources   # 这里面放的是live2D的模型及动作导出的文件
   └─ TypeScript
      └─ Demo           #包含项目的目录
         └─ src         #这里面是ts脚本文件，使用自己的模型时会修改其中的一些文件

3.2 导入自己的模型

3.2.1准备好自己的模型，将所有live2d模型文件放入一个文件夹，并确保文件夹内各个文件与文件夹的名称相同

3.2.3将文件夹移至Sample\Resources文件夹（里面有官方的一些模型，不需要的话可以删掉）

3.2.4用vs打开 Sample\TypeScript\Demo\src\lappdefine.ts文件，找到export const ModelDir（第40行）

// モデル定義---------------------------------------------
// モデルを配置したディレクトリ名の配列
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと
export const ModelDir: string[] = ['Haru', 'Hiyori', 'Mark', 'Natori', 'Rice'];
//将‘=’后的名字删掉，改成你的live2d模型文件夹的名字，例如：
export const ModelDir: string[] = ['xxx'];

3.2.5再次运行run build task，就可以看到自己的live2d小人了

4.Typescript源文件修改

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

注意！每次对.ts文件进行修改，都要再次运行run build task命令！！！

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

我们可以看到，demo中的模型占据了整个页面，并且还带有背景和右上角的齿轮图案，所以现在要去掉这些设定

vs打开Sample\TypeScript\Demo\src\lappview.ts文件，找到initializeSprite()函数，将我们不需要的功能注释掉。（第114行）

  /**
   * 画像の初期化を行う。
   */
  public initializeSprite(): void {
    const width: number = canvas.width;
    const height: number = canvas.height;

    const textureManager = LAppDelegate.getInstance().getTextureManager();
    const resourcesPath = LAppDefine.ResourcesPath;

    let imageName = '';

//从这里开始
/** 
    // 背景画像初期化
    imageName = LAppDefine.BackImageName;

    // 非同期なのでコールバック関数を作成
    const initBackGroundTexture = (textureInfo: TextureInfo): void => {
      const x: number = width * 0.5;
      const y: number = height * 0.5;

      const fwidth = textureInfo.width * 2.0;
      const fheight = height * 0.95;
      this._back = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
    };

    textureManager.createTextureFromPngFile(
      resourcesPath + imageName,
      false,
      initBackGroundTexture
    );

    // 歯車画像初期化
    imageName = LAppDefine.GearImageName;
    const initGearTexture = (textureInfo: TextureInfo): void => {
      const x = width - textureInfo.width * 0.5;
      const y = height - textureInfo.height * 0.5;
      const fwidth = textureInfo.width;
      const fheight = textureInfo.height;
      this._gear = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
    };

    textureManager.createTextureFromPngFile(
      resourcesPath + imageName,
      false,
      initGearTexture
    );
*/
//到这里结束
    // シェーダーを作成
    if (this._programId == null) {
      this._programId = LAppDelegate.getInstance().createShader();
    }
  }

  

找到onTouchesEnded函数,注释掉不需要的功能（第196行）

  public onTouchesEnded(pointX: number, pointY: number): void {
    // タッチ終了
    const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
    live2DManager.onDrag(0.0, 0.0);

    {
      // シングルタップ
      const x: number = this._deviceToScreen.transformX(
        this._touchManager.getX()
      ); // 論理座標変換した座標を取得。
      const y: number = this._deviceToScreen.transformY(
        this._touchManager.getY()
      ); // 論理座標変化した座標を取得。

      if (LAppDefine.DebugTouchLogEnable) {
        LAppPal.printMessage(`[APP]touchesEnded x: ${x} y: ${y}`);
      }
      live2DManager.onTap(x, y);

//这里开始
/* 
      // 歯車にタップしたか
      if (this._gear.isHit(pointX, pointY)) {
        live2DManager.nextScene();
      }
      */

     //结束
    }
  }

运行run build task ，会发现背景图片和齿轮图案没了，但是整个页面都是黑色的

接下来把背景调整成透明的

vs打开Sample\TypeScript\Demo\src\lappdelegate.ts，找到run函数（第133行）

  public run(): void {
    // メインループ
    const loop = (): void => {
      // インスタンスの有無の確認
      if (s_instance == null) {
        return;
      }

      // 時間更新
      LAppPal.updateTime();

      // 画面の初期化
      //这里有四个值，我们将最后一个值1.0改为0.0
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //改为gl.clearColor(0.0, 0.0, 0.0, 0.0);
      

      // 深度テストを有効化
      gl.enable(gl.DEPTH_TEST);

//省略其他代码*****

运行run build task，发现背景变透明了

5.添加live2d驱动（巨坑时候）

这时，为了修改看板娘在页面的布局，增加与用户的交互效果，需要引用大佬制作的live2d驱动

我们引用一下大佬的代码文件：galnetwen/Live2D: 在 Web 上展示 Live2D 吧！ (github.com)

为了防止大家下错版本，亦或是上不去github，这里准备一份

下载，密码：102030

下载解压文件，将里面的所有东西丢进Sample\TypeScript\Demo文件夹里

然后打开live2d文件夹，删除js/live2d.js文件

用VS打开demo.html，将里面的一些代码引入我们的index.html。下面给出已经修改后的index.html文件，可以直接copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=1900">
  <title>TypeScript HTML App</title>

  <!-- 引入live2d.css -->
  <link rel="stylesheet" href="/live2d/css/live2d.css" />
  
  <style>
    html, body {
        margin: 0;
    }
  </style>

  <script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
  <!-- Live2DCubismCore script -->
  <script src = "../../../Core/live2dcubismcore.js"></script>
  <!-- Build script -->
  <script src = "./dist/bundle.js"></script>
</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>
<!-- 引入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://rosmontis.com'
  </script>
//引入看板娘对话文件

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

然后打开Samples\TypeScript\Demo\src\lappdelegate.ts，找到initialize() 函数并 删除下面的代码：（第57行，不知道为什么这个函数好像很难找）

    // キャンバスの作成（58.59.60.61行）
    canvas = document.createElement('canvas');
    canvas.width = LAppDefine.RenderTargetWidth;
    canvas.height = LAppDefine.RenderTargetHeight;

    // キャンバスを DOM に追加（78.79行）
    document.body.appendChild(canvas);

删除后加入以下内容，两个地方都加上

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

这一步做完后再次运行run build task，就应该能在浏览器左下角看到我们的看板娘了

（如果一切正常，能在左下角看到看板娘，点击看板娘有动作并且出现粉红色的对话气泡，说明成功了，请直接看第六步，反之请往下看）

本来你想放在左下角的，这时发现在左上角，什么鬼？打开控制台

报错信息为：Refused to apply style from 'http://127.0.0.1:5500/live2d/css/live2d.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

这种报错有些人会出现，其实是路径错了，我们回到vs，打开index.html，修改css文件的路径（一般是在路径前加个.号就行了）

//我改成这样
<link rel="stylesheet" href="./live2d/css/live2d.css" />

这时候再打开控制台，发现可能又有一个报错

message.json是看板娘的对话文件，在Demo/live2d下，我们将它复制出来，在项目主目录（那里有core，framework等文件夹）新建一个文件夹，重命名为live2d，将message.json丢进去。

6.修改大小以及鼠标交互

此时我们发现看板娘太小了，接下来就来进行放大操作

vs打开Framework\math\cubismmodelmatrix.ts文件，找到setWidth函数（第41行）和setHeight函数（第51行）

/**
     * 横幅を設定
     *
     * @param w 横幅
     */
    public setWidth(w: number): void {
      const scaleX: number = w / this._width;
      const scaleY: number = scaleX;
      //先放大一点五倍试试，根据实际修改放大倍数

      this.scale(scaleX*1.5, scaleY*1.5);
    }

    /**
     * 縦幅を設定
     * @param h 縦幅
     */
    public setHeight(h: number): void {
      const scaleX: number = h / this._height;
      const scaleY: number = scaleX;

      //下面也一样
      this.scale(scaleX*1.5, scaleY*1.5);
    }

运行run build task ，发现看板娘变大啦

接下来是交互问题，官方的鼠标交互方式是按下鼠标人物才会跟随，而我们要的是一直跟随鼠标移动

vs打开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 ;
            LAppDelegate.getInstance()._view.onTouchesBegan(posX, posY);
            LAppDelegate.getInstance()._view.onTouchesEnded(posX, posY);       
            LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
            
        },false);
//结束
    }

//定位到第132行，将else内的内容全部删除
else {
      // マウス関連コールバック関数登録
      canvas.onmousedown = onClickBegan;
      canvas.onmousemove = onMouseMoved;
      canvas.onmouseup = onClickEnded;
    }

printlog出现报错，将其改为printMessage

运行run build task，搞定

这时看板娘的动作就可以随鼠标移动而移动了

7.基本完成！

将live2d项目的整个文件夹丢进服务器，依照index.html引入代码，就可以在网页左下角看到你的看板娘了！！！

至此教程基本结束，欢迎大家在评论区讨论。本文有部分内容参考了(1条消息) Live2D(Cubism3.x)网页看板娘设置（一）_仰望星空的sun的博客-CSDN博客

如有错误，欢迎指教！

感谢大家支持！