up.md

★•进阶·搭建API•★

已经迫不及待了吧，让我们开始吧！

本API目前为纯静态编写，你可以很轻松地自建API，也可以将其部署在CDN上，无论是云服务器还是虚拟主机都可以轻松搭建...

目录 (੭ˊᵕˋ)੭*ଘ

• 壹·开箱啦
  • ¿?～坑～无处不在！
    • 跨域这位“老朋友”又来了！！！
    • 为什么模型文件404了？明明在这里的！
• 贰·进阶配置
  • List.js
    • 数组characters～存放url
    • tellMoe函数～对应关系
    • moeNum函数～定义分组
  • LAppDefine.js
• ★•叁·添加萌萌哒Live2D模型•★

开箱啦

• 将本项目的源码下载下来，上传到你的服务器根目录，并在html文件中引入以下代码，就可以使用啦！

<script src="https://Your_HostName/api/Live2D/live2d.js"></script>
<script>aLive2D(Model,Width,Height,Position,X,Y,EnableMsg)</script>

• 打开live2d.js将其中的host变量更改为你的主机名(如有端口号，那么端口号也要带)
• 请把上面的代码中的Your_HostName更换为你的主机名(域名或IP地址)，并配置aLive2D函数

¿?～坑～无处不在！

• 跨域这位“老朋友”又来了！！！

为了防止跨域问题，请为服务器添加以下HTTP响应标头
[设置不了的也不是不能用，只是只能在你自己的网站上使用，无法对外提供服务]
，并为服务器启用https访问
[尽量吧，实在启用不了就算了，只是你的api只能被http页面调用]

Access-Control-Allow-Headers: Content-Type, api_key, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *

• 为什么模型文件404了？明明在这里的！

请在服务器中为moc和mtn文件设置正确的Mime-type (Mime类型)，避免莫名其妙的404问题
[没有IIS的管理权？尝试通过根目录的web.config配置(没有就新建一个)，这是一个xml文件，包含当前目录下的IIS配置信息(请Google “web.config添加Mime类型”)]

Mime-type设置如下

moc: application/octet-stream
mtn: application/octet-stream

进阶配置

在开始配置前，让我们认识两个文件吧！

List.js

• List.js用来定义模型列表及分组，指定模型名称与配置文件的对应关系

List.js的文件结构如下所示

var characters = [
    ...
    host+"/api/Live2D/shiwuyu/100005_lonjingxiaren/LAppDefine.js",
    host+"/api/Live2D/shiwuyu/100034_baozaifan/LAppDefine.js",
    host+"/api/Live2D/shiwuyu/100025_guobaorou/LAppDefine.js",
    ...
];
function tellMoe(Moc) {
    switch (Moc) {
        ...
        case "Lonjingxiaren":
        case "#02001":
            return characters[10];
             break;
        case "Baozaifan":
        case "#02002":
            return characters[11];
             break;
        case "Guobaorou":
        case "#02003":
            return characters[12];
             break;
        ...
    }
function moeNum(Grp) {
	var moe_num = [];
    switch (Grp) {
        case "Default":
        case "#01":
            moe_num[0] = 0;
            moe_num[1] = 9;
            return moe_num;
             break;
        case "Shiwuyu":
        case "#02":
            moe_num[0] = 10;
            moe_num[1] = 60;
            return moe_num;
             break;
        default:
            moe_num[0] = 0;
            moe_num[1] = 9;
            return moe_num;
             break;
        };
};

数组characters～存放url

• characters用于存放模型的LAppDefine.js配置文件url

tellMoe函数～对应关系

• 这里的每一个case块都存放着模型与配置文件的对应关系

case "Lonjingxiaren":
case "#02001":
    return characters[10];
     break;

• Lonjingxiaren是模型名称，#02001是模型编号
• characters[10]是该模型对应的配置文件
• 在每个case块中，characters[x]中的x应比上一个case块增加1，以便与characters数组中的url一一对应

moeNum函数～定义分组

• 这里的每一个case块都存放着模型的分组信息

case "Shiwuyu":
case "#02":
    moe_num[0] = 10;
    moe_num[1] = 60;
    return moe_num;
     break;

• Shiwuyu是分组名称，#02是分组编号
• moe_num[0]用于设置分组的起始位置(填写characters数组下标)
• moe_num[1]用于设置分组的结束位置(填写characters数组下标)
• 将要分成一组的模型的case在tellMoe函数中放在一起，然后在这里配置，你就定义好一个新的分组啦

LAppDefine.js

• 这个文件用来配置模型参数
• 文件详细配置参见fguby/live2D: 来定制一个自己专属的live2D看板娘吧(๑•̀ㅂ•́)و✧
• 这个清晰度配置是我新增的，注释里标明了使用方法呐

文件结构如下所示

            var LAppDefine = {   
                // 调试，true时会在console里显示日志
                DEBUG_LOG : true,
                DEBUG_MOUSE_LOG : false, // 鼠标相关日志   
                //  全部设定    
                //这里配置canvsa元素的id
                CANVAS_ID : "aLive2D",
                //是否开启滚轮缩放，默认true
                IS_SCROLL_SCALE : true,
                // 画面最大缩放级别
                VIEW_MAX_SCALE : 2,
                // 画面最小缩放级别
                VIEW_MIN_SCALE : 0.8,

                VIEW_LOGICAL_LEFT : -1,
                VIEW_LOGICAL_RIGHT : 1,

                VIEW_LOGICAL_MAX_LEFT : -2,
                VIEW_LOGICAL_MAX_RIGHT : 2,
                VIEW_LOGICAL_MAX_BOTTOM : -2,
                VIEW_LOGICAL_MAX_TOP : 2,
                
                // 动作优先级常量
                PRIORITY_NONE : 0,
                PRIORITY_IDLE : 1,
                PRIORITY_NORMAL : 2,
                PRIORITY_FORCE : 3,

                //是否绑定切换模型按钮
                IS_BIND_BUTTON : false,
                //绑定按钮元素id
                BUTTON_ID : "Change",
                //是否开启模型切换完成之前禁止按钮点击的选项，默认为true
                IS_BAN_BUTTON : true,
                //设置按钮禁止状态时的class，可自定义样式，前提是IS_BAN_BUTTON为true
                BAN_BUTTON_CLASS : "inactive",
                //设置按钮正常状态时的class
                NORMAL_BUTTON_CLASS : "active",
                //衣服切换模式 目前只支持两种 sequence-顺序 random-随机
                //需事先配置好json文件里的textures属性
                //暂不支持保存功能
                TEXURE_CHANGE_MODE : "sequence",
                IS_START_TEXURE_CHANGE : false,
                TEXURE_BUTTON_ID : "",
                /**
                 *  模型定义
                    自定义配置模型，同一数组内放置两个模型则为开启双模型
                    三模型也只取数组里的前两个
                    模型出现的顺序与数组一致
                    这里请用相对路径配置
                */
                MODELS:
                [
                    [host+"/model/100001_hugeng/model.json"]
                ],

                // 与外部定义的json文件匹配
                MOTION_GROUP_IDLE : "idle", // 空闲时
                MOTION_GROUP_TAP_BODY : "tap_body", // 点击身体时
                MOTION_GROUP_FLICK_HEAD : "flick_head", // 抚摸头部
                MOTION_GROUP_PINCH_IN : "pinch_in", // 放大时
                MOTION_GROUP_PINCH_OUT : "pinch_out", // 缩小时
                MOTION_GROUP_SHAKE : "shake", // 摇晃
                //如果有自定义的动作分组可以放在这里

                // 与外部定义json文件相匹配
                HIT_AREA_HEAD : "head",
                HIT_AREA_BODY : "body",
                
                //初始化的模型大小
                SCALE : 1.2,
                
                //新增属性，是否播放音频 默认为true
                IS_PLAY_AUDIO : true,
                //新增属性，audio标签id值   
                AUDIO_ID : "aAudio",
                
                /**
                 * 清晰度设置
                    此配置为新增配置，如设置后没有效果或图像变形，
                    请检查<canvas>标签是否位于<div>或其他父标签内，
                    并将<canvas>独立放于一个父标签内，
                    并取消其父标签的width和height属性
                */
                
                //是否启用清晰度设置 默认为false
                IS_ENABLE_CLARITY : true,
                //设置清晰度 支持 1倍 2倍 4倍 8倍 16倍 
                CLARITY : 2,
                //是否启用自动适配 可优化移动设备的显示效果
                IS_AUTO_ADJUST_CLARITY : true
                
            };

xiarimangguo: 看看其它的Live2D在移动端的显示效果(惨·不·忍·睹)，你就会明白有些站长一定不要移动端显示Live2D的原因了......

快来体验一下清晰度设置吧，让你的Live2D们更加生动！

蓝屏钙，好喝的钙

不要尝试16倍的清晰度......不要尝试16倍的清晰度......不要尝试16倍的清晰度......

(°ー°〃)(°ー°〃)
[Chrome已停止响应][请稍候，Microsoft诊断程序正在检测问题......]

(°ー°〃)(°ー°〃)(°ー°〃)(°ー°〃)(°ー°〃)
[Windows已停止响应...]

添加萌萌哒Live2D模型

如果你想要添加自己的模型，那么就按以下步骤操作吧

1. 将存放模型的文件夹复制到model文件夹中
2. 如果没有model.json，要配置一下model.json，在expressions一节中设置模型表情，需与expression文件夹一致，或者找到*.exp.json文件所在的文件夹一般就是存放模型表情的文件夹，在motions一节中设置模型动作文件，需与action或motion文件夹一致，或者找到*.mtn文件所在的文件夹一般就是存放模型动作的文件夹[此步骤仅作参考哦，一般来说模型文件夹中会附带model.json的] 这样配置model.json
3. 在api/Live2D文件夹下新建一个文件夹，命名为模型所在分组名，进入该文件夹，新建一个文件夹，命名为模型的名称
   [如分组文件夹已存在，只须新建一个文件夹，命名为模型的名称即可]
4. 将LAppDefine.js复制到该文件夹，更改models参数，指向模型配置文件model.json的url
5. 在list.js中的characters数组中添加LAppDefine.js的url
6. 在tellMoe函数中新增一个case，并定义模型名称及编号，以及对应的配置文件
7. 在moeNum函数中更新对应分组的分组范围
8. 更改aLive2D函数的Model参数，模型就会出现在网页上啦！ 如果还是不会操作，请参考已配置好的模型呐，结合上面的步骤，很快就可以理解的！

本API附带的60+开箱即用的模型都是很不错的，你也可以从中挑选喜欢的模型使用呀～

o(*≧▽≦)ツ喵~~~