-
Notifications
You must be signed in to change notification settings - Fork 58
/
xiaomai.html
199 lines (175 loc) · 6.97 KB
/
xiaomai.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D SampleApp1</title>
</meta>
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=1.0, maximum-scale=4.0">
</meta>
<style>
html, body {
oveflow: hidden;
height: 100%;
}
body{
margin:0px ;
padding:0px ;
}
button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(0,0,0,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
button.active {
background: linear-gradient(
to bottom,
#3498db,
#2980b9);
background: -moz-linear-gradient(
top,
#3498db 0%,
#2980b9);
background: -webkit-gradient(
linear, left top, left bottom,
from(#3498db),
to(#2980b9));
border: 1px solid #2980b9;
}
button.inactive {
background: linear-gradient(
to bottom,
#e74c3c,
#c0392b);
background: -moz-linear-gradient(
top,
#e74c3c 0%,
#c0392b);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e74c3c),
to(#c0392b));
border: 1px solid #c0392b;
}
</style>
</head>
<body onload="InitLive2D()">
<audio id="my_audio"></audio>
<p>
<button onclick="test()" class="active">小埋我要走了</button>
<button onclick="color()" class="active">小埋你的可乐呢</button>
<button onclick="colorAndCrisps()" class="active">还有薯片</button>
</p>
<div>
<canvas id="mycanvas" width="300" height="500"
style="border:dashed 1px #CCC;">
</canvas>
</div>
<!-- Live2D Library -->
<script src="js/live2d.min.js"></script>
<script>
var LAppDefine = {
// 调试，true时会在console里显示日志
DEBUG_LOG : true,
DEBUG_MOUSE_LOG : false, // 鼠标相关日志
// 全部设定
//这里配置canvsa元素的id
CANVAS_ID : "mycanvas",
//是否开启滚轮缩放，默认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:
[
["model/xiaomai/xiaomai.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.0,
//新增属性，是否播放音频 默认为true
IS_PLAY_AUDIO : true,
//新增属性，audio标签id值
AUDIO_ID : "my_audio"
};
</script>
<script>
function test() {
var model = new LAppModel();
model.startAppointMotion("start",3,10);
}
function color() {
var model = new LAppModel();
model.startAppointMotion("start",3,3)
}
function colorAndCrisps() {
var model = new LAppModel();
model.startAppointMotion("start",3,6)
}
function changeTexure() {
var model = new LAppModel();
model.changeTexure(1);
}
</script>
</body>
</html>