[ts][pixi-v7] Prevent always setup pose rendering for the first frame…

… as did in 6ab5ddf for pixi-v8.

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

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);
       })();

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);
       })();

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

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);
       })();

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

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);
       })();

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);
       })();

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

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.