diff --git a/spine-ts/spine-pixi-v8/example/bounds.html b/spine-ts/spine-pixi-v8/example/bounds.html index 2215a49fb..6931d7e41 100644 --- a/spine-ts/spine-pixi-v8/example/bounds.html +++ b/spine-ts/spine-pixi-v8/example/bounds.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/coin.html b/spine-ts/spine-pixi-v8/example/coin.html index d31c05f2a..6b8d79536 100644 --- a/spine-ts/spine-pixi-v8/example/coin.html +++ b/spine-ts/spine-pixi-v8/example/coin.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/control-bones-example.html b/spine-ts/spine-pixi-v8/example/control-bones-example.html index 67548015d..4a242a0f9 100644 --- a/spine-ts/spine-pixi-v8/example/control-bones-example.html +++ b/spine-ts/spine-pixi-v8/example/control-bones-example.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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; diff --git a/spine-ts/spine-pixi-v8/example/dragon.html b/spine-ts/spine-pixi-v8/example/dragon.html index 327876490..032924973 100644 --- a/spine-ts/spine-pixi-v8/example/dragon.html +++ b/spine-ts/spine-pixi-v8/example/dragon.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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 }); diff --git a/spine-ts/spine-pixi-v8/example/events-example.html b/spine-ts/spine-pixi-v8/example/events-example.html index e7d8b3fc0..a4542a649 100644 --- a/spine-ts/spine-pixi-v8/example/events-example.html +++ b/spine-ts/spine-pixi-v8/example/events-example.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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" }); diff --git a/spine-ts/spine-pixi-v8/example/index.html b/spine-ts/spine-pixi-v8/example/index.html index af70116fb..2d8de47d5 100644 --- a/spine-ts/spine-pixi-v8/example/index.html +++ b/spine-ts/spine-pixi-v8/example/index.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/manual-loading.html b/spine-ts/spine-pixi-v8/example/manual-loading.html index 086e69e49..6de57acf4 100644 --- a/spine-ts/spine-pixi-v8/example/manual-loading.html +++ b/spine-ts/spine-pixi-v8/example/manual-loading.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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" }); diff --git a/spine-ts/spine-pixi-v8/example/mix-and-match-example.html b/spine-ts/spine-pixi-v8/example/mix-and-match-example.html index a05b1f05e..aba67c9a8 100644 --- a/spine-ts/spine-pixi-v8/example/mix-and-match-example.html +++ b/spine-ts/spine-pixi-v8/example/mix-and-match-example.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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" }); diff --git a/spine-ts/spine-pixi-v8/example/mouse-following.html b/spine-ts/spine-pixi-v8/example/mouse-following.html index 3ad0ac5ac..b60364daf 100644 --- a/spine-ts/spine-pixi-v8/example/mouse-following.html +++ b/spine-ts/spine-pixi-v8/example/mouse-following.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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" }); diff --git a/spine-ts/spine-pixi-v8/example/physics.html b/spine-ts/spine-pixi-v8/example/physics.html index 1e6eb9b2e..9ba177fcc 100644 --- a/spine-ts/spine-pixi-v8/example/physics.html +++ b/spine-ts/spine-pixi-v8/example/physics.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/physics2.html b/spine-ts/spine-pixi-v8/example/physics2.html index 4c4ffca65..4665666cd 100644 --- a/spine-ts/spine-pixi-v8/example/physics2.html +++ b/spine-ts/spine-pixi-v8/example/physics2.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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); diff --git a/spine-ts/spine-pixi-v8/example/physics3.html b/spine-ts/spine-pixi-v8/example/physics3.html index 8ecabfa1a..bb01b2948 100644 --- a/spine-ts/spine-pixi-v8/example/physics3.html +++ b/spine-ts/spine-pixi-v8/example/physics3.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/physics4.html b/spine-ts/spine-pixi-v8/example/physics4.html index 0884c0005..eb2e554b8 100644 --- a/spine-ts/spine-pixi-v8/example/physics4.html +++ b/spine-ts/spine-pixi-v8/example/physics4.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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"}); diff --git a/spine-ts/spine-pixi-v8/example/simple-input.html b/spine-ts/spine-pixi-v8/example/simple-input.html index e33576502..3ac64555c 100644 --- a/spine-ts/spine-pixi-v8/example/simple-input.html +++ b/spine-ts/spine-pixi-v8/example/simple-input.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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" }); diff --git a/spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html b/spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html index ab0df26d1..fd79dcb36 100644 --- a/spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html +++ b/spine-ts/spine-pixi-v8/example/slot-objects-scale-rotation.html @@ -2,7 +2,7 @@ spine-pixi - + @@ -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); diff --git a/spine-ts/spine-pixi-v8/example/slot-objects.html b/spine-ts/spine-pixi-v8/example/slot-objects.html index c2f0711db..1d30a9177 100644 --- a/spine-ts/spine-pixi-v8/example/slot-objects.html +++ b/spine-ts/spine-pixi-v8/example/slot-objects.html @@ -2,7 +2,7 @@ spine-pixi-v8 - + @@ -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; diff --git a/spine-ts/spine-pixi-v8/src/Spine.ts b/spine-ts/spine-pixi-v8/src/Spine.ts index 720647274..45d94d8a8 100644 --- a/spine-ts/spine-pixi-v8/src/Spine.ts +++ b/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);