diff --git a/spine-ts/spine-pixi/example/control-bones-example.html b/spine-ts/spine-pixi/example/control-bones-example.html index f55ee48e46..247c57a3a4 100644 --- a/spine-ts/spine-pixi/example/control-bones-example.html +++ b/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); - }) - + }; })(); diff --git a/spine-ts/spine-pixi/src/Spine.ts b/spine-ts/spine-pixi/src/Spine.ts index 03e9a9c2e9..1f8f3a0b09 100644 --- a/spine-ts/spine-pixi/src/Spine.ts +++ b/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}. */