feat: add addSlotObject, fix clipping and blend modes (#10)

Co-authored-by: Mat Groves <[email protected]> Co-authored-by: Zyie <[email protected]> fix for clipping and blend modes (#11)
pixijs · Jun 6, 2024 · 0eede71 · 0eede71
1 parent 75d0f92
commit 0eede71
Show file tree

Hide file tree

Showing 13 changed files with 734 additions and 460 deletions.
diff --git a/examples/assets/spine_logo.png b/examples/assets/spine_logo.png
diff --git a/examples/events-example.html b/examples/events-example.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>spine-pixi</title>
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
     <script src="../dist/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
     <link rel="stylesheet" href="./index.css">
@@ -35,8 +35,8 @@
         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");
+        PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
+        PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
         await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
         // Create the Spine display object

diff --git a/examples/index.html b/examples/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>spine-pixi</title>
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.0.0-rc.2/dist/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
     <script src="../dist/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
     <link rel="stylesheet" href="./index.css">

diff --git a/examples/manual-loading.html b/examples/manual-loading.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>spine-pixi</title>
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
     <script src="../dist/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
     <link rel="stylesheet" href="./index.css">
@@ -24,8 +24,8 @@
         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");
+        PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
+        PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
         await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
         // Manually load the data and create a Spine display object from it using

diff --git a/examples/mix-and-match-example.html b/examples/mix-and-match-example.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>spine-pixi</title>
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
     <script src="../dist/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
     <link rel="stylesheet" href="./index.css">
@@ -24,8 +24,8 @@
         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");
+        PIXI.Assets.add({alias: "mixAndMatchData", src: "./assets/mix-and-match-pro.skel" });
+        PIXI.Assets.add({alias: "mixAndMatchAtlas", src: "./assets/mix-and-match-pma.atlas" });
         await PIXI.Assets.load(["mixAndMatchData", "mixAndMatchAtlas"]);
 
         // Create the Spine display object

diff --git a/examples/mouse-following.html b/examples/mouse-following.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="UTF-8" />
         <title>Spine Pixi Example</title>
-        <script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
         <script src="../dist/spine-pixi.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
         <link rel="stylesheet" href="./index.css">
@@ -24,8 +24,8 @@
                 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");
+                PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
+                PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
                 await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
                 // Create the spine display object
@@ -47,6 +47,7 @@
 
                 // Add the display object to the stage.
                 app.stage.addChild(spineboy);
+                app.stage.hitArea = new PIXI.Rectangle(0, 0, app.view.width, app.view.height);
 
                 // Make the stage interactive and register pointer events
                 app.stage.eventMode = "dynamic";
@@ -57,7 +58,7 @@
                     setBonePosition(e);
                 });
 
-                app.stage.on("pointermove", (e) => {
+                app.stage.on("globalpointermove", (e) => {
                     if (isDragging) setBonePosition(e);
                 });
 

diff --git a/examples/simple-input.html b/examples/simple-input.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>spine-pixi</title>
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js8.0.0-rc.3/dist/pixi.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
     <script src="../dist/spine-pixi.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
     <link rel="stylesheet" href="./index.css">
@@ -24,8 +24,8 @@
         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");
+        PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
+        PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
         await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
         // Create the spine display object
@@ -35,28 +35,64 @@
 
         // Set the default animation and the 
         // default mix for transitioning between animations.
-        spineboy.state.setAnimation(0, "run", true);
+        spineboy.state.setAnimation(0, "hoverboard", 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.
+        // Handle the case that you click/tap the screen.
         spineboy.eventMode = 'static';
         spineboy.on('pointerdown', onClick);
-
+        
         // Add the display object to the stage.
         app.stage.addChild(spineboy);
+
+        // Add variables for movement, speed.
+        let moveLeft = false;
+        let moveRight = false;
+        const speed = 5;
+
+        // Handle the case that the keyboard keys specified below are pressed.
+        function onKeyDown(key) {
+          if (key.code === "ArrowLeft" || key.code === "KeyA") {
+            moveLeft = true;
+            spineboy.skeleton.scaleX = -1;
+          } else if (key.code === "ArrowRight" || key.code === "KeyD") {
+            moveRight = true;
+            spineboy.skeleton.scaleX = 1;
+          }
+        }
+
+        // Handle when the keys are released, if they were pressed.
+        function onKeyUp(key) {
+          if (key.code === "ArrowLeft" || key.code === "KeyA") {
+            moveLeft = false;
+          } else if (key.code === "ArrowRight" || key.code === "KeyD") {
+            moveRight = false;
+          }
+        }
 
-        // This callback function handles what happens 
-        // when you click or tap on the screen.
+        // Handle if you click/tap the screen.
         function onClick() {
-            spineboy.state.addAnimation(0, "jump", false, 0);
-            spineboy.state.addAnimation(0, "idle", true, 0);
+          spineboy.state.setAnimation(1, "shoot", false, 0);
         }
+
+        // Add event listeners so that the window will correctly handle input.
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("keyup", onKeyUp);
+
+        // Update the application to move Spineboy if input is detected.
+        app.ticker.add(() => {
+          if (moveLeft) {
+            spineboy.x -= speed;
+          }
+          if (moveRight) {
+            spineboy.x += speed;
+          }
+        });
       })();
     </script>
   </body>

diff --git a/examples/slot-objects.html b/examples/slot-objects.html
@@ -0,0 +1,125 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@latest/dist/pixi.min.js"></script>
+    <script src="../dist/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+    <link rel="stylesheet" href="./index.css">
+  </head>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application();
+        await app.init({
+          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({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
+        PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/spineboy-pma.atlas" });
+        PIXI.Assets.add({alias: "spine_logo", src: "./assets/spine_logo.png" });
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas", "spine_logo"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: 0.5 });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        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 animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "walk", true);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+
+        const logo1 = PIXI.Sprite.from('spine_logo');
+        const logo2 = PIXI.Sprite.from('spine_logo');
+        const logo3 = PIXI.Sprite.from('spine_logo');
+        const logo4 = PIXI.Sprite.from('spine_logo');
+        const text = new PIXI.Text('Spine Text');
+
+        // putting logo1 on top of the gun
+        spineboy.addSlotObject("gun", logo1);
+
+        // putting logo2 on top of the hand using slot directly and remove the attachment hand
+        let frontFist;
+        setTimeout(() => {
+          frontFist = spineboy.skeleton.findSlot("front-fist");
+          spineboy.addSlotObject(frontFist, logo2);
+          frontFist.setAttachment(null);
+        }, 2000)
+
+        // scaling the bone, will scale the pixi object too
+        setTimeout(() => {
+          frontFist.bone.scaleX = .5
+          frontFist.bone.scaleY = .5
+        }, 3000)
+
+        // adding a pixi text in a slot using slot index
+        let mouth;
+        setTimeout(() => {
+          mouth = spineboy.skeleton.findSlot("mouth");
+          spineboy.addSlotObject(mouth, text);
+        }, 4000)
+
+        // adding one display object to an already "occupied" slot will remove the old one,
+        // and move the given one to the slot
+        setTimeout(() => {
+          spineboy.addSlotObject(mouth, logo1);
+        }, 5000)
+
+        // adding multiple DisplayObjects to a slot using a Container to control their offset, size, ...
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          container.addChild(logo3, logo4);
+          logo3.y = 20;
+          logo3.scale.set(.5);
+          logo4.scale.set(.5);
+          logo4.tint = 0xFF5500;
+          spineboy.addSlotObject("gun", container);
+        }, 6000)
+
+        // removing the container won't automatically destroy the displayObject contained, so take care of them
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject("gun");
+          logo3.destroy();
+          logo4.destroy();
+        }, 7000)
+
+        // removing a specific slot object, that is not in that slot do nothing
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject(frontFist, text);
+          text.destroy();
+        }, 8000)
+
+        // removing a specific slot object
+        setTimeout(() => {
+          const container = new PIXI.Container();
+          spineboy.removeSlotObject(frontFist, logo2);
+          logo2.destroy();
+        }, 9000)
+
+        // resetting the slot with the original attachment
+        setTimeout(() => {
+          frontFist.setToSetupPose();
+        }, 10000)
+      })();
+    </script>
+  </body>
+</html>