UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spine-ts/spine-canvas/example/index.html
View File

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

4
spine-ts/spine-canvas/example/mouse-click.html
View File

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

1
spine-ts/spine-core/src/Skeleton.ts
View File

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

4
spine-ts/spine-webgl/demos/additiveblending.js
View File

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

6
spine-ts/spine-webgl/demos/clipping.js
View File

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

4
spine-ts/spine-webgl/demos/hoverboard.js
View File

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

6
spine-ts/spine-webgl/demos/imagechanges.js
View File

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

6
spine-ts/spine-webgl/demos/meshes.js
View File

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

4
spine-ts/spine-webgl/demos/skins.js
View File

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

6
spine-ts/spine-webgl/demos/spritesheets.js
View File

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

4
spine-ts/spine-webgl/demos/stretchyman.js
View File

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

6
spine-ts/spine-webgl/demos/tank.js
View File

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

6
spine-ts/spine-webgl/demos/transforms.js
View File

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

6
spine-ts/spine-webgl/demos/transitions.js
View File

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

8
spine-ts/spine-webgl/demos/vine.js
View File

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

2
spine-ts/spine-webgl/example/barebones-dragon.html
View File

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

2
spine-ts/spine-webgl/example/barebones.html
View File

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

50
spine-ts/spine-webgl/example/bone-dragging.html
View File

@ -18,39 +18,39 @@
this.draggedBone = null; this.draggedBone = null;
} }
loadAssets(canvas) { loadAssets(canvas) {
canvas.assetManager.loadBinary("assets/stretchyman-pro.skel"); canvas.assetManager.loadBinary("assets/stretchyman-pro.skel");
canvas.assetManager.loadTextureAtlas("assets/stretchyman-pma.atlas"); canvas.assetManager.loadTextureAtlas("assets/stretchyman-pma.atlas");
} }
initialize(canvas) { initialize(canvas) {
let assetManager = canvas.assetManager; let assetManager = canvas.assetManager;
var atlas = assetManager.require("assets/stretchyman-pma.atlas"); var atlas = assetManager.require("assets/stretchyman-pma.atlas");
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonBinary = new spine.SkeletonBinary(atlasLoader); var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
skeletonBinary.scale = 1; skeletonBinary.scale = 1;
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/stretchyman-pro.skel")); var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/stretchyman-pro.skel"));
this.skeleton = new spine.Skeleton(skeletonData); this.skeleton = new spine.Skeleton(skeletonData);
var animationStateData = new spine.AnimationStateData(skeletonData); var animationStateData = new spine.AnimationStateData(skeletonData);
this.animationState = new spine.AnimationState(animationStateData); this.animationState = new spine.AnimationState(animationStateData);
// Find the bones that should be draggable // Find the bones that should be draggable
let draggableBoneNames = [ let draggableBoneNames = [
"back-leg-ik-target", "back-leg-ik-target",
"front-leg-ik-target", "front-leg-ik-target",
"back-arm-ik-target", "back-arm-ik-target",
"front-arm-ik-target", "front-arm-ik-target",
"hip", "hip",
"neck2" "neck2"
]; ];
for (let boneName of draggableBoneNames) { for (let boneName of draggableBoneNames) {
let bone = this.skeleton.findBone(boneName); let bone = this.skeleton.findBone(boneName);
if (bone == null) throw Error("Couldn't find bone " + boneName); if (bone == null) throw Error("Couldn't find bone " + boneName);
this.draggableBones.push(bone) this.draggableBones.push(bone)
} }
// Setup an input listener on the canvas to process touch/mouse events. // Setup an input listener on the canvas to process touch/mouse events.
canvas.input.addListener({ canvas.input.addListener({
down: (x, y) => { down: (x, y) => {
// Calculate the mouse position in the coordinate space of the camera, aka world space. // Calculate the mouse position in the coordinate space of the camera, aka world space.
// The skeleton and its bones live in the same coordinate space. // The skeleton and its bones live in the same coordinate space.
@ -74,7 +74,7 @@
// The skeleton and its bones live in this coordinate space. // The skeleton and its bones live in this coordinate space.
let mousePosition = new spine.Vector3(x, y); let mousePosition = new spine.Vector3(x, y);
canvas.renderer.camera.screenToWorld(mousePosition, canvas.htmlCanvas.clientWidth, canvas.htmlCanvas.clientHeight); canvas.renderer.camera.screenToWorld(mousePosition, canvas.htmlCanvas.clientWidth, canvas.htmlCanvas.clientHeight);
if (this.selectedBone.parent != null) { if (this.selectedBone.parent != null) {
// If the bone to be dragged has a parent, transform the mouse world position to // If the bone to be dragged has a parent, transform the mouse world position to
// the parent bone's coordinate system, and set the bone's position accordingly. // the parent bone's coordinate system, and set the bone's position accordingly.
@ -92,26 +92,26 @@
}) })
} }
update(canvas, delta) { update(canvas, delta) {
this.animationState.update(delta); this.animationState.update(delta);
this.animationState.apply(this.skeleton); this.animationState.apply(this.skeleton);
this.skeleton.updateWorldTransform(); this.skeleton.updateWorldTransform(spine.Physics.update);
} }
render(canvas) { render(canvas) {
let renderer = canvas.renderer; let renderer = canvas.renderer;
renderer.resize(spine.ResizeMode.Expand); renderer.resize(spine.ResizeMode.Expand);
canvas.clear(0.2, 0.2, 0.2, 1); canvas.clear(0.2, 0.2, 0.2, 1);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(this.skeleton, true); renderer.drawSkeleton(this.skeleton, true);
// Draw a circle with a radius of 20 pixels around each draggable bone // Draw a circle with a radius of 20 pixels around each draggable bone
let boneColor = new spine.Color(1, 0, 0, 0.5); let boneColor = new spine.Color(1, 0, 0, 0.5);
let selectedBoneColor = new spine.Color(0, 1, 0, 0.5); let selectedBoneColor = new spine.Color(0, 1, 0, 0.5);
for (let bone of this.draggableBones) { for (let bone of this.draggableBones) {
renderer.circle(true, bone.worldX, bone.worldY, 20, bone == this.selectedBone ? selectedBoneColor : boneColor); renderer.circle(true, bone.worldX, bone.worldY, 20, bone == this.selectedBone ? selectedBoneColor : boneColor);
} }
renderer.end(); renderer.end();
} }

12
spine-ts/spine-webgl/example/custom-attachment.html
View File

@ -16,7 +16,7 @@
this.animationState = null; this.animationState = null;
} }
loadAssets(canvas) { loadAssets(canvas) {
canvas.assetManager.loadBinary("assets/spineboy-pro.skel"); canvas.assetManager.loadBinary("assets/spineboy-pro.skel");
canvas.assetManager.loadTextureAtlas("assets/spineboy-pma.atlas"); canvas.assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
canvas.assetManager.loadTexture("head.png"); canvas.assetManager.loadTexture("head.png");
@ -45,7 +45,7 @@
this.animationState.setAnimation(0, "run", true); this.animationState.setAnimation(0, "run", true);
// Get the custom head image from the asset manager and create an // Get the custom head image from the asset manager and create an
// attachment from it. // attachment from it.
let texture = assetManager.require("head.png"); let texture = assetManager.require("head.png");
let textureRegion = { let textureRegion = {
texture: texture, texture: texture,
@ -54,12 +54,12 @@
degrees: 0, degrees: 0,
offsetX: 0, offsetY: 0, offsetX: 0, offsetY: 0,
originalWidth: texture.getImage().width, originalHeight: texture.getImage().height originalWidth: texture.getImage().width, originalHeight: texture.getImage().height
}; };
let headSlot = this.skeleton.findSlot("head"); let headSlot = this.skeleton.findSlot("head");
let newHeadAttachment = headSlot.getAttachment().copy(); let newHeadAttachment = headSlot.getAttachment().copy();
newHeadAttachment.region = textureRegion; newHeadAttachment.region = textureRegion;
newHeadAttachment.updateRegion(); newHeadAttachment.updateRegion();
headSlot.setAttachment(newHeadAttachment); headSlot.setAttachment(newHeadAttachment);
} }
update(canvas, delta) { update(canvas, delta) {
@ -68,7 +68,7 @@
// Apply the animation state to the skeleton. // Apply the animation state to the skeleton.
this.animationState.apply(this.skeleton); this.animationState.apply(this.skeleton);
// Let the skeleton update the transforms of its bones. // Let the skeleton update the transforms of its bones.
this.skeleton.updateWorldTransform(); this.skeleton.updateWorldTransform(spine.Physics.update);
} }
render(canvas) { render(canvas) {

4
spine-ts/spine-webgl/example/drag-and-drop.js
View File

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

8
spine-ts/spine-webgl/example/dress-up.html
View File

@ -111,7 +111,7 @@
} }
this.skeleton.setSkin(newSkin); this.skeleton.setSkin(newSkin);
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform(); this.skeleton.updateWorldTransform(spine.Physics.update);
// Calculate the bounds so we can center and zoom // Calculate the bounds so we can center and zoom
// the camera such that the skeleton is in full view. // the camera such that the skeleton is in full view.
@ -149,7 +149,7 @@
// to the setup pose and calculate the world transforms // to the setup pose and calculate the world transforms
this.skeleton.setSkin(skin); this.skeleton.setSkin(skin);
this.skeleton.setToSetupPose(); this.skeleton.setToSetupPose();
this.skeleton.updateWorldTransform(); this.skeleton.updateWorldTransform(spine.Physics.update);
// Calculate the bounding box enclosing the skeleton. // Calculate the bounding box enclosing the skeleton.
let offset = new spine.Vector2(), size = new spine.Vector2(); let offset = new spine.Vector2(), size = new spine.Vector2();
@ -158,7 +158,7 @@
// Position the renderer camera on the center of the bounds, and // Position the renderer camera on the center of the bounds, and
// set the zoom so the full skin is visible within the 300x300 // set the zoom so the full skin is visible within the 300x300
// rendering area. We leave 10% of empty space around a skin in the // rendering area. We leave 10% of empty space around a skin in the
// thumbnail, hence the multiplication of 1.1 for the zoom factor. // thumbnail, hence the multiplication of 1.1 for the zoom factor.
camera.position.x = offset.x + size.x / 2; camera.position.x = offset.x + size.x / 2;
camera.position.y = offset.y + size.y / 2; camera.position.y = offset.y + size.y / 2;
camera.zoom = size.x > size.y ? size.x / THUMBNAIL_SIZE * 1.1 : size.y / THUMBNAIL_SIZE * 1.1; camera.zoom = size.x > size.y ? size.x / THUMBNAIL_SIZE * 1.1 : size.y / THUMBNAIL_SIZE * 1.1;
@ -214,7 +214,7 @@
update(canvas, delta) { update(canvas, delta) {
this.state.update(delta); this.state.update(delta);
this.state.apply(this.skeleton); this.state.apply(this.skeleton);
this.skeleton.updateWorldTransform(); this.skeleton.updateWorldTransform(spine.Physics.update);
} }
render(canvas) { render(canvas) {

4
spine-ts/spine-webgl/example/index.html
View File

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

2
spine-ts/spine-webgl/example/mix-and-match.html
View File

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

2
spine-ts/spine-webgl/tests/test-additive-animation-blending.html
View File

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

4
spine-ts/spine-webgl/tests/test-atlas-loading.html
View File

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

2
spine-ts/spine-webgl/tests/test-binary.html
View File

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

2
spine-ts/spine-webgl/tests/test-drawcalls.html
View File

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

2
spine-ts/spine-webgl/tests/test-rig.html
View File

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

2
spine-ts/spine-webgl/tests/test-simple.html
View File

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

2
spine-ts/spine-webgl/tests/test-skins.html
View File

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

6
spine-ts/spine-webgl/tests/test-slot-range.html
View File

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

4
spine-ts/spine-webgl/tests/test.html
View File

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