mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-20 01:06:00 +08:00
[ts] Update all examples to pass Physics to updateWorldTransform()
This commit is contained in:
parent
4598da9a21
commit
98da54402f
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -18,39 +18,39 @@
|
||||
this.draggedBone = null;
|
||||
}
|
||||
|
||||
loadAssets(canvas) {
|
||||
canvas.assetManager.loadBinary("assets/stretchyman-pro.skel");
|
||||
loadAssets(canvas) {
|
||||
canvas.assetManager.loadBinary("assets/stretchyman-pro.skel");
|
||||
canvas.assetManager.loadTextureAtlas("assets/stretchyman-pma.atlas");
|
||||
}
|
||||
|
||||
initialize(canvas) {
|
||||
let assetManager = canvas.assetManager;
|
||||
var atlas = assetManager.require("assets/stretchyman-pma.atlas");
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||
var atlas = assetManager.require("assets/stretchyman-pma.atlas");
|
||||
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||
skeletonBinary.scale = 1;
|
||||
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);
|
||||
this.animationState = new spine.AnimationState(animationStateData);
|
||||
this.animationState = new spine.AnimationState(animationStateData);
|
||||
|
||||
// Find the bones that should be draggable
|
||||
let draggableBoneNames = [
|
||||
let draggableBoneNames = [
|
||||
"back-leg-ik-target",
|
||||
"front-leg-ik-target",
|
||||
"back-arm-ik-target",
|
||||
"front-arm-ik-target",
|
||||
"front-arm-ik-target",
|
||||
"hip",
|
||||
"neck2"
|
||||
];
|
||||
for (let boneName of draggableBoneNames) {
|
||||
];
|
||||
for (let boneName of draggableBoneNames) {
|
||||
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)
|
||||
}
|
||||
|
||||
// Setup an input listener on the canvas to process touch/mouse events.
|
||||
canvas.input.addListener({
|
||||
// Setup an input listener on the canvas to process touch/mouse events.
|
||||
canvas.input.addListener({
|
||||
down: (x, y) => {
|
||||
// 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.
|
||||
@ -74,7 +74,7 @@
|
||||
// The skeleton and its bones live in this coordinate space.
|
||||
let mousePosition = new spine.Vector3(x, y);
|
||||
canvas.renderer.camera.screenToWorld(mousePosition, canvas.htmlCanvas.clientWidth, canvas.htmlCanvas.clientHeight);
|
||||
|
||||
|
||||
if (this.selectedBone.parent != null) {
|
||||
// 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.
|
||||
@ -92,26 +92,26 @@
|
||||
})
|
||||
}
|
||||
|
||||
update(canvas, delta) {
|
||||
this.animationState.update(delta);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
update(canvas, delta) {
|
||||
this.animationState.update(delta);
|
||||
this.animationState.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
render(canvas) {
|
||||
let renderer = canvas.renderer;
|
||||
renderer.resize(spine.ResizeMode.Expand);
|
||||
let renderer = canvas.renderer;
|
||||
renderer.resize(spine.ResizeMode.Expand);
|
||||
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||
|
||||
renderer.begin();
|
||||
|
||||
renderer.begin();
|
||||
renderer.drawSkeleton(this.skeleton, true);
|
||||
|
||||
// Draw a circle with a radius of 20 pixels around each draggable bone
|
||||
let boneColor = new spine.Color(1, 0, 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.end();
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
this.animationState = null;
|
||||
}
|
||||
|
||||
loadAssets(canvas) {
|
||||
loadAssets(canvas) {
|
||||
canvas.assetManager.loadBinary("assets/spineboy-pro.skel");
|
||||
canvas.assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
|
||||
canvas.assetManager.loadTexture("head.png");
|
||||
@ -45,7 +45,7 @@
|
||||
this.animationState.setAnimation(0, "run", true);
|
||||
|
||||
// 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 textureRegion = {
|
||||
texture: texture,
|
||||
@ -54,12 +54,12 @@
|
||||
degrees: 0,
|
||||
offsetX: 0, offsetY: 0,
|
||||
originalWidth: texture.getImage().width, originalHeight: texture.getImage().height
|
||||
};
|
||||
};
|
||||
let headSlot = this.skeleton.findSlot("head");
|
||||
let newHeadAttachment = headSlot.getAttachment().copy();
|
||||
let newHeadAttachment = headSlot.getAttachment().copy();
|
||||
newHeadAttachment.region = textureRegion;
|
||||
newHeadAttachment.updateRegion();
|
||||
headSlot.setAttachment(newHeadAttachment);
|
||||
headSlot.setAttachment(newHeadAttachment);
|
||||
}
|
||||
|
||||
update(canvas, delta) {
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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();
|
||||
@ -158,7 +158,7 @@
|
||||
// Position the renderer camera on the center of the bounds, and
|
||||
// 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
|
||||
// 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.y = offset.y + size.y / 2;
|
||||
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) {
|
||||
this.state.update(delta);
|
||||
this.state.apply(this.skeleton);
|
||||
this.skeleton.updateWorldTransform();
|
||||
this.skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
|
||||
render(canvas) {
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
let skeleton = this.skeletons[i];
|
||||
state.update(delta);
|
||||
state.apply(skeleton);
|
||||
skeleton.updateWorldTransform();
|
||||
skeleton.updateWorldTransform(spine.Physics.update);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user