Live2D看板娘 - 好玩的二次元Html5页面Toys插件

2021-02-01 代码工坊猿宝优质项目

　　本项目分为前端和后端API两部分，分为live2d_demo、live2d_api两个项目，展现效果如图。

Live2D API

项目地址：https://github.com/fghrsh/live2d_api

Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 上使用的后端 API

特性

原生 PHP 开发，无需伪静态，开箱即用
支持模型、皮肤的顺序切换和随机切换
支持单模型单皮肤切换、多组皮肤递归穷举
支持同分组多个模型或多个路径的加载切换

使用

环境要求

PHP 版本 >= 5.2
依赖 PHP 扩展：json

目录结构

│  model_list.json              // 模型列表
│
├─model                         // 模型路径
│  └─GroupName                  // 模组分组
│      └─ModelName              // 模型名称
│
├─add                           // 更新皮肤列表
├─get                           // 获取模型配置
├─rand                          // 随机切换模型
├─rand_textures                 // 随机切换皮肤
├─switch                        // 顺序切换模型
├─switch_textures               // 顺序切换皮肤
└─tools
        modelList.php           // 列出模型列表
        modelTextures.php       // 列出皮肤列表
        name-to-lower.php       // 文件名格式化

添加模型

单模型单皮肤切换
- 单次加载只输出一个皮肤
- 皮肤放在 textures 文件夹，自动识别

│  index.json
│  model.moc
│  textures.cache       // 皮肤列表缓存，自动生成
│
├─motions
│      idle_01.mtn
│      idle_02.mtn
│      idle_03.mtn
│
└─textures
        default-costume.png
        school-costume.png
        winter-costume.png

单模型多组皮肤递归穷举
- 多组皮肤组合模型、穷举组合
- 皮肤文件夹按 texture_XX 命名
- 添加 textures_order.json 列出组合

│  index.json
│  model.moc
│  textures.cache
│  textures_order.json
│
├─motions
│      idle_01.mtn
│      idle_02.mtn
│      idle_03.mtn
│
├─texture_00
│      00.png
│
├─texture_01
│      00.png
│      01.png
│      02.png
│
├─texture_02
│      00.png
│      01.png
│      02.png
│
└─texture_03
       00.png
       01.png

textures_order.json

[
    ["texture_00"],
    ["texture_01","texture_02"],
    ["texture_03"]
]

textures.cache

[
    ["texture_00/00.png","texture_01/00.png","texture_02/00.png","texture_03/00.png"],
    ["texture_00/00.png","texture_01/00.png","texture_02/00.png","texture_03/01.png"],
    ["texture_00/00.png","texture_01/01.png","texture_02/01.png","texture_03/00.png"],
    ["texture_00/00.png","texture_01/01.png","texture_02/01.png","texture_03/01.png"],
    ["texture_00/00.png","texture_01/02.png","texture_02/02.png","texture_03/00.png"],
    ["texture_00/00.png","texture_01/02.png","texture_02/02.png","texture_03/01.png"]
]

同分组多个模型或多个路径切换
- 修改 model_list.json 添加多个模型

│
├─model
│  ├─Group1
│  │  ├─Model1
│  │  │      index.json
│  │  │
│  │  └─Model2
│  │          index.json
│  │
│  ├─Group2
│  │  └─Model1
│  │          index.json
│  │
│  └─GroupName
│     └─ModelName
│          │  index.json
│          │  model.moc
│          │
│          ├─motions
│          └─textures
│

model_list.json

{
    "models": [
        "GroupName/ModelName",
        [
            "Group1/Model1",
            "Group1/Model2",
            "Group2/Model1"
        ]
    ],
    "messages": [
        "Example 1",
        "Example 2"
    ]
}

接口用法

/add/ - 检测新增皮肤并更新缓存列表
/get/?id=1-23 获取分组 1 的第 23 号皮肤
/rand/?id=1 根据上一分组随机切换
/switch/?id=1 根据上一分组顺序切换
/rand_textures/?id=1-23 根据上一皮肤随机切换同分组其他皮肤
/switch_textures/?id=1-23 根据上一皮肤顺序切换同分组其他皮肤

版权声明

(>▽<) 都看到这了，点个 Star 吧 ~

API 内所有模型版权均属于原作者，仅供研究学习，不得用于商业用途

Live2D demo

项目地址：https://github.com/fghrsh/live2d_demo

Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码

特性

基于 API 加载模型，支持定制提示语
增加参数设置一键定制看板娘，易用性++
增加看板娘样式设置，可直接设置宽高度等
支持多种一言接口，基于 JQuery UI 实现拖拽

使用

目录结构

│  demo1-default.html       // 常规引用 Demo
│  demo2-autoload.html      // autoload.js Demo
│  demo3-waifu-tips.html    // 内置 waifu-tips Demo
│
└─assets
        autoload.js                     // 自动异步加载
        flat-ui-icons-regular.eot       // Flat UI 字体
        flat-ui-icons-regular.svg       // Flat UI 字体
        flat-ui-icons-regular.ttf       // Flat UI 字体
        flat-ui-icons-regular.woff      // Flat UI 字体
        live2d.js                       // Live2D 核心
        waifu-tips.js                   // Live2D 看板娘 扩展
        waifu-tips.json                 // Live2D 看板娘 提示语
        waifu.css                       // Live2D 看板娘 样式表

食用方法

依赖类库
- JQuery (waifu-tips.js)
- JQuery UI (仅实现 拖拽效果 需要)
常规方式引入
1. 在 </head> 前引入 waifu.css 样式表
2. 在 </body> 前引入 waifu-tips.js 和 live2d.js
3. 在 </body> 前插入初始化 JS，可在初始化前设置参数

<html>
<head>

        · · ·   · · ·

    <link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>
</head>
<body>

        · · ·   · · ·

    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" 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="path/to/waifu-tips.js"></script>
    <script src="path/to/live2d.js"></script>
    
    <script type="text/javascript">
        live2d_settings['modelId'] = 1;
        live2d_settings['modelTexturesId'] = 87;
    	initModel("https://www.example.com/path/to/waifu-tips.json")
    </script>
</body>
</html>

autoload.js 引入
1. 在 </body> 前引入 autoload.js
2. 修改 autoload.js 文件路径，可在初始化前设置参数

    · · ·   · · ·
    <script src="path/to/autoload.js"></script>
</body>
</html>

try {
    · · ·   · · ·
    live2d_settings['modelId'] = 1;
    live2d_settings['modelTexturesId'] = 87;
    initModel('https://www.example.com/path/to/waifu-tips.json');
} catch(err) { console.log('[Error] JQuery is not defined.') }

定制属于你的看板娘
- 修改 waifu-tips.js 顶部的设置参数 (或初始化前设置
- 修改 waifu-tips.json，定制看板娘提示语，打造专属看板娘

设置参数

Tips： waifu-tips.js 已自带默认参数，如无特殊要求可跳过

后端接口
- live2d_settings['modelAPI']
  看板娘 API 地址，默认值 '//live2d.fghrsh.net/api/'
- live2d_settings['tipsMessage']
  提示语读取路径，默认值 'waifu-tips.json' (一般在 initModel 时指定)
- live2d_settings['hitokotoAPI']
  一言 API 接口，可选 'lwl12.com'，'hitokoto.cn'，'jinrishici.com' (古诗词)
默认模型
- live2d_settings['modelId']
  默认模型(分组) ID，可在 Demo 页 [F12] 呼出 控制台(Console) 找到
- live2d_settings['modelTexturesId']
  默认材质(模型) ID，可在 Demo 页 [F12] 呼出 控制台(Console) 找到
工具栏设置
- live2d_settings['showToolMenu']，显示工具栏， true | false
- live2d_settings['canCloseLive2d']，关闭看板娘按钮，true | false
- live2d_settings['canSwitchModel']，切换模型按钮， true | false
- live2d_settings['canSwitchTextures']，切换材质按钮， true | false
- live2d_settings['canSwitchHitokoto']，切换一言按钮， true | false
- live2d_settings['canTakeScreenshot']，看板娘截图按钮，true | false
- live2d_settings['canTurnToHomePage']，返回首页按钮， true | false
- live2d_settings['canTurnToAboutPage']，跳转关于页按钮，true | false
模型切换模式
- live2d_settings['modelStorage']，记录 ID (刷新后恢复)，true | false
- live2d_settings['modelRandMode']，模型切换，可选 'rand' (随机) | 'switch' (顺序)
- live2d_settings['modelTexturesRandMode']，材质切换，可选 'rand' | 'switch'
提示消息选项
- live2d_settings['showHitokoto']，空闲时一言，true | false
- live2d_settings['showF12Status']，控制台显示加载状态，true | false
- live2d_settings['showF12Message']，提示消息输出到控制台，true | false
- live2d_settings['showF12OpenMsg']，控制台被打开触发提醒，true | false
- live2d_settings['showCopyMessage']，内容被复制触发提醒，true | false
- live2d_settings['showWelcomeMessage']，进入面页时显示欢迎语，true | false
看板娘样式设置
- live2d_settings['waifuSize']，看板娘大小，例如 '280x250'，'600x535'
- live2d_settings['waifuTipsSize']，提示框大小，例如 '250x70'，'570x150'
- live2d_settings['waifuFontSize']，提示框字体，例如 '12px'，'30px'
- live2d_settings['waifuToolFont']，工具栏字体，例如 '14px'，'36px'
- live2d_settings['waifuToolLine']，工具栏行高，例如 '20px'，'36px'
- live2d_settings['waifuToolTop']，工具栏顶部边距，例如 '0px'，'-60px'
- live2d_settings['waifuMinWidth']
  面页小于指定宽度隐藏看板娘，例如 'disable' (停用)，'768px'
- live2d_settings['waifuEdgeSide']
  看板娘贴边方向，例如 'left:0' (靠左 0px)，'right:30' (靠右 30px)
- live2d_settings['waifuDraggable']
  拖拽样式，可选 'disable' (禁用)，'axis-x' (只能水平拖拽)，'unlimited' (自由拖拽)
- live2d_settings['waifuDraggableRevert']，松开鼠标还原拖拽位置，true | false
其他杂项设置
- live2d_settings['l2dVersion']，当前版本 (无需修改)
- live2d_settings['l2dVerDate']，更新日期 (无需修改)
- live2d_settings['homePageUrl']，首页地址，可选 'auto' (自动)，'{URL 网址}'
- live2d_settings['aboutPageUrl']，关于页地址，'{URL 网址}'
- live2d_settings['screenshotCaptureName']，看板娘截图文件名，例如 'live2d.png'

定制提示语

Tips： waifu-tips.json 已自带默认提示语，如无特殊要求可跳过

"waifu" 系统提示
- "console_open_msg" 控制台被打开提醒（支持多句随机）
- "copy_message" 内容被复制触发提醒（支持多句随机）
- "screenshot_message" 看板娘截图提示语（支持多句随机）
- "hidden_message" 看板娘隐藏提示语（支持多句随机）
- "load_rand_textures" 随机材质提示语（暂不支持多句）
- "hour_tips" 时间段欢迎语（支持多句随机）
- "referrer_message" 请求来源欢迎语（不支持多句）
- "referrer_hostname" 请求来源自定义名称（根据 host，支持多句随机）
- "model_message" 模型切换欢迎语（根据模型 ID，支持多句随机）
- "hitokoto_api_message"，一言 API 输出模板（不支持多句随机）
"mouseover" 鼠标触发提示（根据 CSS 选择器，支持多句随机）
"click" 鼠标点击触发提示（根据 CSS 选择器，支持多句随机）
"seasons" 节日提示（日期段，支持多句随机）

分享到：

响应式简洁大气红色文章资讯网站

简洁机械器材企业公司官网模板源码响应式适合Seo

简洁医药科研企业公司官网模板源码响应式适合Seo

响应式时尚大气图片展示文章资讯自适应站点模板

Live2D看板娘 - 好玩的二次元Html5页面Toys插件

Live2D API

特性

使用

环境要求

目录结构

添加模型

接口用法

版权声明

Live2D demo

特性

使用

目录结构

食用方法

设置参数

定制提示语

发表评论取消回复

升级VIP会员

Live2D API

特性

使用

环境要求

目录结构

添加模型

接口用法

版权声明

Live2D demo

特性

使用

目录结构

食用方法

设置参数

定制提示语

相关推荐

发表评论 取消回复

升级VIP会员

发表评论取消回复