diff --git a/spine-ts/spine-pixi-v7/example/control-bones-example.html b/spine-ts/spine-pixi-v7/example/control-bones-example.html index ce5625ed7..5c0000f7c 100644 --- a/spine-ts/spine-pixi-v7/example/control-bones-example.html +++ b/spine-ts/spine-pixi-v7/example/control-bones-example.html @@ -53,12 +53,13 @@ // from one animation to the next. stretchyman.state.data.defaultMix = 0.2; + // Set animation "run" on track 0, looped. + stretchyman.state.setAnimation(0, "idle", true); + // Center the spine object on screen. stretchyman.x = window.innerWidth / 2; stretchyman.y = window.innerHeight / 2 + stretchyman.getBounds().height / 2; - // Set animation "run" on track 0, looped. - stretchyman.state.setAnimation(0, "idle", true); app.stage.addChild(stretchyman); stretchyman.updateTransform(); diff --git a/spine-ts/spine-pixi-v7/example/index.html b/spine-ts/spine-pixi-v7/example/index.html index 06f6f0593..c79c2d0ce 100644 --- a/spine-ts/spine-pixi-v7/example/index.html +++ b/spine-ts/spine-pixi-v7/example/index.html @@ -32,6 +32,9 @@ scale: 0.5, }); + // Set animation "run" on track 0, looped. + spineboy.state.setAnimation(0, "run", true); + // Set the default mix time to use when transitioning // from one animation to the next. spineboy.state.data.defaultMix = 0.2; @@ -40,9 +43,6 @@ 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, "run", true); - // Add the display object to the stage. app.stage.addChild(spineboy); })(); diff --git a/spine-ts/spine-pixi-v7/example/manual-loading.html b/spine-ts/spine-pixi-v7/example/manual-loading.html index a954ffabe..49c918463 100644 --- a/spine-ts/spine-pixi-v7/example/manual-loading.html +++ b/spine-ts/spine-pixi-v7/example/manual-loading.html @@ -43,13 +43,13 @@ // from one animation to the next. spineboy.state.data.defaultMix = 0.2; + // Set animation "run" on track 0, looped. + spineboy.state.setAnimation(0, "run", true); + // 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, "run", true); - // Add the display object to the stage. app.stage.addChild(spineboy); })(); diff --git a/spine-ts/spine-pixi-v7/example/mouse-following.html b/spine-ts/spine-pixi-v7/example/mouse-following.html index f0c26dc30..7a6aea8b9 100644 --- a/spine-ts/spine-pixi-v7/example/mouse-following.html +++ b/spine-ts/spine-pixi-v7/example/mouse-following.html @@ -36,14 +36,14 @@ // from one animation to another. 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 looping animations "idle" on track 0 and "aim" on track 1. spineboy.state.setAnimation(0, "idle", true); spineboy.state.setAnimation(1, "aim", true); + // Center the Spine object on screen. + spineboy.x = window.innerWidth / 2; + spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2; + // Add the display object to the stage. app.stage.addChild(spineboy); diff --git a/spine-ts/spine-pixi-v7/example/physics.html b/spine-ts/spine-pixi-v7/example/physics.html index 373899b73..c4f1e85d9 100644 --- a/spine-ts/spine-pixi-v7/example/physics.html +++ b/spine-ts/spine-pixi-v7/example/physics.html @@ -32,13 +32,13 @@ scale: 0.2, }); + // Set animation "cape-follow-example" on track 0, looped. + sack.state.setAnimation(0, "cape-follow-example", true); + // Center the spine object on screen. sack.x = window.innerWidth / 2; sack.y = window.innerHeight / 2 + sack.getBounds().height / 2; - // Set animation "cape-follow-example" on track 0, looped. - sack.state.setAnimation(0, "cape-follow-example", true); - // Add the display object to the stage. app.stage.addChild(sack); })(); diff --git a/spine-ts/spine-pixi-v7/example/physics2.html b/spine-ts/spine-pixi-v7/example/physics2.html index 1139afc63..e9b9cc964 100644 --- a/spine-ts/spine-pixi-v7/example/physics2.html +++ b/spine-ts/spine-pixi-v7/example/physics2.html @@ -32,13 +32,13 @@ scale: 0.2, }); + // Set animation "eyeblink-long" on track 0, looped. + girl.state.setAnimation(0, "eyeblink-long", true); + // Center the spine object on screen. girl.x = window.innerWidth / 2; girl.y = window.innerHeight / 2 + girl.getBounds().height / 4; - // Set animation "eyeblink-long" on track 0, looped. - girl.state.setAnimation(0, "eyeblink-long", true); - // Add the display object to the stage. app.stage.addChild(girl); diff --git a/spine-ts/spine-pixi-v7/example/physics3.html b/spine-ts/spine-pixi-v7/example/physics3.html index 39eb523a5..04e9b7c7b 100644 --- a/spine-ts/spine-pixi-v7/example/physics3.html +++ b/spine-ts/spine-pixi-v7/example/physics3.html @@ -32,13 +32,13 @@ scale: 0.25, }); + // Set animation "FOA" on track 0, looped. + snowglobe.state.setAnimation(0, "shake", true); + // Center the spine object on screen. snowglobe.x = window.innerWidth / 2; snowglobe.y = window.innerHeight / 2 + snowglobe.getBounds().height / 4; - // Set animation "FOA" on track 0, looped. - snowglobe.state.setAnimation(0, "shake", true); - // Add the display object to the stage. app.stage.addChild(snowglobe); })(); diff --git a/spine-ts/spine-pixi-v7/example/physics4.html b/spine-ts/spine-pixi-v7/example/physics4.html index 8e664a82b..d28c6c2c1 100644 --- a/spine-ts/spine-pixi-v7/example/physics4.html +++ b/spine-ts/spine-pixi-v7/example/physics4.html @@ -32,13 +32,13 @@ scale: 0.25, }); + // Set animation "playing-in-the-rain" on track 0, looped. + cloudPot.state.setAnimation(0, "playing-in-the-rain", true); + // Center the spine object on screen. cloudPot.x = window.innerWidth / 2; cloudPot.y = window.innerHeight / 2 + cloudPot.getBounds().height / 4; - // Set animation "playing-in-the-rain" on track 0, looped. - cloudPot.state.setAnimation(0, "playing-in-the-rain", true); - // Add the display object to the stage. app.stage.addChild(cloudPot); })(); diff --git a/spine-ts/spine-pixi-v7/example/slot-objects.html b/spine-ts/spine-pixi-v7/example/slot-objects.html index b3242b874..2ac3a1616 100644 --- a/spine-ts/spine-pixi-v7/example/slot-objects.html +++ b/spine-ts/spine-pixi-v7/example/slot-objects.html @@ -36,13 +36,13 @@ // from one animation to the next. spineboy.state.data.defaultMix = 0.2; + // Set animation "run" on track 0, looped. + spineboy.state.setAnimation(0, "walk", true); + // 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); diff --git a/spine-ts/spine-pixi-v7/src/Spine.ts b/spine-ts/spine-pixi-v7/src/Spine.ts index c89528af3..05e6db5d2 100644 --- a/spine-ts/spine-pixi-v7/src/Spine.ts +++ b/spine-ts/spine-pixi-v7/src/Spine.ts @@ -133,6 +133,7 @@ export class Spine extends Container { public state: AnimationState; private darkTint = false; + private hasNeverUpdated = true; private _debug?: ISpineDebugRenderer | undefined = undefined; public get debug (): ISpineDebugRenderer | undefined { @@ -214,8 +215,6 @@ export class Spine extends Container { } this.autoUpdate = options?.autoUpdate ?? true; - this.skeleton.setToSetupPose(); - this.skeleton.updateWorldTransform(Physics.update); } /* @@ -248,6 +247,8 @@ export class Spine extends Container { } protected internalUpdate (_deltaFrame: number, deltaSeconds?: number): void { + this.hasNeverUpdated = false; + // Because reasons, pixi uses deltaFrames at 60fps. We ignore the default deltaFrames and use the deltaSeconds from pixi ticker. const delta = deltaSeconds ?? Ticker.shared.deltaMS / 1000; this.state.update(delta); @@ -293,6 +294,13 @@ export class Spine extends Container { } } + protected _calculateBounds(): void { + if (this.hasNeverUpdated) { + this.internalUpdate(0, 0); + this.renderMeshes(); + } + } + /** * Check the existence of a mesh for the given slot. * If you want to manually handle which meshes go on which slot and how you cache, overwrite this method.