下面看效果图
效果都看到了,眼睛跟随鼠标聚焦,可以换装,还能换人,能弹出对话框……功能太多不一一介绍了请自行发掘。
下面直接上部署教程:
1.下载这个Demo:https://pan.baidu.com/s/1CkbC1CcEatsyUWrK5gxRmQ
2.解压之后是这样的
<!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,仅供研究学习,不得用于商业用途