ホーム エクスプローラ ヘルプ
サインイン
archive
/
spine-runtimes
同期ミラー https://github.com/EsotericSoftware/spine-runtimes.git
2
0
フォーク 0
ファイル 課題 0 Wiki
ソースを参照

[ts][pixi-v8] Spine allowChildren to true to prevent deprecation warning. Close #2841.

Davide Tantillo 4 ヶ月 前
親
24529f5cd1
コミット
e553d71807
17 ファイル変更、41 行追加、39 行削除
分割表示 差分情報を表示
  1. 2 2
      spine-ts/spine-pixi-v8/example/bounds.html
  2. 2 2
      spine-ts/spine-pixi-v8/example/coin.html
  3. 2 2
      spine-ts/spine-pixi-v8/example/control-bones-example.html
  4. 3 3
      spine-ts/spine-pixi-v8/example/dragon.html
  5. 2 2
      spine-ts/spine-pixi-v8/example/events-example.html
  6. 2 2
      spine-ts/spine-pixi-v8/example/index.html
  7. 2 2
      spine-ts/spine-pixi-v8/example/manual-loading.html
  8. 2 2
      spine-ts/spine-pixi-v8/example/mix-and-match-example.html
  9. 2 2
      spine-ts/spine-pixi-v8/example/mouse-following.html
  10. 2 2
      spine-ts/spine-pixi-v8/example/physics.html
  11. 5 5
      spine-ts/spine-pixi-v8/example/physics2.html
  12. 2 2
      spine-ts/spine-pixi-v8/example/physics3.html
  13. 2 2
      spine-ts/spine-pixi-v8/example/physics4.html
  14. 2 2
      spine-ts/spine-pixi-v8/example/simple-input.html
  15. 2 2
      spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html
  16. 5 5
      spine-ts/spine-pixi-v8/example/slot-objects.html
  17. 2 0
      spine-ts/spine-pixi-v8/src/Spine.ts

+ 2 - 2
spine-ts/spine-pixi-v8/example/bounds.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -21,7 +21,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel"});

+ 2 - 2
spine-ts/spine-pixi-v8/example/coin.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.umd.min.js"></script>
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.min.css" rel="stylesheet">
 
@@ -22,7 +22,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/coin-pro.json"});

+ 2 - 2
spine-ts/spine-pixi-v8/example/control-bones-example.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         app.stage.eventMode = 'static';
 
         app.stage.hitArea = app.screen;

+ 3 - 3
spine-ts/spine-pixi-v8/example/dragon.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.umd.min.js"></script>
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.min.css" rel="stylesheet">
 
@@ -22,14 +22,14 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/dragon-ess.skel" });
 
         PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/dragon-pma.atlas" });
 
         PIXI.Assets.add({alias: "spineboyData2", src: "./assets/dragon-ess.skel" });
 
         PIXI.Assets.add({alias: "spineboyAtlas2", src: "./assets/dragon-pma.atlas" });
 
-        await PIXI.Assets.load(["spineboyData", "spineboyAtlas", "spineboyData", "spineboyAtlas2", "raptor_jaw"]);
 
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas", "spineboyData", "spineboyAtlas2"]);
 
 
         // Create the spine display object
 
         const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: 0.5 });

+ 2 - 2
spine-ts/spine-pixi-v8/example/events-example.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -31,7 +31,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });

+ 2 - 2
spine-ts/spine-pixi-v8/example/index.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel"});

+ 2 - 2
spine-ts/spine-pixi-v8/example/manual-loading.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });

+ 2 - 2
spine-ts/spine-pixi-v8/example/mix-and-match-example.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "mixAndMatchData", src: "./assets/mix-and-match-pro.skel" });

+ 2 - 2
spine-ts/spine-pixi-v8/example/mouse-following.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
     <head>
 
         <meta charset="UTF-8" />
 
         <title>spine-pixi-v8</title>
 
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
         <script src="../dist/iife/spine-pixi-v8.js"></script>
 
         <link rel="stylesheet" href="../../index.css">
 
     </head>
 
@@ -20,7 +20,7 @@
 
                     backgroundColor: 0x2c3e50,
 
                     hello: true,
 
                 })
 
-                document.body.appendChild(app.view);
 
+                document.body.appendChild(app.canvas);
 
 
                 // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
                 PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });

+ 2 - 2
spine-ts/spine-pixi-v8/example/physics.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "sackData", src: "./assets/sack-pro.skel"});

+ 5 - 5
spine-ts/spine-pixi-v8/example/physics2.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "girlData", src: "./assets/celestial-circus-pro.skel"});
 
@@ -88,17 +88,17 @@
 
         };
 
 
         // Create the text label for the heading
 
-        const textHeading = new PIXI.Text("Drag anywhere", fontStyle); // Button text and color
 
+        const textHeading = new PIXI.Text({ text: "Drag anywhere", style: fontStyle }); // Button text and color
 
         textHeading.position.set(15, 15); // Set the position of the text within the button
 
         buttonContainer.addChild(textHeading);
 
 
         // Create the text label for the FPS counter
 
-        const textFps = new PIXI.Text("0 fps", fontStyle);
 
+        const textFps = new PIXI.Text({ text: "0 fps", style: fontStyle });
 
         textFps.position.set(15, 40);
 
         buttonContainer.addChild(textFps);
 
 
         // Create the text label for the button toggle fullscreen
 
-        const textButton = new PIXI.Text("Fullscreen", fontStyle); // Button text and color
 
+        const textButton = new PIXI.Text({ text: "Fullscreen", style: fontStyle }); // Button text and color
 
         textButton.position.set(15, 65); // Set the position of the text within the button
 
         buttonContainer.addChild(textButton);

+ 2 - 2
spine-ts/spine-pixi-v8/example/physics3.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "snowglobeData", src: "./assets/snowglobe-pro.skel"});

+ 2 - 2
spine-ts/spine-pixi-v8/example/physics4.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "cloudPotData", src: "./assets/cloud-pot.skel"});

+ 2 - 2
spine-ts/spine-pixi-v8/example/simple-input.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });

+ 2 - 2
spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
@@ -23,7 +23,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // adding skeleton to cache
 
         PIXI.Assets.cache.set("jsonSkel", jsonSkel);

+ 5 - 5
spine-ts/spine-pixi-v8/example/slot-objects.html
ファイルの表示 

@@ -2,7 +2,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <title>spine-pixi-v8</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.js"></script>
 
     <script src="../dist/iife/spine-pixi-v8.js"></script>
 
     <link rel="stylesheet" href="../../index.css">
 
   </head>
 
@@ -20,7 +20,7 @@
 
           backgroundColor: 0x2c3e50,
 
           hello: true,
 
         })
 
-        document.body.appendChild(app.view);
 
+        document.body.appendChild(app.canvas);
 
 
         // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
 
         PIXI.Assets.add({alias: "spineboyData", src: "./assets/spineboy-pro.skel" });
 
@@ -47,12 +47,12 @@
 
 
         const tooth1 = PIXI.Sprite.from('raptor_jaw');
 
         const tooth2 = PIXI.Sprite.from('raptor_jaw');
 
-        const text = new PIXI.Text('Text GUN');
 
+        const text = new PIXI.Text({ text: 'Text GUN' });
 
 
         const toothContainer = new PIXI.Container();
 
         toothContainer.addChild(tooth1);
 
-        toothContainer.name = "tooth";
 
-        text.name = "text";
 
+        toothContainer.label = "tooth";
 
+        text.label = "text";
 
 
         // putting logo2 on top of the hand using slot directly and remove the attachment hand
 
         let frontFist;

+ 2 - 0
spine-ts/spine-pixi-v8/src/Spine.ts
ファイルの表示 

@@ -390,6 +390,8 @@ export class Spine extends ViewContainer {
 
 
 		super({});
 
 
+		this.allowChildren = true;
 
+
 
 		const skeletonData = options instanceof SkeletonData ? options : options.skeletonData;
 
 
 		this.skeleton = new Skeleton(skeletonData);