[ts] Update all examples to pass Physics to updateWorldTransform()

This commit is contained in:
Mario Zechner 2023-11-26 13:10:58 +01:00
parent 4598da9a21
commit 98da54402f
32 changed files with 93 additions and 92 deletions

View File

@ -38,7 +38,7 @@
// Instantiate a new skeleton based on the atlas and skeleton data.
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
bounds = skeleton.getBoundsRect();
// Setup an animation state with a default mix of 0.2 seconds.
@ -78,7 +78,7 @@
// world transforms and render the skeleton.
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
skeletonRenderer.draw(skeleton);
requestAnimationFrame(render);

View File

@ -38,7 +38,7 @@
// Instantiate a new skeleton based on the atlas and skeleton data.
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
bounds = skeleton.getBoundsRect();
// Spineboy's head bounding box attachment is not attached by default. Attach it.
@ -98,7 +98,7 @@
// world transforms and render the skeleton.
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
skeletonRenderer.draw(skeleton);
requestAnimationFrame(render);

View File

@ -376,6 +376,7 @@ export class Skeleton {
* See [World transforms](http://esotericsoftware.com/spine-runtime-skeletons#World-transforms) in the Spine
* Runtimes Guide. */
updateWorldTransform (physics: Physics) {
if (!physics) throw new Error("physics is undefined");
let bones = this.bones;
for (let i = 0, n = bones.length; i < n; i++) {
let bone = bones[i];

View File

@ -59,7 +59,7 @@ var additiveBlendingDemo = function (canvas, bgColor) {
down.alpha = 0;
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -122,7 +122,7 @@ var additiveBlendingDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.viewportWidth = bounds.x * 1.4;
renderer.camera.viewportHeight = bounds.y * 1.4;

View File

@ -23,7 +23,7 @@ var clippingDemo = function (canvas, bgColor) {
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "portal", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -57,7 +57,7 @@ var clippingDemo = function (canvas, bgColor) {
var time = animationDuration * percent;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
playTime = time;
}
};
@ -88,7 +88,7 @@ var clippingDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
renderer.camera.viewportWidth = bounds.x * 1.6;

View File

@ -34,7 +34,7 @@ var hoverboardDemo = function (canvas, bgColor) {
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "hoverboard", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -117,7 +117,7 @@ var hoverboardDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;

View File

@ -46,7 +46,7 @@ var imageChangesDemo = function (canvas, bgColor) {
var time = animationDuration * percent;
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.skeleton.updateWorldTransform(spine.Physics.update);
active.playTime = time;
}
};
@ -77,7 +77,7 @@ var imageChangesDemo = function (canvas, bgColor) {
var anim = skeletonData.findAnimation(animation);
state.setAnimation(0, animation, true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size, []);
@ -142,7 +142,7 @@ var imageChangesDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
renderer.begin();

View File

@ -47,7 +47,7 @@ var meshesDemo = function (canvas, bgColor) {
var time = animationDuration * percent;
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.skeleton.updateWorldTransform(spine.Physics.update);
active.playTime = time;
}
};
@ -89,7 +89,7 @@ var meshesDemo = function (canvas, bgColor) {
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
state.setAnimation(0, animation, true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size, []);
@ -133,7 +133,7 @@ var meshesDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
renderer.begin();

View File

@ -30,7 +30,7 @@ var skinsDemo = function (canvas, bgColor) {
state = new spine.AnimationState(stateData);
setupAnimations(state);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -185,7 +185,7 @@ var skinsDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.begin();
renderer.drawSkeleton(skeleton, true);

View File

@ -34,7 +34,7 @@ var spritesheetsDemo = function (canvas, bgColor) {
animationState = new spine.AnimationState(stateData);
animationState.setAnimation(0, "walk", true);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -116,13 +116,13 @@ var spritesheetsDemo = function (canvas, bgColor) {
walkAnim.apply(skeletonSeq, walkLastTime, newWalkTime, true, null, 1, spine.MixBlend.setup, spine.MixDirection.mixIn);
walkLastTime = newWalkTime;
}
skeletonSeq.updateWorldTransform();
skeletonSeq.updateWorldTransform(spine.Physics.update);
animationState.update(delta);
var current = animationState.getCurrent(0);
if (current.animation.name == "walk") current.trackTime = walkLastTimePrecise;
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);

View File

@ -39,7 +39,7 @@ var stretchymanDemo = function (canvas, bgColor) {
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
@ -126,7 +126,7 @@ var stretchymanDemo = function (canvas, bgColor) {
var angle = Math.atan2(headControl.worldY - hipControl.worldY, headControl.worldX - hipControl.worldX) * spine.MathUtils.radDeg;
angle = (angle - 90) * 2.5;
head.rotation = head.data.rotation + Math.min(90, Math.abs(angle)) * Math.sign(angle);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.5;

View File

@ -23,7 +23,7 @@ var tankDemo = function (canvas, bgColor) {
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "drive", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
offset = new spine.Vector2();
bounds = new spine.Vector2();
offset.x = -1204.22;
@ -58,7 +58,7 @@ var tankDemo = function (canvas, bgColor) {
var time = animationDuration * percent;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
playTime = time;
}
};
@ -84,7 +84,7 @@ var tankDemo = function (canvas, bgColor) {
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
offset.x = skeleton.findBone("tankRoot").worldX;

View File

@ -33,13 +33,13 @@ var transformsDemo = function (canvas, bgColor) {
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
rotateHandle = skeleton.findBone("rotate-handle");
renderer.camera.position.x = offset.x + bounds.x / 2;
@ -114,7 +114,7 @@ var transformsDemo = function (canvas, bgColor) {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.viewportWidth = bounds.x * 1.6;
renderer.camera.viewportHeight = bounds.y * 1.2;

View File

@ -32,7 +32,7 @@ var transitionsDemo = function (canvas, loadingComplete, bgColor) {
setAnimations(stateNoMix, -0.25, 0);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size, []);
setupInput();
@ -108,14 +108,14 @@ var transitionsDemo = function (canvas, loadingComplete, bgColor) {
renderer.begin();
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
skeleton.x = -200;
skeleton.y = -100;
renderer.drawSkeleton(skeleton, true);
stateNoMix.update(delta);
stateNoMix.apply(skeletonNoMix);
skeletonNoMix.updateWorldTransform();
skeletonNoMix.updateWorldTransform(spine.Physics.update);
skeletonNoMix.x = size.x + 45;
skeletonNoMix.y = -100;
renderer.drawSkeleton(skeletonNoMix, true);

View File

@ -31,14 +31,14 @@ var vineDemo = function (canvas, bgColor) {
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds, []);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "animation", true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@ -70,7 +70,7 @@ var vineDemo = function (canvas, bgColor) {
time = animationDuration * percent;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
playTime = time;
}
};
@ -117,7 +117,7 @@ var vineDemo = function (canvas, bgColor) {
state.apply(skeleton);
}
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;

View File

@ -52,7 +52,7 @@
// Apply the animation state to the skeleton.
this.animationState.apply(this.skeleton);
// Let the skeleton update the transforms of its bones.
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -52,7 +52,7 @@
// Apply the animation state to the skeleton.
this.animationState.apply(this.skeleton);
// Let the skeleton update the transforms of its bones.
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -95,7 +95,7 @@
update(canvas, delta) {
this.animationState.update(delta);
this.animationState.apply(this.skeleton);
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -68,7 +68,7 @@
// Apply the animation state to the skeleton.
this.animationState.apply(this.skeleton);
// Let the skeleton update the transforms of its bones.
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -133,7 +133,7 @@ class App {
// Calculate the bounds of the skeleton
this.animationState.update(0);
this.animationState.apply(this.skeleton);
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
let offset = new spine.Vector2(), size = new spine.Vector2();
this.skeleton.getBounds(offset, size);
@ -151,7 +151,7 @@ class App {
update(canvas, delta) {
this.animationState.update(delta);
this.animationState.apply(this.skeleton);
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -111,7 +111,7 @@
}
this.skeleton.setSkin(newSkin);
this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
// Calculate the bounds so we can center and zoom
// the camera such that the skeleton is in full view.
@ -149,7 +149,7 @@
// to the setup pose and calculate the world transforms
this.skeleton.setSkin(skin);
this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
// Calculate the bounding box enclosing the skeleton.
let offset = new spine.Vector2(), size = new spine.Vector2();
@ -214,7 +214,7 @@
update(canvas, delta) {
this.state.update(delta);
this.state.apply(this.skeleton);
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -219,7 +219,7 @@
function calculateSetupPoseBounds(skeleton) {
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
let offset = new spine.Vector2();
let size = new spine.Vector2();
skeleton.getBounds(offset, size, []);
@ -316,7 +316,7 @@
let premultipliedAlpha = skeletons[activeSkeleton][format].premultipliedAlpha;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
// Bind the shader and set the texture and model-view-projection matrix.
shader.bind();

View File

@ -61,7 +61,7 @@
update(canvas, delta) {
this.state.update(delta);
this.state.apply(this.skeleton);
this.skeleton.updateWorldTransform();
this.skeleton.updateWorldTransform(spine.Physics.update);
}
render(canvas) {

View File

@ -87,7 +87,7 @@
skeleton.setToSetupPose(); // Or key all bones used in the additive animations in a lower track, like idle.
animationState.apply(skeleton);
skeleton.y = -canvas.height / 2 / 2;
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

View File

@ -33,7 +33,7 @@
animationState = new spine.AnimationState(animationStateData);
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
skeleton.getBounds(offset, size, []);
renderer.camera.position.x = offset.x + size.x / 2;
renderer.camera.position.y = offset.y + size.y / 2;
@ -57,7 +57,7 @@
time.update();
animationState.update(time.delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
renderer.begin();
renderer.drawSkeleton(skeleton, true);

View File

@ -105,7 +105,7 @@
var skeleton = skeletons[i].skeleton;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
updateMean.addValue(Date.now() - start);
start = Date.now();

View File

@ -78,7 +78,7 @@
let skeleton = this.skeletons[i];
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
}

View File

@ -97,7 +97,7 @@
var skeleton = skeletons[i].skeleton;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
updateMean.addValue(Date.now() - start);
start = Date.now();

View File

@ -82,7 +82,7 @@
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

View File

@ -94,7 +94,7 @@
var skeleton = skeletons[i].skeleton;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
updateMean.addValue(Date.now() - start);
start = Date.now();

View File

@ -51,7 +51,7 @@
var offset = new spine.Vector2();
var size = new spine.Vector2();
spineBoy.skeleton.updateWorldTransform();
spineBoy.skeleton.updateWorldTransform(spine.Physics.update);
spineBoy.skeleton.getBounds(offset, size, []);
renderer.camera.position.x = offset.x + size.x / 2;
renderer.camera.position.y = offset.y + size.y / 2;
@ -76,7 +76,7 @@
// Update Spineboy first
spineBoy.animationState.update(time.delta);
spineBoy.animationState.apply(spineBoy.skeleton);
spineBoy.skeleton.updateWorldTransform();
spineBoy.skeleton.updateWorldTransform(spine.Physics.update);
// Next figure out the world location of the bone
// we attach the vine to, and apply it to the vine's
@ -89,7 +89,7 @@
vineRoot.rotation = gun.getWorldRotationX();
vine.animationState.update(time.delta);
vine.animationState.apply(vine.skeleton);
vine.skeleton.updateWorldTransform();
vine.skeleton.updateWorldTransform(spine.Physics.update);
// Find the two slots inbetween we want to render the vine
var gunSlot = spineBoy.skeleton.findSlot("gun");

View File

@ -83,7 +83,7 @@
state.setAnimation(0, ANIMATION, true);
skeleton.x = 0;
skeleton.y = 0;
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
skeletons.push({ skeleton: skeleton, state: state });
}
@ -104,7 +104,7 @@
var skeleton = skeletons[i].skeleton;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform(spine.Physics.update);
}
updateMean.addValue(Date.now() - start);
start = Date.now();