前言(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#人生第一次#

结尾(后续更新更强的配置看板娘~)

以上就是今天要讲的内容,更多骚操作请自行百度,后续研究更强大功能再更新教程,就到这里了,告辞~

Logo

前往低代码交流专区

更多推荐