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

This commit is contained in:
Davide Tantillo 2025-05-08 12:54:58 +02:00
parent 24529f5cd1
commit e553d71807
17 changed files with 41 additions and 39 deletions

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -21,7 +21,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel"});

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/lil-gui@0.20.0/dist/lil-gui.min.css" rel="stylesheet">
@ -22,14 +22,14 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/dragon-ess.skel" });
PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/dragon-pma.atlas" }); PIXI.Assets.add({alias: "spineboyAtlas", src: "./assets/dragon-pma.atlas" });
PIXI.Assets.add({alias: "spineboyData2", src: "./assets/dragon-ess.skel" }); PIXI.Assets.add({alias: "spineboyData2", src: "./assets/dragon-ess.skel" });
PIXI.Assets.add({alias: "spineboyAtlas2", src: "./assets/dragon-pma.atlas" }); 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 // Create the spine display object
const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: 0.5 }); const spineboy = spine.Spine.from({skeleton: "spineboyData", atlas: "spineboyAtlas", scale: 0.5 });

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -31,7 +31,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel" });

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel"});

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel" });

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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" }); PIXI.Assets.add({alias: "mixAndMatchData", src: "./assets/mix-and-match-pro.skel" });

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel" });

View File

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

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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"}); PIXI.Assets.add({alias: "girlData", src: "./assets/celestial-circus-pro.skel"});
@ -88,17 +88,17 @@
}; };
// Create the text label for the heading // 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 textHeading.position.set(15, 15); // Set the position of the text within the button
buttonContainer.addChild(textHeading); buttonContainer.addChild(textHeading);
// Create the text label for the FPS counter // 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); textFps.position.set(15, 40);
buttonContainer.addChild(textFps); buttonContainer.addChild(textFps);
// Create the text label for the button toggle fullscreen // 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 textButton.position.set(15, 65); // Set the position of the text within the button
buttonContainer.addChild(textButton); buttonContainer.addChild(textButton);

View File

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

View File

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

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel" });

View File

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

View File

@ -2,7 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>spine-pixi-v8</title> <title>spine-pixi-v8</title>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.4.1/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="../dist/iife/spine-pixi-v8.js"></script>
<link rel="stylesheet" href="../../index.css"> <link rel="stylesheet" href="../../index.css">
</head> </head>
@ -20,7 +20,7 @@
backgroundColor: 0x2c3e50, backgroundColor: 0x2c3e50,
hello: true, 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. // 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: "spineboyData", src: "./assets/spineboy-pro.skel" });
@ -47,12 +47,12 @@
const tooth1 = PIXI.Sprite.from('raptor_jaw'); const tooth1 = PIXI.Sprite.from('raptor_jaw');
const tooth2 = 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(); const toothContainer = new PIXI.Container();
toothContainer.addChild(tooth1); toothContainer.addChild(tooth1);
toothContainer.name = "tooth"; toothContainer.label = "tooth";
text.name = "text"; text.label = "text";
// putting logo2 on top of the hand using slot directly and remove the attachment hand // putting logo2 on top of the hand using slot directly and remove the attachment hand
let frontFist; let frontFist;

View File

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