-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
example.html
74 lines (68 loc) · 2.43 KB
/
example.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="../css/spine-player.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../index.css" />
</head>
<body class="flex flex-col justify-center items-center">
<div id="container" style="max-width:640px; aspect-ratio: 16/9"></div>
<div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
<div>
<button id="walk">Walk</button>
<button id="jump">Jump</button>
<button id="roar">Roar</button>
<button id="screenshot">Screenshot</button>
</div>
<img id="screenshot-image" src="" style="width: 400px;">
</body>
<script>
// Creates a new spine player. The debugRender option enables
// rendering of viewports and padding for debugging purposes.
new spine.SpinePlayer("container", {
skelUrl: "assets/spineboy-pro.skel",
atlasUrl: "assets/spineboy-pma.atlas",
animation: "run",
premultipliedAlpha: true,
backgroundColor: "#cccccc",
viewport: {
debugRender: true,
},
showControls: true,
});
// Creates a new spine player with a transparent background,
// so content from the website shines through. Hides the controls.
// Instead, the user can control the animation via buttons.
var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor-pma.atlas",
animation: "walk",
showControls: false,
premultipliedAlpha: true,
backgroundColor: "#00000000",
alpha: true,
preserveDrawingBuffer: true,
defaultMix: 1,
controlBones: ["root"],
success: (player) => {
// Register button click event handlers once the
// skeleton has been loaded successfully
document.getElementById("walk").addEventListener("click", event => {
jsControlledPlayer.setAnimation("walk", false); // set the walk animation to play once
});
document.getElementById("jump").addEventListener("click", event => {
jsControlledPlayer.setAnimation("jump", false); // set the jump animation to play once
});
document.getElementById("roar").addEventListener("click", event => {
jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
});
document.getElementById("screenshot").addEventListener("click", event => {
document.getElementById("screenshot-image").src = player.canvas.toDataURL();
});
}
});
</script>
</body>
</html>