mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-15 11:31:37 +08:00
78a730a6d7
* Rendering, added support for separate color/alpha src blend funcs. * LoadingScreen, set camera zoom to fade out and black flash, use PMA to fix ringing artifacts when scaled, fade in to help hide dropped frames as page loads, use separate color/alpha src blend funcs to properly blend quad when loading screen fades out, oxipng PNGs. * Moved some private constants out of their class to avoid class name prefix. * Player, clean up full pass OCD town, showError throws when possible so stacktrace isn't lost, added showLoading to config, don't create UI when !showControls, removed findWithId (id is unique for entire document), use built-in for findWithClass/contains, var->let, don't clear screen twice during loading, other minor stuff.
72 lines
2.1 KiB
HTML
72 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="../../build/spine-player.js"></script>
|
|
<link rel="stylesheet" href="../css/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; background:#cccccc"></div>
|
|
<div id="container-raptor" style="width:640px; height:380px;"></div>
|
|
<div>
|
|
<button id="walk">Walk</button>
|
|
<button id="jump">Jump</button>
|
|
<button id="roar">Roar</button>
|
|
</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",
|
|
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,
|
|
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
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |