vue 看板娘
可直接在 vue 项目中直接引用此包,即可应用看板娘,目前包含不少功能配置。
访问速度快:
https://evgo2017.com/repo/vue-live2d
部署在 github 上:
https://evgo2017.github.io/vue-live2d/page/index.html
npm install vue-live2d
// 在组件中引入
import vueLive2d from 'vue-live2d'
// 组件中的使用方法具体参考 `example/App.vue` 文件
其中包含源码,example/App.vue
为使用示例。
git clone https://github.com/evgo2017/vue-live2d.git
cd ./vue-live2d
npm install
npm run serve
注意 apiPath 是我服务器的地址,提供模型和服装支持,若更新服务地址会在 README.md 说明。
同时此 api 服务是我的 ive2d-static-api 项目,liv2d 静态 API。欢迎使用和 star。
配置项 | 含义 | 类型 | 默认 |
---|---|---|---|
size | 模型宽度和高度 | Number | 255 |
width | 模型宽度 | Number | 0 |
height | 模型高度 | Number | 0 |
apiPath | 更换模型的请求地址 | String | https://evgo2017.com/api/live2d-static-api/indexes |
model | 默认显示的模型,[模型号,服装号] | Array | ['Potion-Maker/Pio', 'school-2017-costume-yello'] |
direction | 模型方位(left 或者 right) | String | left(其他字符串均表示 right) |
tipPosition | 提示框位置(top 或者 bottom) | String | top |
tips | 在触发某些事件时模型说出的话 | Object | 格式查看 /src/src/tips.js |
homePage | 可打开某页面的地址 | String | https://github.com/evgo2017/vue-live2d |
customId | 自定义 id | String | vue-live2d-main |
这三个参数放在一起说,它们都是用来调整模型宽高的。width 只调整宽度,height 只调整高度,size 同时调整宽高为同一值。
优先级:width = height > size。可以说 width 和 height 参数会覆盖 size 参数设置的对应值。
设置 size 是为了减少重新加载模型的次数。
加载模型时是通过请求此 API 地址获得数据,也可自行搭建,进而进一步设置模型。
默认显示的模型,为数组,第一个值代表具体模型编码,第二个值代表该模型的皮肤号。
插件每次切换模型或者换装时候,都会在控制台 console 这此信息,可通过此方便获得自己喜欢的模型信息。
模型方位,仅支持左(left)或者右(right)。
当为 left 时,工具栏会置于左侧,同时鼠标经过模型时,模型会整体向右移动。right 反之。
提示框位置,仅支持上(top)或者下(bottom)。
当为 top 时,提示框会显示在模型区域上方。当为 right 时,提示框会显示在模型区域下方。
在页面上触发某些事件时,模型会说出的话。
注意:此参数只可初始化一次,若使用插件定义的默认值则不要绑定此参数。
插件中只有显示模型的 canvas 必须有 id ,可自定义其 id 值。
此参数是我在尝试一个页面上加载多个模型时增加,可以成功,但通常最初只会显示一个模样,需要手动触发其他模型,同时原本显示的模型成为静态,触发的其他模型变为动态。
比如页面有一个 A 模型,和一个 B 模型。A 正确显示,但 B 只有工具栏等内容。此时手动点击 B 模型的切换模型或者换装,B 模型正确显示,同时 A 模型成为静态,不再随着鼠标移动而动。再次点击 A 模型重复操作同理。
这部分切换应该是与核心库有关,综合考虑不继续完善此功能。
核心库 live2d.min.js
的文件内容,是 Live2D 官网发布的 Live2D_SDK_WEBGL_2.1 SDK 中的live2d.min.js
+ Live2DFramework.js
+ sampleApp1
,以及该库作者代码。库已梳理明白,但库作者未知。
在梳理核心库代码的过程中,我整理了一份从 Framework 到 App 的代码,加载来看没有什么大问题,但剩余工作量仍然较大。
从库代码层次来看:core -> framework -> app -> vue-live2d(看板娘)。vue-live2d 目前属于定制内容。
[1] https://github.com/fghrsh/live2d_demo