程序员+二次元=出现了看板娘！！！早就在网上看到了看板娘，十分可爱，触到了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
[secret key="102030"] [/secret]经过踩坑，官方目前最新版本为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内的）
| 文件名 | 效果 |
| Demo\src\lappdefine.ts | 更改需要加载的模型文件 |
| Demo\src\lappdelegate.ts | 将网页的各种事件传递给模型加载器，负责人机交互的功能 |
| Demo\src\lappview.ts | 主要是将鼠标坐标转为模型核心驱动需要的坐标的，也可以对一些事件进行更有针对性的定制 |
注意！每次对.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
[secret key="102030"] [/secret]下载解压文件，将里面的所有东西丢进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博客
如有错误，欢迎指教！
感谢大家支持！
原创文章，作者：Rosmontics，如若转载，请注明出处：https://rosmontis.com/archives/2
