From 238e86c58a50359968718c1f13cc8ec10b8b2c37 Mon Sep 17 00:00:00 2001
From: Luke Ingram <lingram217@gmail.com>
Date: Fri, 22 Dec 2023 13:06:25 -0400
Subject: [PATCH 1/3] [ts] Add examples for spine-pixi.

---
 spine-ts/index.html                           | 13 ++-
 .../spine-pixi/example/events-example.html    | 58 +++++++-----
 spine-ts/spine-pixi/example/index.html        | 20 +----
 .../spine-pixi/example/manual-loading.html    | 18 +---
 .../example/mix-and-match-example.html        | 68 ++++++++++++++
 .../spine-pixi/example/mouse-following.html   | 90 +++++++++++++++++++
 spine-ts/spine-pixi/example/simple-input.html | 62 +++++++++++++
 7 files changed, 269 insertions(+), 60 deletions(-)
 create mode 100644 spine-ts/spine-pixi/example/mix-and-match-example.html
 create mode 100644 spine-ts/spine-pixi/example/mouse-following.html
 create mode 100644 spine-ts/spine-pixi/example/simple-input.html
diff --git a/spine-ts/index.html b/spine-ts/index.html
index 8455c2cbb..fd971093e 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -22,9 +22,19 @@
         <li>Pixi</li>
         <ul>
           <li><a href="/spine-pixi/example/index.html">Basic example</a></li>
+          <li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
           <li>
             <a href="/spine-pixi/example/events-example.html">Events example</a>
           </li>
+          <li>
+            <a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
+          </li>
+          <li>
+            <a href="/spine-pixi/example/simple-input.html">Simple input</a>
+          </li>
+          <li>
+            <a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
+          </li>
         </ul>
         <li>Phaser</li>
         <ul>
@@ -33,8 +43,7 @@
           </li>
           <li>
             <a href="/spine-phaser/example/events-example.html"
-              >Events example</a
-            >
+              >Events example</a>
           </li>
           <li>
             <a href="/spine-phaser/example/mix-and-match-example.html"
diff --git a/spine-ts/spine-pixi/example/events-example.html b/spine-ts/spine-pixi/example/events-example.html
index ba13b75d1..0b18ddb3e 100644
--- a/spine-ts/spine-pixi/example/events-example.html
+++ b/spine-ts/spine-pixi/example/events-example.html
@@ -5,27 +5,22 @@
     <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
     <script src="../dist/iife/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
   </head>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-
-    body,
-    html {
-      height: 100%;
-    }
-
-    canvas {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
 
   <body>
+    <!-- Creates a transparent logging overlay. -->
+    <div id="log" class="overlay" style="user-select: none;" max-height: 300px; overflow: auto;>
+    </div>
+
     <script>
+      function log(message) {
+        const log = document.querySelector("#log");
+        log.innerText += message + "\n";
+        log.scrollTop = log.scrollHeight;
+        console.log(message);
+      }
+
       (async function () {
         var app = new PIXI.Application({
           width: window.innerWidth,
@@ -43,11 +38,33 @@
         PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
         await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
-        // Create the spine display object
+        // Create the Spine display object
         const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
           scale: 0.5,
         });
 
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+         // Set callbacks to receive animation state events.
+         spineboy.state.addListener({
+          start: (entry) => log(`Started animation ${entry.animation.name}`),
+          interrupt: (entry) => log(`Interrupted animation ${entry.animation.name}`),
+          end: (entry) => log(`Ended animation ${entry.animation.name}`),
+          dispose: (entry) => log(`Disposed animation ${entry.animation.name}`),
+          complete: (entry) => log(`Completed animation ${entry.animation.name}`),
+        });
+
+        // Add a custom event listener along with an
+        // unlooped animation to see the custom event logged.
+        const trackEntry = spineboy.state.addAnimation(0, "walk", false, 3);
+        trackEntry.listener = {
+          event: (entry, event) =>
+          log(`Custom event for ${entry.animation.name}: ${event.data.name}`),
+        };
+        
+        spineboy.state.addAnimation(0, "run", true, 0);
+
         // Set the default mix time to use when transitioning
         // from one animation to the next.
         spineboy.state.data.defaultMix = 0.2;
@@ -56,11 +73,6 @@
         spineboy.x = window.innerWidth / 2;
         spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
 
-        // Set animation "run" on track 0, looped.
-        spineboy.state.setAnimation(0, "run", true);
-
-        // Set callbacks to receive animation state events
-
         // Add the display object to the stage.
         app.stage.addChild(spineboy);
       })();
diff --git a/spine-ts/spine-pixi/example/index.html b/spine-ts/spine-pixi/example/index.html
index 644cc71c0..418ee32e5 100644
--- a/spine-ts/spine-pixi/example/index.html
+++ b/spine-ts/spine-pixi/example/index.html
@@ -5,24 +5,8 @@
     <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
     <script src="../dist/iife/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
   </head>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-
-    body,
-    html {
-      height: 100%;
-    }
-
-    canvas {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
 
   <body>
     <script>
@@ -64,4 +48,4 @@
       })();
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-pixi/example/manual-loading.html b/spine-ts/spine-pixi/example/manual-loading.html
index babf71c7b..c631bfe1c 100644
--- a/spine-ts/spine-pixi/example/manual-loading.html
+++ b/spine-ts/spine-pixi/example/manual-loading.html
@@ -5,24 +5,8 @@
     <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
     <script src="../dist/iife/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
   </head>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-
-    body,
-    html {
-      height: 100%;
-    }
-
-    canvas {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  </style>
 
   <body>
     <script>
diff --git a/spine-ts/spine-pixi/example/mix-and-match-example.html b/spine-ts/spine-pixi/example/mix-and-match-example.html
new file mode 100644
index 000000000..da44e03a9
--- /dev/null
+++ b/spine-ts/spine-pixi/example/mix-and-match-example.html
@@ -0,0 +1,68 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("mixAndMatchData", "./assets/mix-and-match-pro.skel");
+        PIXI.Assets.add("mixAndMatchAtlas", "./assets/mix-and-match-pma.atlas");
+        await PIXI.Assets.load(["mixAndMatchData", "mixAndMatchAtlas"]);
+
+        // Create the Spine display object
+        const mixAndMatch = spine.Spine.from("mixAndMatchData", "mixAndMatchAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        mixAndMatch.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        mixAndMatch.x = window.innerWidth / 2;
+        mixAndMatch.y = window.innerHeight / 2 + mixAndMatch.getBounds().height / 2;
+
+        // Add animations.
+        mixAndMatch.state.setAnimation(0, "walk", true);
+        mixAndMatch.state.addAnimation(0, "dance", true, 1.0);
+        mixAndMatch.state.addAnimation(0, "walk", true, 1.0);
+
+        // Add a custom skin
+        const skeletonData = mixAndMatch.skeleton.data;
+        const skin = new spine.Skin("custom");
+        skin.addSkin(skeletonData.findSkin("nose/short"));
+        skin.addSkin(skeletonData.findSkin("skin-base"));
+        skin.addSkin(skeletonData.findSkin("eyes/violet"));
+        skin.addSkin(skeletonData.findSkin("hair/brown"));
+        skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
+        skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
+        skin.addSkin(skeletonData.findSkin("accessories/bag"));
+        skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
+        skin.addSkin(skeletonData.findSkin("eyelids/girly"));
+        mixAndMatch.skeleton.setSkin(skin);
+        mixAndMatch.skeleton.setSlotsToSetupPose();
+
+        // Add the display object to the stage.
+        app.stage.addChild(mixAndMatch);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/spine-ts/spine-pixi/example/mouse-following.html b/spine-ts/spine-pixi/example/mouse-following.html
new file mode 100644
index 000000000..fed53efa1
--- /dev/null
+++ b/spine-ts/spine-pixi/example/mouse-following.html
@@ -0,0 +1,90 @@
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Spine Pixi Example</title>
+        <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+        <script src="../dist/iife/spine-pixi.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+        <link rel="stylesheet" href="../../index.css">
+    </head>
+
+    <body>
+        <script>
+            (async function () {
+                    var app = new PIXI.Application({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    resolution: window.devicePixelRatio || 1,
+                    autoDensity: true,
+                    resizeTo: window,
+                    backgroundColor: 0x2c3e50,
+                    hello: true,
+                });
+                document.body.appendChild(app.view);
+
+                // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+                PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+                PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+                await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+                // Create the spine display object
+                const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+                    scale: 0.5,
+                });
+
+                // Set the default mix time to use when transitioning
+                // from one animation to another.
+                spineboy.state.data.defaultMix = 0.2;
+
+                // Center the Spine object on screen.
+                spineboy.x = window.innerWidth / 2;
+                spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+                // Set looping animations "idle" on track 0 and "aim" on track 1.
+                spineboy.state.setAnimation(0, "idle", true);
+                spineboy.state.setAnimation(1, "aim", true);
+
+                // Add the display object to the stage.
+                app.stage.addChild(spineboy);
+
+                // Make the stage interactive and register pointer events
+                app.stage.eventMode = "dynamic";
+                let isDragging = false;
+
+                app.stage.on("pointerdown", (e) => {
+                    isDragging = true;
+                    setBonePosition(e);
+                });
+
+                app.stage.on("pointermove", (e) => {
+                    if (isDragging) setBonePosition(e);
+                });
+
+                app.stage.on("pointerup", (e) => (isDragging = false));
+
+                const setBonePosition = (e) => {
+                    // Transform the mouse/touch coordinates to Spineboy's coordinate
+                    // system origin. `position` is then relative to Spineboy's root
+                    // bone.
+                    const position = new spine.Vector2(
+                        e.data.global.x - spineboy.x,
+                        e.data.global.y - spineboy.y
+                    );
+
+                    // Find the crosshair bone.
+                    const crosshairBone = spineboy.skeleton.findBone("crosshair");
+
+                    // Take the mouse position, which is relative to the root bone,
+                    // and transform it to the crosshair bone's parent root bone
+                    // coordinate system via `worldToLocal()`. `position` is relative
+                    // to the crosshair bone's parent bone after this
+                    crosshairBone.parent.worldToLocal(position);
+
+                    // Set the crosshair bone's position to the mouse position
+                    crosshairBone.x = position.x;
+                    crosshairBone.y = position.y;
+                };
+            })();
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/spine-ts/spine-pixi/example/simple-input.html b/spine-ts/spine-pixi/example/simple-input.html
new file mode 100644
index 000000000..105991c84
--- /dev/null
+++ b/spine-ts/spine-pixi/example/simple-input.html
@@ -0,0 +1,62 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="../../index.css">
+  </head>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default animation and the 
+        // default mix for transitioning between animations.
+        spineboy.state.setAnimation(0, "run", true);
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Make it so that you can interact with Spineboy.
+        // Also, handle the case that you click or tap on the screen.
+        // The callback function definition can be seen below.
+        spineboy.eventMode = 'static';
+        spineboy.on('pointerdown', onClick);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+
+        // This callback function handles what happens 
+        // when you click or tap on the screen.
+        function onClick() {
+            spineboy.state.addAnimation(0, "jump", false, 0);
+            spineboy.state.addAnimation(0, "idle", true, 0);
+        }
+      })();
+    </script>
+  </body>
+</html>

From 26c142e8623c2a8ecc71a8df5aedf0bff8797da4 Mon Sep 17 00:00:00 2001
From: Nathan Sweet <nathan.sweet@gmail.com>
Date: Wed, 27 Dec 2023 17:23:38 +0100
Subject: [PATCH 2/3] Update README.md

Remove link to German demos page.
---
 spine-ts/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spine-ts/README.md b/spine-ts/README.md
index 207951a1f..544221047 100644
--- a/spine-ts/README.md
+++ b/spine-ts/README.md
@@ -13,7 +13,7 @@ In most cases, the `spine-player` module is best suited for your needs. Please r
 
 For documentation of the core API in `spine-core`, please refer to our [Spine Runtimes Guide](http://esotericsoftware.com/spine-runtimes-guide).
 
-For module specific APIs in `spine-canvas`, `spine-webgl`, and `spine-threejs`, please refer to the [Examples](#examples) in the respecitve `spine-<modulename>/example` folder. For `spine-webgl` specifically, we have provided additional [demos](spine-webgl/demos), which you can also [view online](http://de.esotericsoftware.com/spine-demos).
+For module specific APIs in `spine-canvas`, `spine-webgl`, and `spine-threejs`, please refer to the [Examples](#examples) in the respecitve `spine-<modulename>/example` folder. For `spine-webgl` specifically, we have provided additional [demos](spine-webgl/demos), which you can also [view online](http://esotericsoftware.com/spine-demos).
 
 ## Licensing
 

From 9471c408ce7da7ab70474e0e16bed1393d07820a Mon Sep 17 00:00:00 2001
From: badlogic <badlogic@gmail.com>
Date: Wed, 3 Jan 2024 05:49:57 +0100
Subject: [PATCH 3/3] [ue] Fix compilation error on UE 5.2+

---
 .../SpinePlugin/Private/SpineSkeletonRendererComponent.cpp     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/spine-ue4/Plugins/SpinePlugin/Source/SpinePlugin/Private/SpineSkeletonRendererComponent.cpp b/spine-ue4/Plugins/SpinePlugin/Source/SpinePlugin/Private/SpineSkeletonRendererComponent.cpp
index 5e40b2d9a..fd454d2c6 100644
--- a/spine-ue4/Plugins/SpinePlugin/Source/SpinePlugin/Private/SpineSkeletonRendererComponent.cpp
+++ b/spine-ue4/Plugins/SpinePlugin/Source/SpinePlugin/Private/SpineSkeletonRendererComponent.cpp
@@ -33,6 +33,9 @@
 #include "Materials/MaterialInstanceDynamic.h"
 #include "spine/spine.h"
 #include "UObject/ConstructorHelpers.h"
+#if ENGINE_MAJOR_VERSION >= 5
+#include "PhysicsEngine/BodySetup.h"
+#endif
 
 #define LOCTEXT_NAMESPACE "Spine"
 
