Bakajzon's House

笨蛋救助站

0%

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

发表于 更新于 分类于

前言

哪个男孩不想要一个自己的看板娘呢？

老早听说了live2d-widget这个项目，捣鼓了半天。。。
为了帮助大家少走弯路，我就把这篇博客挂这儿了

正文

准备

首先你要有一台静态资源服务器或CDN，或者可以白嫖JSDelivr。
下面仅介绍Github + JSDelivr的方式：

1. 创建脚本仓库

fork live2d-widget 仓库

2. 创建模型仓库

新建Github仓库，名字随意（比如live2d-models）

配置

3. 编辑脚本仓库

进入刚 fork 的仓库

  • 按.或将地址栏的github.com换成github.dev（官方）或github1s.com（国内非官方）
  • clone 下来本地修改

打开autoload.js，将

1
2
3
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
......
	cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"

这两行替换为
1
2
3
const live2d_path = "https://cdn.jsdelivr.net/gh/<yourname>/live2d-widget@master/";
......
	cdnPath: "https://cdn.jsdelivr.net/gh/<yourname>/<yourmodelreponame>@master/"

注意：末尾斜杠/不能丢
示例：https://cdn.jsdelivr.net/gh/bakajzon/live2d-widget@master/autoload.js
可参照这里

保存，提交！

  • 在线

  • 本地

    1
    2
    3
    git add .
    git commit -m '<message>'
    git push

    什么，你没有git？: 用<github1s.com>吧

4. 编辑模型仓库

准备一些模型
仿上述方法打开编辑器

模型仓库目录结构：

1
2
3
4
5
6
/model_list.json
/model/
/model/a_model/...
/model/b_model0/...
/model/b_model1/...
/model/anime_c/char_d/...

托！

编辑model_list.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 {
   "models":[
"a_model",
[
  "b_model0",
  "b_model1"
],
"anime_c/char_d"
],
"messages": {
  "这里是A",
  "B，请多指教",
  "Hi~，我是D哦~"
}
 }

格式说明：models中一个元素对一个角色，messages中对应文本元素为该角色出场词。若一个角色有多套模型，则用[]逐个列出（如上述示例的B模型）

保存！提交！

注：JSON格式中，每个文本都要用半角"框起来，元素间的,不能忘，空格不是必须的
可参照这里

最后

5. 插♂入你的网站

  • 自建服务器
    <script src="https://<your website>/<yourjsdir>/autoload.js"></script>
  • JSDelivr CDN
    <script src="https://cdn.jsdelivr.net/gh/<yourname>/live2d-widget@master/autoload.js"></script>

将上述HTML代码放到你的网站<head>中就好啦！

可参照这里

展示

智乃酱~AWSL

相关项目

Github:
live2d-widget
我的看板娘
我的模型仓库
Github1s