[ts][pixi] Add before/afterUpdateWorldTransforms to inject easily logic in skeleton lifecycle

spine-ts/spine-pixi/example/control-bones-example.html

@@ -46,7 +46,6 @@
 
         // Create the spine display object
         const stretchyman = spine.Spine.from("stretchymanData", "stretchymanAtlas", { 
-          autoUpdate: false,
           scale: 0.75,
          });
 
@@ -92,8 +91,8 @@
           })
         }
 
-        PIXI.Ticker.shared.add(() => {
-          const point = { x: 0, y: 0 };
+        const point = { x: 0, y: 0 };
+        stretchyman.beforeUpdateWorldTransforms = () => {
           for (let { bone, control } of controlBones) {
             point.x = control.x;
             point.y = control.y;
@@ -101,9 +100,7 @@
             bone.x = point.x;
             bone.y = point.y;
           }
-          stretchyman.update(PIXI.Ticker.shared.deltaMS / 1000);
-        })
-        
+        };
       })();
     </script>
   </body>

spine-ts/spine-pixi/src/Spine.ts

@@ -112,6 +112,9 @@ export class Spine extends Container {
 
 	protected slotMeshFactory: () => ISlotMesh = () => new SlotMesh();
 
+	beforeUpdateWorldTransforms: (object: Spine) => void = () => { };
+	afterUpdateWorldTransforms: (object: Spine) => void = () => { };
+
 	private autoUpdateWarned: boolean = false;
 	private _autoUpdate: boolean = true;
 	public get autoUpdate (): boolean {
@@ -179,8 +182,10 @@ export class Spine extends Container {
 		const delta = deltaSeconds ?? Ticker.shared.deltaMS / 1000;
 		this.state.update(delta);
 		this.state.apply(this.skeleton);
+		this.beforeUpdateWorldTransforms(this);
 		this.skeleton.update(delta);
 		this.skeleton.updateWorldTransform(Physics.update);
+		this.afterUpdateWorldTransforms(this);
 	}
 
 	/** Render the meshes based on the current skeleton state, render debug information, then call {@link Container.updateTransform}. */