chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(live2d): add muelsyse, kaltsit_remnant

Browse Source
This commit is contained in:
Haoyu Xu
2023-05-04 21:44:23 -04:00
parent e56cbc2898
commit 5d5596119a
11 changed files with 836 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
playground/index.html
View File

@@ -4,67 +4,29 @@
<head>
<meta charset="utf-8">
<script src="./spine-player.js"></script>
<link rel="stylesheet" href="../src/libs/spine-player.css">
<link rel="stylesheet" href="./spine-player.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
background: gray;
margin: 0px;
}
</style>
<body>
<div id="container" style="width: 640px; height: 380px;"></div>
<div>
<button id="walk">Walk</button>
<button id="jump">Jump</button>
<button id="roar">Roar</button>
</div>
<div id="container" style="width: 100vw; height: 100vh;"></div>
</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",
skelUrl: "dyn_illust_char_003_kalts_boc%236_1.skel",
atlasUrl: "dyn_illust_char_003_kalts_boc%236_1.atlas",
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,
defaultMix: 1,
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
});
}
touch: true,
});
</script>
</body>