-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (141 loc) · 5.95 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixijs-spine</title><style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/pixi.js"></script>
<script src="js/pixi-spine.umd.js"></script>
<script>
'use strict'
const app = new PIXI.Application({
resizeTo: window,
autoDensity: true,
autoResize: true,
resolution: devicePixelRatio
});
document.body.appendChild(app.view);
let charData = [];
let newSkin1 = {};
let newSkin2 = {};
let newSkin3 = {};
let newSkin4 = {};
let skinGroup = [];
let n = 0;
let executed = false;
app.loader
.add('BOY', 'json/BOY.json')
.load( (loader, resources) => {
charData = resources;
init();
app.start();
});
function init() {
const boy_basic01 = new PIXI.spine.Spine(charData.BOY.spineData);
const boyData = charData.BOY.spineData;
const skeleton = boy_basic01.skeleton;
makeNewSkin(newSkin1, 'newSkinCover1', 1, boyData);
makeNewSkin(newSkin2, 'newSkinCover2', 2, boyData);
makeNewSkin(newSkin3, 'newSkinCover3', 2, boyData);
makeNewSkin(newSkin4, 'newSkinCover4', 1, boyData);
newSkin3.attachments[25] = charData.BOY.spineData.skins[1].attachments[25]
newSkin3.attachments[26] = charData.BOY.spineData.skins[1].attachments[26]
newSkin4.attachments[23] = charData.BOY.spineData.skins[2].attachments[23]
newSkin4.attachments[24] = charData.BOY.spineData.skins[2].attachments[24]
newSkin4.attachments[25] = undefined
newSkin4.attachments[26] = undefined
// console.log(skinGroup, newSkin3, charData.BOY.spineData, skinGroup[0]);
boyData.skins.push(newSkin1);
boyData.skins.push(newSkin2);
boyData.skins.push(newSkin3);
boyData.skins.push(newSkin4);
// add the boy_basic01 to the scene and render...
app.stage.addChild(boy_basic01);
app.stage.interactive = true;
app.stage.buttonMode = true;
// set current skin boy_skin/boy_skin01;
function setSkinByName(skinName) {
skeleton.setSkin(null);
skeleton.setSkinByName(skinName);
}
setSkinByName('newSkinCover1');
skeleton.setSlotsToSetupPose();
// set the position
// boy_basic01.x = app.screen.width * 0.5;
// boy_basic01.y = app.screen.height * 0.5;
boy_basic01.position.set(app.screen.width * 0.5, app.screen.height * 0.85);
// 本地容器坐標中的網格
// boy_basic01.pivot.x = boy_basic01.width * 0.5;
// boy_basic01.pivot.y = boy_basic01.height * 0.5;
if (boy_basic01.state.hasAnimation('walk')) {
// walk forever, little boy!
boy_basic01.state.setAnimation(0, 'walk', true);
// dont walk too fast
boy_basic01.state.timeScale = 1.25;
}
app.stage.on('pointertap', () => {
// change current skin
const currentSkinName = skeleton.skin.name;
// 隨機
const skinNameRandom = skinGroup[getRadomNumber(skinGroup.indexOf(currentSkinName), skinGroup.length-1)];
// console.log(currentSkinName == skinNameRandom, skinGroup.indexOf(currentSkinName));
setSkinByName(skinNameRandom);
// 依序
// firstClick();
// // console.log(n, executed);
// setSkinByName(skinGroup[n]);
// n++
// if (n >= skinGroup.length) { return n = 0 }
skeleton.setSlotsToSetupPose();
});
// Listen for window resize events
window.addEventListener('resize', resize);
function resize() {
const w = window.innerWidth;
const h = window.innerHeight;
app.renderer.resize(w, h);
// 將畫面的正中間放在 app.renderer 一半寬高的位置
// console.log(app.stage.children)
boy_basic01.position.set(app.screen.width * 0.5, app.screen.height * 0.85);
};
};
function makeNewSkin(newSkin, newSkinName, skin, boyData) {
let newSkinAtt = [];
for (var item in boyData.skins[skin]) {
newSkin[item] = boyData.skins[skin][item];
}
for (var item in boyData.skins[skin].attachments) {
newSkinAtt[item] = boyData.skins[skin].attachments[item]
}
newSkin.attachments = newSkinAtt;
for (var item in boyData.skins[0].attachments) {
newSkin.attachments[item] = boyData.skins[0].attachments[item]
}
newSkin.name = newSkinName;
skinGroup.push(newSkinName);
return newSkin, skinGroup
};
function firstClick() {
if(! executed) {
executed = true;
n++
}
};
function getRadomNumber(orign,max) {
let result = Math.floor(Math.random() * max);
if (result == orign)
if (result == max) result -= 1
else result += 1
return result;
};
</script>
</body>
</html>