emmm，类似上图的动画人物
下面看效果图
细作的最爱
效果都看到了，眼睛跟随鼠标聚焦，可以换装，还能换人，能弹出对话框……功能太多不一一介绍了请自行发掘。
下面直接上部署教程：
1.下载这个Demo：https://pan.baidu.com/s/1CkbC1CcEatsyUWrK5gxRmQ
2.解压之后是这样的
Demo解压包
打开demo.html文件查看源代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.2 / Demo</title>
<link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2>
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="assets/waifu-tips.js"></script>
<script src="assets/live2d.js"></script>
<script type="text/javascript">initModel("assets/")</script>
</body>
</html>
3.下面详细说下其中的关键代码：
在head中引用css和js：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
然后body中加入以下代码：
<div class="waifu">
<div class="waifu-tips"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="assets/waifu-tips.js"></script>
<script src="assets/live2d.js"></script>
<script type="text/javascript">initModel("assets/")</script>
以上代码注意assets文件夹的路径，现在默认是和demo.html同级。自己使用的的时候要根据情况修改。
做完了以上部分即可在自己的网站看到Live2D的人物了，但是你可能会发现解压后的文件夹一共加起来才300k左右，怎么可能塞下这么多人物的图片。其实这个demo是引用了第三方的API，每次加载的人物都是从其他网站下载的，这样做有个好处就是可以节省云存储空间，但是缺点却很多：
1.第三方API接口不稳定，随时可能失效；
2.第三方API接口的传输速度未知，可能出现加载慢或者加载不出来的情况。
因此，这里教大家手动自己搭建API，这样自己使用就能够非常稳定迅速了。
1.下载这个素菜包：https://pan.baidu.com/s/1SPUMYTDlLQ7HOOmXdGEd2g
2.解压后更改文件夹名字，尽量精简有意义，这里修改为live2d
，然后放到项目的根目录：
放到项目根目录
3.然后打开assets目录下的waifu-tips.js文件，拉到最后有如下代码：
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'https://api.fghrsh.net/live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'https://api.fghrsh.net/live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'https://api.fghrsh.net/live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
可以看到以上代码有三处使用了API，这里只需要将以上三处的
https://api.fghrsh.net/live2d/修改为刚刚重命名的live2d/即可，即变成如下样式：
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
要注意的是这个api接口文件里面用了PHP，因此需要搭建PHP环境（LNMP或者LAMP）才能运行，（我使用的是PHP7.1完美运行）否则本地搭建的API不生效。
至此，一套完整的本地化Live2D动画程序搭建完成。里面还有其他功能可自行研究。
参考资料：
https://www.fghrsh.net/post/123.html
“Potion Maker” 字样 及 应用内包含的文本、模型、图片、动作数据等
所有权均属于 “药水制作师” 作者 Sinsiroad，仅供研究学习，不得用于商业用途
网友评论