77 lines
1.9 KiB
HTML
77 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="./build/spine-player.js"></script>
|
|
<link rel="stylesheet" href="./build/style.css">
|
|
<link rel="stylesheet" href="./build/spine-player.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
|
|
<div id="container" style="width: 100%; height: 100%;"></div>
|
|
</body>
|
|
<script>
|
|
const params = new URLSearchParams(window.location.search);
|
|
var fps = 60;
|
|
|
|
if (params.has("fps")) {
|
|
var tmp = parseInt(params.get("fps"));
|
|
if (!isNaN(tmp)) {
|
|
fps = tmp;
|
|
}
|
|
}
|
|
|
|
var resetTime = window.performance.now();
|
|
let isPlayingInteract = false;
|
|
new spine.SpinePlayer("container", {
|
|
jsonUrl: "assets/dyn_illust_char_1012_skadi2.json",
|
|
atlasUrl: "assets/dyn_illust_char_1012_skadi2.atlas",
|
|
animation: "Idle",
|
|
premultipliedAlpha: true,
|
|
alpha: true,
|
|
backgroundColor: "#00000000",
|
|
fps: fps,
|
|
viewport: {
|
|
debugRender: false,
|
|
padLeft: "-5%",
|
|
padRight: "-10%",
|
|
padTop: "0%",
|
|
padBottom: "-12%",
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
showControls: false,
|
|
success: function (widget) {
|
|
widget.animationState.addListener({
|
|
end: (e) => {
|
|
if (e.animation.name == "Interact") {
|
|
isPlayingInteract = false;
|
|
}
|
|
},
|
|
complete: (e) => {
|
|
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
|
|
resetTime = window.performance.now();
|
|
let entry = widget.animationState.setAnimation(0, "Special", true, 0);
|
|
entry.mixDuration = 0.2;
|
|
widget.animationState.addAnimation(0, "Idle", true, 0);
|
|
}
|
|
},
|
|
});
|
|
widget.canvas.onclick = function () {
|
|
if (isPlayingInteract) {
|
|
return;
|
|
}
|
|
isPlayingInteract = true;
|
|
let entry = widget.animationState.setAnimation(0, "Interact", true, 0);
|
|
entry.mixDuration = 0.2;
|
|
widget.animationState.addAnimation(0, "Idle", true, 0);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |