Skip to content
/ live2D Public
forked from tangyuxian/live2D

来定制一个自己专属的live2D看板娘吧(๑•̀ㅂ•́)و✧

Notifications You must be signed in to change notification settings

sepbigo/live2D

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fguby-live2D

Travis Travis

一个配置并不复杂,功能一直在完善的插件,如果各位喜欢,请给我一颗star吧,感激不尽

φ(≧ω≦*)♪

基于官方2.1.0版本的Api开发。

支持功能如下:

  • ✅ - 多模型装载
  • ✅ - 自定义事件行为
  • ✅ - 姐妹花
  • ✅ - 快速换衣

更多示例正在开发,第一次加载可能会有些慢,见谅~

还想要更多吗?请点击 二次元传送门

快速开始

1⃣ 直接使用git命令下载。
``` git clone https://github.com/fguby/live2D.git ```
2⃣ 下载压缩包,然后解压。

页面引用

1️⃣引入核心文件,例如
<script src="js/live2d.min.js"></script>
2️⃣引入配置项js文件。
<script src="js/LAppDefine.js"></script>
3️⃣html页面放置对应的canvas,例如这样:
<canvas id="mycanvas" width="300" height="500"></canvas>
4️⃣调用初始化的函数,例如:
<body onload="InitLive2D()">

模型出不来?

YES.😑

或者,请看看自己具体项目里的路径,然后进行修改?


(๑•̀ㅂ•́)و✧

配置文件LAppDefine.js详解

属性 值/含义
DEBUG_LOG true/false。是否在console里打印日志。
CANVAS_ID 页面canvas元素的id值。
IS_SCROLL_SCALE 是否开启滚轮缩放
VIEW_MAX_SCALE 画面最大缩放级别
VIEW_MIN_SCALE 画面最小缩放级别
IS_BIND_BUTTON 是否绑定切换模型按钮
BUTTON_ID 绑定按钮的id值,确认绑定时此值才有效。
IS_BAN_BUTTON 是否开启模型加载过程间的按钮禁用功能。
BAN_BUTTON_CLASS 按钮禁止状态时的class值,可自定义样式
NORMAL_BUTTON_CLASS 按钮恢复正常时的class值
TEXURE_CHANGE_MODE 衣服切换模式,random-随机,sequence-顺序
TEXURE_BUTTON_ID 换衣绑定的元素id属性,目前仅支持点击触发
一个完整的LAppDefine.js里最重要的属性:
MODELS:
[
    ["model/haru/haru.model.json"],
    ["model/xiaomai/xiaomai.model.json"],
    ["model/wanko/wanko.model.json"],
    ["model/shizuku/shizuku.model.json"],
    ["model/haru/haru_01.model.json","model/haru/haru_02.model.json"],
    ["model/Epsilon2.1/Epsilon2.1.model.json"],
    ["model/Pio/model.json"]
],

MODELS负责模型json文件的统一配置,如果想要配置自己的多个模型,只需要在这里进行添加即可。(单模型只需添加一个就好)

❗这里的路径请使用相对路径配置,具体根据对应的实际情况自行配置。


如何同时加载两个模型?

//写法如下
MODELS:
[
    [模型1的路径,模型2的路径]
]
MODELS里的每一个数组成员即使配置超出两个的模型,也只会取前两个,另外双模型的加载现在暂不支持换衣功能。

如何配置以及开启换衣功能?

//具体配置如下
//1.
IS_START_TEXURE_CHANGE : true,
//2.
TEXURE_CHANGE_MODE : "sequence",
//3.
TEXURE_BUTTON_ID : "button_id",
如上,1开启换衣功能的选项,2设置换衣的模式,sequence-顺序,random-随机,3则是设置页面上换衣按钮的id值。
在进行这些设置之前,你还需要确保的是:

页面按钮元素的放置。

模型json文件的处理。

确保模型已经顺利加载出现。

关于模型json文件的配置,这里以药水制作师的model.json文件举例。
"textures":[
    "textures/pajamas-costume.png",
    "textures/Animal Costume Racoon.png",
    "textures/Akiba Idol Costume.png",
    "textures/Goddess Costume Pink.png"
],

将需要更换的png图片全都配置在这里,数组的顺序默认是顺序更换时的顺序。

About

来定制一个自己专属的live2D看板娘吧(๑•̀ㅂ•́)و✧

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 80.6%
  • JavaScript 19.4%