aLive2D! 一个萌萌哒 Live2D API o(*≧▽≦)ツ javascript

——“这个Live2D好可爱有木有，好想把它添加到我的博客去!”
......Two years later......
——“唉，怎么这么复杂，还是放弃吧～～呜呜呜”

还在为Live2D复杂的配置而苦恼吗？快来试试这款萌萌哒 Live2D API 吧！

目录 (?ˊ?ˋ)?*?

壹·萌の初见
- 让我们开始吧！
贰·萌の自述
- 了解aLive2D函数
- Position～模型定位全靠它
- X,Y～我也很重要！
- 相似之处！
- 为我启用消息吧
叁·萌の相识
- 更换模型吧
  - 使用Group函数随机展示模型分组
  - 使用Random函数和Auto函数
- ★?Moe API !?★
  - 食用方式
  - 自建API
  - ★?进阶·搭建API?★
肆·萌の感谢

萌の初见

你好呀！我是一只萌萌哒Live2D，很快你就将和我见面啦！ n(*≧▽≦*)n

让我们开始吧！
我们需要一段简单的HTML代码：

我会悄悄地出现在网页的右下角哦～～
你不相信？那就快来看看吧！
#02007 - |一品锅|食物语| - aLive2D! 一个萌萌哒 Live2D API o(*≧▽≦)ツ
悄悄地告诉你，可以使用“捕获”功能来记录我的可爱瞬间呢～
萌の自述

——“我不喜欢总是呆在网页的右下角，你能帮我移动到其他位置吗？”
——“ 没问题！”

了解aLive2D函数

aLive2D(Model,Width,Height,Position,X,Y,EnableMsg)

aLive2D函数提供7个参数

Model 要加载的模型名称&编号
Width,Height 指定模型在网页中所占的宽度和高度
Position 指定模型在网页中的定位方式
X,Y 指定模型在网页中定位相对于原点偏移的距离
EnableMsg 是否显示消息，接受布尔值，不写为false

接下来要怎么做呢

很简单啊，改变 Position 参数即可！

aLive2D('#02007','240px','400px','Lb','10%','0%',false)

唉？我怎么会出现在网页的左下角呢？

Position～模型定位全靠它 Position 将网页的四个角作为定位原点
它提供 4 种定位方式

左上
右上
左下
右下

参数值分别为

'LeftTop' ('Lt')
'RightTop' ('Rt')
'LeftBottom' ('Lb')
'RightBottom' ('Rb')

它们规定了模型应以网页的哪一个角为原点(基准点)来定位，比如说'Lb'就代表以网页的左下角为原点定位，以此类推啦～～
X,Y～我也很重要！ X 是横向偏移量，Y是纵向偏移量，它们适用html中的所有长度表示方式，根据Position的不同而有所变化

当Position为'Lt'时
- X向右偏移
- Y向下偏移
当Position为'Rb'时
- X向左偏移
- Y向上偏移

以此类推哦～～
相似之处！看到这里，相信你已经发现，这和css中的position定位有些相似，只是将其中的left、right、top、bottom属性拎了出来成为函数的参数，你一定会很快地理解的！

——“现在你知道你为什么在左下角了吧！我都告诉你啦！”
——“谢啦!!☆⌒(*＾-゜)v 萌萌哒！”

为我启用消息吧

——"嘤嘤嘤～～～我怎么说不出话了呢？我真的不想默不作声！"

将EnableMsg参数设置为true，然后我就可以说话啦！
萌の相识

——"我们是好朋友啦！欢迎来找我的小伙伴玩呐！"
——“可是，怎样才能找到你的小伙伴呢？”

更换模型吧
Model参数控制展示的模型，在这里你可以使用你定义的模型名称(如 Haru )，也可以使用你定义的模型编号(如 #01001 )。(提示 : 请在★?进阶·搭建API?★中查看关于list.js的详细介绍)
小伙伴们来啦！

我太孤单了，我要把小伙伴们都叫来！

aLive2D('Group(defined,#02)','240px','400px','Lb','10%','0%',false)

咦？ Group(defined,#02)是什么东东

Model 参数不仅支持显示单个模型，也可以随机显示多个模型

使用Group函数随机展示模型分组

Group(Method,GroupList)

Method支持3种分组模式！

defined
redefine
custom

不要着急，听我慢慢道来
defined~顾名思义～我是已定义的分组在list.js中可以轻松设置分组哦，你可以使用组名方式(如 Swy )或编号方式(如 #02 )为分组命名
GroupList参数填写组名或编号即可！
redefine~我来重新定义分组

Group(redefine,#02,List(+#01001,-#02053))

当Method为redefine时，函数接受3个参数

#02为已定义的分组名称或编号
List(...)是一个数组，用来向已定义分组添加或删除模型
[这只是在代码中临时添加或删除，并不能改变list.js中已定义的分组]

List数组用处大 List数组用来存放模型名称或编号，不限制模型的数量
在redefine条件下，使用+编号&名称添加模型，使用-编号&名称删除模型
名称和编号混用也是没有问题的哦

Group(redefine,#02,List(+Haru,-#02053))

压轴出场！custom！ custom用来在代码中自定义临时分组
[并不能改变list.js中已定义的分组]

Group(custom,List(#02001,#02007,#02002))

ε = = (づ′▽`)づ List: 我又来啦 List同样用来存放模型名称或编号，且不限制模型的数量哦
在custom条件下，将想要组成一组的模型全部放入List数组吧！同样支持名称和编号混用哦～～
小提示为了更简洁地使用分组，建议在list.js中定义分组，然后以defined方式使用它
不过，以defined方式在list.js中定义分组，只能将要分组的模型按顺序排在一起(★?进阶·搭建API?★)，而redefine和custom方式，可不按顺序自由定义分组，更加灵活。
使用Random函数和Auto函数 Random和Auto函数用于随机展示模型

Random()

Auto()

没错，就是这么简单，不需要任何参数！
将从已有的所有模型中随机抽取一个进行显示 ο(=?ω＜=)ρ⌒☆
知道了以上这些，就让我们开始使用 Moe API 吧！
★?Moe API !?★

——“我们是朋友，我要把最萌的萌物和你分享！ｍ(o?ω?o)ｍ”

欢迎大家使用 Moe API !
最最最重要的事情来啦！
没错！本API可以用 2行代码轻松为你的网页引入 Live2D ！

实现全自动加载模型
无须手动引入一连串的js文件
无须手动添加canvas标签
无须自己编写css样式
解决了到处寻找Live2D模型的苦恼
调整模型在网页上的位置及长宽

本API目前为纯静态编写，你可以很轻松地自建API，也可以将其部署在CDN上，无论是云服务器还是虚拟主机都可以轻松搭建...
食用方式最萌之·接口地址 https://91.90.194.171/api/Live2D

使用上面的API时，Model请使用编号形式，本API采用五位编号形式，如 #02001.

分组	名称	范围
#01	Default	#01001--#01010
#02	Swy	#02001--#02058
...	...	...

快来挑选心仪的 Live2D 吧！
自建API 本API开箱即用，包含60+模型，快来搭建吧！
★?进阶·搭建API?★
萌の感谢本API的制作离不开一些开源项目的贡献，衷心感谢以下的开源项目！
fguby/live2D: 来定制一个自己专属的live2D看板娘吧(??????)??
感谢以下项目提供的 Live2D 模型
Eikanya/Live2d-model: Live2d model collection
感谢以下项目提供的 message 功能
galnetwen/Live2D: 在 Web 上展示 Live2D 吧！
o(*≧▽≦)ツ一起交流呀～～
【aLive2D! 一个萌萌哒 Live2D API o(*≧▽≦)ツ】如果你喜欢这个项目，不要忘记为我点亮star哦！