feat: add temporary changes

2023-05-02 22:28:10 -04:00
parent 13dde32a96
commit 326ac43cc1
18 changed files with 12344 additions and 304 deletions
--- a/playground/index.html
+++ b/playground/index.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script src="./spine-player.js"></script>
+    <link rel="stylesheet" href="../src/libs/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>
+</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,
+        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>