UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 23:34:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spine-ts/spine-pixi-v8/example/bounds.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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"});

4
spine-ts/spine-pixi-v8/example/coin.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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="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">
@ -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"});

4
spine-ts/spine-pixi-v8/example/control-bones-example.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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;

6
spine-ts/spine-pixi-v8/example/dragon.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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="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">
@ -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 });

4
spine-ts/spine-pixi-v8/example/events-example.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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" });

4
spine-ts/spine-pixi-v8/example/index.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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"});

4
spine-ts/spine-pixi-v8/example/manual-loading.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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" });

4
spine-ts/spine-pixi-v8/example/mix-and-match-example.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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" });

4
spine-ts/spine-pixi-v8/example/mouse-following.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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" });

4
spine-ts/spine-pixi-v8/example/physics.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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"});

10
spine-ts/spine-pixi-v8/example/physics2.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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);

4
spine-ts/spine-pixi-v8/example/physics3.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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"});

4
spine-ts/spine-pixi-v8/example/physics4.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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"});

4
spine-ts/spine-pixi-v8/example/simple-input.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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" });

4
spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html
View File

@ -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/tweakpane@3.1.9/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);

10
spine-ts/spine-pixi-v8/example/slot-objects.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<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>
<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
spine-ts/spine-pixi-v8/src/Spine.ts
View File

@ -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);