Vue看板娘教程1.0
Live2D看板娘
前言(PS:本教程使用的Vue项目)
接上一篇简单版的Live2D看板娘的教程,这次使用高级一点点的,花里胡哨的还有很多,可自行百度,简直眼花缭乱,我这也是刚研究的,后面还搞出什么花样了,再发后续。。。好了好了,步入正题吧,开肝~
一、下载文件
要玩看板娘,需要一些写好的资源文件,下载地址我提供我的
百度网盘链接:https://pan.baidu.com/s/17BCwplSrAPDUc9zlEVgiyA
提取码: 5418
也可以扫下面这个二维码
二、使用步骤
1.引入文件
将下载好的文件放入到项目目录下的static文件夹下,没有该文件夹的放到与index.html同级的存放静态资源文件目录下如public下。
2.引入js
将所需的js在index.html页面引入即可,注意js的路径,如果有问题得改成你自己的路径,不要犯这种傻哦:
<!-- 看板娘 -->
<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>
3.修改app.vue
将如下代码写入app.vue中,具体参数也写在里面了:
export default {
name: 'App',
/*看板娘初始化
参数说明
model 模型的配置
json 文件资源路径,可以支持网络路径,此处使用的是相对路径
scale 模型缩放系数
display 模型布局
position 位置
width 宽度
height 高度
hOffset 水平偏移量
vOffset 垂直偏移量
mobile 移动端配置
show 显示/隐藏
scale 缩放比例
react 模型矩形框样式
opacity 透明度
opacityDefault 默认透明度
opacityOnHover 鼠标悬浮透明度
*/
created() {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: '../static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
tagMode: false,
debug: false,
model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' },
display: { position: 'left', width: 350, height: 800 }, //调整大小,和位置
mobile: { show: true }, //要不要盯着你的鼠标看
log: false,
})
}, 1000)
}
}
4.如何换模型?
如果要该换模型配置的话,也是可以更改的。如下图所示:
更换模型的效果
如下图:
这里我只是简单换了一下模型,文件里面每一个live2d-widget-model-开头的都是一个模型文件,自行去选择。
5.如何换语音?
没错,看板娘是由很多功能的!现在接触的只是冰山一角,现在截图只能看见换装换模型了,其实还有当你点击人物时。模型会有动作,语音。更nb得还有导航,截图,聊天等许多强大功能都可以开发出来。只是实力不允许啊~~ 反正我是不会,到后续慢慢研究,看能不能捣鼓出来,再跟大家分享~
好了,废话说了一大堆,下面开始正题,,,
打开你想要更改的模型文件,比如:
如上图所示,替换成自己的mp3文件即可,不过也可以试试不用mp3格式的其他音频文件看行不行,我就没试了,可自行尝试。。。
下面看下老婆的声音趴~~
辰鬼丫 - 看板娘效果 2020-08-24 19-44-07#人生第一次#
结尾(后续更新更强的配置看板娘~)
以上就是今天要讲的内容,更多骚操作请自行百度,后续研究更强大功能再更新教程,就到这里了,告辞~