一、准备工作

1.1下载并安装工具

#所有工具软件和步骤均按照参考手册来准备的,可用类似软件替代
#具体安装方式自行百度

#1.Live2D Cubism SDK for Web
下载地址:[官方SDK下载链接](https://www.live2d.com/download/cubism-sdk/)

#2.安装Node.js
下载地址:[Node.js](https://nodejs.org/en/download/)

#3.安装TypeScript
安装方式:用nodejs带的npm来安装,命令: npm install -g typescript

#4.安装Visual Studio Code
下载地址:[官网下载](https://code.visualstudio.com/Download)

#5.为Visual Studio Code安装Live Serve r和 Debugger for Chrome插件然后重启软件

1.2安装npm依赖包

#解压官方SDK包,进入Demo目录(CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo)所在的位置
#在此处使用命令行工具(cmd),执行下面的命令 
npm install 
#等待执行完毕后即可进入下一步。如过有错,试试管理员模式的cmd或者powershell
#如果还是报错,类似 rollbackFailedOptional这样的,可以尝试使用国内代理
npm config rm proxy
npm config rm https-proxy
#然后使用淘宝的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
#等待加载完毕后就可以使用cnpm命令了,然后在SDK解压包处使用下面命令代替npm install
cnpm install

1.3构件SDK项目

1.打开VScode,file -> opne folder 选择你自己解压的SDK的目录

2.然后在上边的菜单栏上找到 Terminal -》 Run Build Tstk ,之后找到  npm :build - Samples/Typescript/Demo。 

3.点击后等待打包完成。完成之后,会在Sample\TypeScript\Demo文件夹下生成dist文件夹
里面是编译生成的bundle.js文件,index.html中会用到。

4.打包完毕,接下来测试一下,能自己启动服务器的话,可以把这个项目放进去使用。
没有的话就使用安装的live server。
启动后会弹出浏览器,找到项目中的进入Sample->TypeScript->Demo,进入即可。

二、Typescript源文件修改

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

demo中的模型占据了整个网页正中央,而且右上角还带有齿轮切换标志,直接作为看板娘是肯定不行的啦,下面来说一下如何去掉背景图片和齿轮图案。我们找到SampleTypeScriptDemosrclappview.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();
            }
          */
        }
    }

修改完毕后再次编译打开就会发现背景图片和齿轮图案没了,但是整个页面都是黑色的。

2.2把背景调整成透明的

找到SampleTypeScriptDemosrclappdelegate.tsrun函数

/**
     * 実行処理。
     */
    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中的布局文件。

3.1文件拷贝

我们这里把他的代码抄过来:适用于旧版模型的Live2D项目。下载下来后。我们首先把live2d文件夹拷贝到我们的项目中,并把该文件夹里的js/live2d.js文件以及model文件夹删除。

3.2引入布局内容

用文本编辑器打开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/'
    var home_Path = 'https://haremu.com/'

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

</body>
</html>

然后打开【SamplesTypeScriptDemosrclappdelegate.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");

3.3放大操作

这一步做完后再次编译运行,就能在浏览器左下角看到我们的看板娘了,但是这时会发现我们的看板娘太小了。

打开Frameworkmathcubismmodelmatrix.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);
        }

3.4交互调整

进行到这一步,整个看板娘的布局就搞定了。接下来是交互问题,官方的鼠标交互方式是按下鼠标人物才会跟随,而我们要的是一直跟随鼠标移动。

打开SampleTypeScriptDemosrclappdelegate.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);
        -----------------------------------------
                 省略...........
        -----------------------------------------
    }

还是这个函数体内,把else里的内容删了

if(supportTouch){
   // タッチ関連コールバック関数登録
   //这个好像是手机上面的触摸事件
   canvas.ontouchstart = onTouchBegan;
   canvas.ontouchmove = onTouchMoved;
   canvas.ontouchend = onTouchEnded;
   canvas.ontouchcancel = onTouchCancel;
}else{
//将这个分支部分全部删除
//由于我们已经添加了鼠标点击事件了,所以把官方的canvas上注册的事件给删了,方便后期调试代码
}

四、将看板娘移植至我们的主页

4.1head代码移植

在主页代码的head部分移入以下代码,并将其中的非绝对地址修改为绝对地址。

<link rel="stylesheet" href="绝对地址CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo/live2d/css/live2d.css" />
  <style>
    html, body {
        margin: 0;
    }
  </style>
  <!-- Pollyfill script -->
  <script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
  <!-- Live2DCubismCore script -->
  <script src = "绝对地址/CubismSdkForWeb-4-r.1/Core/live2dcubismcore.js"></script>
  <!-- Build script -->
  <script src = "绝对地址/CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo/dist/bundle.js"></script>

4.2body代码移植

在主页的body部分移入以下代码。并将其中的非绝对地址改为绝对地址。

<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>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
    var message_Path = '绝对地址/CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo/live2d/'
    var home_Path = '你的主页'
</script>
<script type="text/javascript" src="绝对地址/CubismSdkForWeb-4-r.1/Samples/TypeScript/Demo/live2d/js/message.js"></script>
</script>

4.3文件拷贝

将CubismSdkForWeb-4-r.1/Samples/下的Resources文件夹拷贝至主页的根目录。

本教程转改自B站UP主“仰望星空的sun”的《给你的网站加上LIVE2D看板娘》。
主页:https://space.bilibili.com/42800229?spm_id_from=333.788.b_765f7570696e666f.1
B站图文教程:https://www.bilibili.com/read/cv4812803
CODN图文教程:https://blog.csdn.net/qq_37735413/article/details/104769280

本教程遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

Last modification:August 6th, 2020 at 05:07 am
如果觉得我的文章对你有用,请随意赞赏