Live2D(Cubism3.x)网页看板娘设置（二）
宗政鸿志
教程已经更新，如果你是第一次看这个系列的请移步下方链接
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);
-----------------------------------------
省略...........
-----------------------------------------
}
好了，至此鼠标的交互事件解决一部分了。
附上相关视频：
视频是直接录制的，而且是beta2版本的操作演示，目前文章内容已经更新到最新版本，不一样的代码请以文章为准，并未进行后期处理，里面有错字的地方还请多多包涵
Live2D网页看板娘设置教程(二)
下一期讲导入的自定义模型无法进行交互的问题的解决方案
类似资料：