UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-22 18:26:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

IK and flip timelines for spine-js.

Browse Source
This commit is contained in:
NathanSweet 2014-11-12 21:22:51 +01:00
parent efae035f18
commit 11633a0b22
1 changed files with 397 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

510
spine-js/spine.js
View File

@ -40,7 +40,8 @@ spine.BoneData.prototype = {
rotation: 0, rotation: 0,
scaleX: 1, scaleY: 1, scaleX: 1, scaleY: 1,
inheritScale: true, inheritScale: true,
inheritRotation: true inheritRotation: true,
flipX: false, flipY: false
}; };
spine.SlotData = function (name, boneData) { spine.SlotData = function (name, boneData) {
@ -53,21 +54,34 @@ spine.SlotData.prototype = {
additiveBlending: false additiveBlending: false
}; };
spine.Bone = function (boneData, parent) { spine.IkConstraintData = function (name) {
this.name = name;
this.bones = [];
};
spine.IkConstraintData.prototype = {
target: null,
bendDirection: 1,
mix: 1
};
spine.Bone = function (boneData, skeleton, parent) {
this.data = boneData; this.data = boneData;
this.skeleton = skeleton;
this.parent = parent; this.parent = parent;
this.setToSetupPose(); this.setToSetupPose();
}; };
spine.Bone.yDown = false; spine.Bone.yDown = false;
spine.Bone.prototype = { spine.Bone.prototype = {
x: 0, y: 0, x: 0, y: 0,
rotation: 0, rotation: 0, rotationIK: 0,
scaleX: 1, scaleY: 1, scaleX: 1, scaleY: 1,
flipX: false, flipY: false,
m00: 0, m01: 0, worldX: 0, // a b x m00: 0, m01: 0, worldX: 0, // a b x
m10: 0, m11: 0, worldY: 0, // c d y m10: 0, m11: 0, worldY: 0, // c d y
worldRotation: 0, worldRotation: 0,
worldScaleX: 1, worldScaleY: 1, worldScaleX: 1, worldScaleY: 1,
updateWorldTransform: function (flipX, flipY) { worldFlipX: false, worldFlipY: false,
updateWorldTransform: function () {
var parent = this.parent; var parent = this.parent;
if (parent != null) { if (parent != null) {
this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX;
@ -79,28 +93,35 @@ spine.Bone.prototype = {
this.worldScaleX = this.scaleX; this.worldScaleX = this.scaleX;
this.worldScaleY = this.scaleY; this.worldScaleY = this.scaleY;
} }
this.worldRotation = this.data.inheritRotation ? parent.worldRotation + this.rotation : this.rotation; this.worldRotation = this.data.inheritRotation ? parent.worldRotation + this.rotationIK : this.rotationIK;
this.worldFlipX = parent.worldFlipX != this.flipX;
this.worldFlipY = parent.worldFlipY != this.flipY;
} else { } else {
this.worldX = flipX ? -this.x : this.x; var skeletonFlipX = skeleton.flipX, skeletonFlipY = skeleton.flipY;
this.worldY = flipY != spine.Bone.yDown ? -this.y : this.y; this.worldX = skeletonFlipX ? -this.x : this.x;
this.worldY = skeletonFlipY != spine.Bone.yDown ? -this.y : this.y;
this.worldScaleX = this.scaleX; this.worldScaleX = this.scaleX;
this.worldScaleY = this.scaleY; this.worldScaleY = this.scaleY;
this.worldRotation = this.rotation; this.worldRotation = this.rotationIK;
this.worldFlipX = skeletonFlipX != this.flipX;
this.worldFlipY = skeletonFlipY != this.flipY;
} }
var radians = this.worldRotation * Math.PI / 180; var radians = this.worldRotation * Math.PI / 180;
var cos = Math.cos(radians); var cos = Math.cos(radians);
var sin = Math.sin(radians); var sin = Math.sin(radians);
this.m00 = cos * this.worldScaleX; if (this.worldFlipX) {
this.m10 = sin * this.worldScaleX; this.m00 = -cos * this.worldScaleX;
this.m01 = -sin * this.worldScaleY; this.m10 = sin * this.worldScaleX;
this.m11 = cos * this.worldScaleY; } else {
if (flipX) { this.m00 = cos * this.worldScaleX;
this.m00 = -this.m00; this.m10 = -sin * this.worldScaleX;
this.m01 = -this.m01;
} }
if (flipY != spine.Bone.yDown) { if (this.worldFlipY != spine.Bone.yDown) {
this.m10 = -this.m10; this.m01 = -sin * this.worldScaleY;
this.m11 = -this.m11; this.m11 = -cos * this.worldScaleY;
} else {
this.m01 = sin * this.worldScaleY;
this.m11 = cos * this.worldScaleY;
} }
}, },
setToSetupPose: function () { setToSetupPose: function () {
@ -108,14 +129,32 @@ spine.Bone.prototype = {
this.x = data.x; this.x = data.x;
this.y = data.y; this.y = data.y;
this.rotation = data.rotation; this.rotation = data.rotation;
this.rotationIK = this.rotation;
this.scaleX = data.scaleX; this.scaleX = data.scaleX;
this.scaleY = data.scaleY; this.scaleY = data.scaleY;
this.flipX = data.flipX;
this.flipY = data.flipY;
},
worldToLocal: function (world) void {
var dx = world[0] - this.worldX, dy = world[1] - this.worldY;
var m00 = this.m00, m10 = this.m10, m01 = this.m01, m11 = this.m11;
if (this.worldFlipX != (this.worldFlipY != spine.Bone.yDown)) {
m00 = -m00;
m11 = -m11;
}
var invDet = 1 / (m00 * m11 - m01 * m10);
world[0] = (dx * m00 * invDet - dy * m01 * invDet);
world[1] = (dy * m11 * invDet - dx * m10 * invDet);
},
localToWorld: function (local) {
var localX = local[0], localY = local[1];
local[0] = localX * this.m00 + localY * this.m01 + this.worldX;
local[1] = localX * this.m10 + localY * this.m11 + this.worldY;
} }
}; };
spine.Slot = function (slotData, skeleton, bone) { spine.Slot = function (slotData, bone) {
this.data = slotData; this.data = slotData;
this.skeleton = skeleton;
this.bone = bone; this.bone = bone;
this.setToSetupPose(); this.setToSetupPose();
}; };
@ -126,14 +165,14 @@ spine.Slot.prototype = {
attachmentVertices: [], attachmentVertices: [],
setAttachment: function (attachment) { setAttachment: function (attachment) {
this.attachment = attachment; this.attachment = attachment;
this._attachmentTime = this.skeleton.time; this._attachmentTime = this.bone.skeleton.time;
this.attachmentVertices.length = 0; this.attachmentVertices.length = 0;
}, },
setAttachmentTime: function (time) { setAttachmentTime: function (time) {
this._attachmentTime = this.skeleton.time - time; this._attachmentTime = this.bone.skeleton.time - time;
}, },
getAttachmentTime: function () { getAttachmentTime: function () {
return this.skeleton.time - this._attachmentTime; return this.bone.skeleton.time - this._attachmentTime;
}, },
setToSetupPose: function () { setToSetupPose: function () {
var data = this.data; var data = this.data;
@ -142,16 +181,28 @@ spine.Slot.prototype = {
this.b = data.b; this.b = data.b;
this.a = data.a; this.a = data.a;
var slotDatas = this.skeleton.data.slots; var slotDatas = this.bone.skeleton.data.slots;
for (var i = 0, n = slotDatas.length; i < n; i++) { for (var i = 0, n = slotDatas.length; i < n; i++) {
if (slotDatas[i] == data) { if (slotDatas[i] == data) {
this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); this.setAttachment(!data.attachmentName ? null : this.bone.skeleton.getAttachmentBySlotIndex(i, data.attachmentName));
break; break;
} }
} }
} }
}; };
spine.IkConstraint = function (data, skeleton) {
this.data = data;
this.mix = data.mix;
this.bendDirection = data.bendDirection;
this.bones = [];
for (var i = 0, n = data.bones.length; i < n; i++)
this.bones.push(skeleton.findBone(data.bones[i].name));
this.target = skeleton.findBone(data.target.name);
};
spine.IkConstraint.prototype = {};
spine.Skin = function (name) { spine.Skin = function (name) {
this.name = name; this.name = name;
this.attachments = {}; this.attachments = {};
@ -217,6 +268,20 @@ spine.binarySearch = function (values, target, step) {
current = (low + high) >>> 1; current = (low + high) >>> 1;
} }
}; };
spine.binarySearch1 = function (values, target) {
var low = 0;
var high = values.length - 2;
if (high == 0) return step;
var current = high >>> 1;
while (true) {
if (values[current + 1] <= target)
low = current + 1;
else
high = current;
if (low == high) return low + 1;
current = (low + high) >>> 1;
}
};
spine.linearSearch = function (values, target, step) { spine.linearSearch = function (values, target, step) {
for (var i = 0, last = values.length - step; i <= last; i += step) for (var i = 0, last = values.length - step; i <= last; i += step)
if (values[i] > target) return i; if (values[i] > target) return i;
@ -224,62 +289,35 @@ spine.linearSearch = function (values, target, step) {
}; };
spine.Curves = function (frameCount) { spine.Curves = function (frameCount) {
this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... this.curves = []; // type, x, y, ...
this.curves.length = (frameCount - 1) * 6; this.curves.length = (frameCount - 1) * 19/*BEZIER_SIZE*/;
}; };
spine.Curves.prototype = { spine.Curves.prototype = {
setLinear: function (frameIndex) { setLinear: function (frameIndex) {
this.curves[frameIndex * 6] = 0/*LINEAR*/; this.curves[frameIndex * 19/*BEZIER_SIZE*/] = 0/*LINEAR*/;
}, },
setStepped: function (frameIndex) { setStepped: function (frameIndex) {
this.curves[frameIndex * 6] = -1/*STEPPED*/; this.curves[frameIndex * 19/*BEZIER_SIZE*/] = 1/*STEPPED*/;
}, },
/** Sets the control handle positions for an interpolation bezier curve used to transition from this keyframe to the next. /** Sets the control handle positions for an interpolation bezier curve used to transition from this keyframe to the next.
* cx1 and cx2 are from 0 to 1, representing the percent of time between the two keyframes. cy1 and cy2 are the percent of * cx1 and cx2 are from 0 to 1, representing the percent of time between the two keyframes. cy1 and cy2 are the percent of
* the difference between the keyframe's values. */ * the difference between the keyframe's values. */
setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { setCurve: function (frameIndex, cx1, cy1, cx2, cy2) {
var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; var subdiv1 = 1f / 10/*BEZIER_SEGMENTS*/, subdiv2 = subdiv1 * subdiv1, subdiv3 = subdiv2 * subdiv1;
var subdiv_step2 = subdiv_step * subdiv_step; var pre1 = 3 * subdiv1, pre2 = 3 * subdiv2, pre4 = 6 * subdiv2, pre5 = 6 * subdiv3;
var subdiv_step3 = subdiv_step2 * subdiv_step; var tmp1x = -cx1 * 2 + cx2, tmp1y = -cy1 * 2 + cy2, tmp2x = (cx1 - cx2) * 3 + 1, tmp2y = (cy1 - cy2) * 3 + 1;
var pre1 = 3 * subdiv_step; var dfx = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv3, dfy = cy1 * pre1 + tmp1y * pre2 + tmp2y * subdiv3;
var pre2 = 3 * subdiv_step2; var ddfx = tmp1x * pre4 + tmp2x * pre5, ddfy = tmp1y * pre4 + tmp2y * pre5;
var pre4 = 6 * subdiv_step2; var dddfx = tmp2x * pre5, dddfy = tmp2y * pre5;
var pre5 = 6 * subdiv_step3;
var tmp1x = -cx1 * 2 + cx2; var i = frameIndex * 19/*BEZIER_SIZE*/;
var tmp1y = -cy1 * 2 + cy2;
var tmp2x = (cx1 - cx2) * 3 + 1;
var tmp2y = (cy1 - cy2) * 3 + 1;
var i = frameIndex * 6;
var curves = this.curves; var curves = this.curves;
curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; curves[i++] = 2/*BEZIER*/;
curves[i + 1] = cy1 * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
curves[i + 2] = tmp1x * pre4 + tmp2x * pre5;
curves[i + 3] = tmp1y * pre4 + tmp2y * pre5;
curves[i + 4] = tmp2x * pre5;
curves[i + 5] = tmp2y * pre5;
},
getCurvePercent: function (frameIndex, percent) {
percent = percent < 0 ? 0 : (percent > 1 ? 1 : percent);
var curveIndex = frameIndex * 6;
var curves = this.curves;
var dfx = curves[curveIndex];
if (!dfx/*LINEAR*/) return percent;
if (dfx == -1/*STEPPED*/) return 0;
var dfy = curves[curveIndex + 1];
var ddfx = curves[curveIndex + 2];
var ddfy = curves[curveIndex + 3];
var dddfx = curves[curveIndex + 4];
var dddfy = curves[curveIndex + 5];
var x = dfx, y = dfy; var x = dfx, y = dfy;
var i = 10/*BEZIER_SEGMENTS*/ - 2; for (var n = i + 19/*BEZIER_SIZE*/ - 1; i < n; i += 2) {
while (true) { curves[i] = x;
if (x >= percent) { curves[i + 1] = y;
var lastX = x - dfx;
var lastY = y - dfy;
return lastY + (y - lastY) * (percent - lastX) / (x - lastX);
}
if (i == 0) break;
i--;
dfx += ddfx; dfx += ddfx;
dfy += ddfy; dfy += ddfy;
ddfx += dddfx; ddfx += dddfx;
@ -287,6 +325,31 @@ spine.Curves.prototype = {
x += dfx; x += dfx;
y += dfy; y += dfy;
} }
},
getCurvePercent: function (frameIndex, percent) {
percent = percent < 0 ? 0 : (percent > 1 ? 1 : percent);
var curves = this.curves;
var i = frameIndex * 10/*BEZIER_SIZE*/;
var type = curves[i];
if (type == 0/*LINEAR*/) return percent;
if (type == 1/*STEPPED*/) return 0;
i++;
var x = 0;
for (var start = i, n = i + 10/*BEZIER_SIZE*/ - 1; i < n; i += 2) {
x = curves[i];
if (x >= percent) {
var prevX, prevY;
if (i == start) {
prevX = 0;
prevY = 0;
} else {
prevX = curves[i - 2];
prevY = curves[i - 1];
}
return prevY + (curves[i + 1] - prevY) * (percent - prevX) / (x - prevX);
}
}
var y = curves[i - 1];
return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1.
} }
}; };
@ -322,19 +385,19 @@ spine.RotateTimeline.prototype = {
return; return;
} }
// Interpolate between the last frame and the current frame. // Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 2); var frameIndex = spine.binarySearch(frames, time, 2);
var lastFrameValue = frames[frameIndex - 1]; var prevFrameValue = frames[frameIndex - 1];
var frameTime = frames[frameIndex]; var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent);
var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - prevFrameValue;
while (amount > 180) while (amount > 180)
amount -= 360; amount -= 360;
while (amount < -180) while (amount < -180)
amount += 360; amount += 360;
amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; amount = bone.data.rotation + (prevFrameValue + amount * percent) - bone.rotation;
while (amount > 180) while (amount > 180)
amount -= 360; amount -= 360;
while (amount < -180) while (amount < -180)
@ -371,16 +434,16 @@ spine.TranslateTimeline.prototype = {
return; return;
} }
// Interpolate between the last frame and the current frame. // Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 3); var frameIndex = spine.binarySearch(frames, time, 3);
var lastFrameX = frames[frameIndex - 2]; var prevFrameX = frames[frameIndex - 2];
var lastFrameY = frames[frameIndex - 1]; var prevFrameY = frames[frameIndex - 1];
var frameTime = frames[frameIndex]; var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
bone.x += (bone.data.x + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.x) * alpha; bone.x += (bone.data.x + prevFrameX + (frames[frameIndex + 1/*FRAME_X*/] - prevFrameX) * percent - bone.x) * alpha;
bone.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; bone.y += (bone.data.y + prevFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - prevFrameY) * percent - bone.y) * alpha;
} }
}; };
@ -412,16 +475,16 @@ spine.ScaleTimeline.prototype = {
return; return;
} }
// Interpolate between the last frame and the current frame. // Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 3); var frameIndex = spine.binarySearch(frames, time, 3);
var lastFrameX = frames[frameIndex - 2]; var prevFrameX = frames[frameIndex - 2];
var lastFrameY = frames[frameIndex - 1]; var prevFrameY = frames[frameIndex - 1];
var frameTime = frames[frameIndex]; var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
bone.scaleX += (bone.data.scaleX * (lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent) - bone.scaleX) * alpha; bone.scaleX += (bone.data.scaleX * (prevFrameX + (frames[frameIndex + 1/*FRAME_X*/] - prevFrameX) * percent) - bone.scaleX) * alpha;
bone.scaleY += (bone.data.scaleY * (lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent) - bone.scaleY) * alpha; bone.scaleY += (bone.data.scaleY * (prevFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - prevFrameY) * percent) - bone.scaleY) * alpha;
} }
}; };
@ -456,20 +519,20 @@ spine.ColorTimeline.prototype = {
b = frames[i - 1]; b = frames[i - 1];
a = frames[i]; a = frames[i];
} else { } else {
// Interpolate between the last frame and the current frame. // Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 5); var frameIndex = spine.binarySearch(frames, time, 5);
var lastFrameR = frames[frameIndex - 4]; var prevFrameR = frames[frameIndex - 4];
var lastFrameG = frames[frameIndex - 3]; var prevFrameG = frames[frameIndex - 3];
var lastFrameB = frames[frameIndex - 2]; var prevFrameB = frames[frameIndex - 2];
var lastFrameA = frames[frameIndex - 1]; var prevFrameA = frames[frameIndex - 1];
var frameTime = frames[frameIndex]; var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent);
r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; r = prevFrameR + (frames[frameIndex + 1/*FRAME_R*/] - prevFrameR) * percent;
g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; g = prevFrameG + (frames[frameIndex + 2/*FRAME_G*/] - prevFrameG) * percent;
b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; b = prevFrameB + (frames[frameIndex + 3/*FRAME_B*/] - prevFrameB) * percent;
a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; a = prevFrameA + (frames[frameIndex + 4/*FRAME_A*/] - prevFrameA) * percent;
} }
var slot = skeleton.slots[this.slotIndex]; var slot = skeleton.slots[this.slotIndex];
if (alpha < 1) { if (alpha < 1) {
@ -504,16 +567,18 @@ spine.AttachmentTimeline.prototype = {
}, },
apply: function (skeleton, lastTime, time, firedEvents, alpha) { apply: function (skeleton, lastTime, time, firedEvents, alpha) {
var frames = this.frames; var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame. if (time < frames[0]) {
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex; var frameIndex = time >= frames[frames.length - 1] ? frames.length - 1 : spine.binarySearch1(frames, time) - 1;
if (time >= frames[frames.length - 1]) // Time is after last frame. if (frames[frameIndex] < lastTime) return;
frameIndex = frames.length - 1;
else
frameIndex = spine.binarySearch(frames, time, 1) - 1;
var attachmentName = this.attachmentNames[frameIndex]; var attachmentName = this.attachmentNames[frameIndex];
skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); skeleton.slots[this.slotIndex].setAttachment(
!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName));
} }
}; };
@ -549,7 +614,7 @@ spine.EventTimeline.prototype = {
if (lastTime < frames[0]) if (lastTime < frames[0])
frameIndex = 0; frameIndex = 0;
else { else {
frameIndex = spine.binarySearch(frames, lastTime, 1); frameIndex = spine.binarySearch1(frames, lastTime);
var frame = frames[frameIndex]; var frame = frames[frameIndex];
while (frameIndex > 0) { // Fire multiple events with the same frame. while (frameIndex > 0) { // Fire multiple events with the same frame.
if (frames[frameIndex - 1] != frame) break; if (frames[frameIndex - 1] != frame) break;
@ -584,7 +649,7 @@ spine.DrawOrderTimeline.prototype = {
if (time >= frames[frames.length - 1]) // Time is after last frame. if (time >= frames[frames.length - 1]) // Time is after last frame.
frameIndex = frames.length - 1; frameIndex = frames.length - 1;
else else
frameIndex = spine.binarySearch(frames, time, 1) - 1; frameIndex = spine.binarySearch1(frames, time) - 1;
var drawOrder = skeleton.drawOrder; var drawOrder = skeleton.drawOrder;
var slots = skeleton.slots; var slots = skeleton.slots;
@ -647,7 +712,7 @@ spine.FfdTimeline.prototype = {
} }
// Interpolate between the previous frame and the current frame. // Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 1); var frameIndex = spine.binarySearch1(frames, time);
var frameTime = frames[frameIndex]; var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex - 1] - frameTime); var percent = 1 - (time - frameTime) / (frames[frameIndex - 1] - frameTime);
percent = this.curves.getCurvePercent(frameIndex - 1, percent < 0 ? 0 : (percent > 1 ? 1 : percent)); percent = this.curves.getCurvePercent(frameIndex - 1, percent < 0 ? 0 : (percent > 1 ? 1 : percent));
@ -669,15 +734,115 @@ spine.FfdTimeline.prototype = {
} }
}; };
spine.IkConstraintTimeline = function (frameCount) {
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, mix, bendDirection, ...
this.frames.length = frameCount * 3;
};
spine.IkConstraintTimeline.prototype = {
ikConstraintIndex: 0,
getFrameCount: function () {
return this.frames.length / 3;
},
setFrame: function (frameIndex, time, mix, bendDirection) {
frameIndex *= 3;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = mix;
this.frames[frameIndex + 2] = bendDirection;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha) {
var frames = this.frames;
if (time < frames[0]) return; // Time is before first frame.
var ikConstraint = skeleton.ikConstraints[this.ikConstraintIndex];
if (time >= frames[frames.length - 3]) { // Time is after last frame.
ikConstraint.mix += (frames[frames.length - 2] - ikConstraint.mix) * alpha;
ikConstraint.bendDirection = frames[frames.length - 1];
return;
}
// Interpolate between the previous frame and the current frame.
var frameIndex = spine.binarySearch(frames, time, 3);
var prevFrameMix = frames[frameIndex + -2/*PREV_FRAME_MIX*/];
var frameTime = frames[frameIndex];
var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*PREV_FRAME_TIME*/] - frameTime);
percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
var mix = prevFrameMix + (frames[frameIndex + 1/*FRAME_MIX*/] - prevFrameMix) * percent;
ikConstraint.mix += (mix - ikConstraint.mix) * alpha;
ikConstraint.bendDirection = frames[frameIndex + -1/*PREV_FRAME_BEND_DIRECTION*/];
}
};
spine.FlipXTimeline = function (frameCount) {
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, flip, ...
this.frames.length = frameCount * 2;
};
spine.FlipXTimeline.prototype = {
boneIndex: 0,
getFrameCount: function () {
return this.frames.length / 2;
},
setFrame: function (frameIndex, time, flip) {
frameIndex *= 2;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = flip ? 1 : 0;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha) {
var frames = this.frames;
if (time < frames[0]) {
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex = (time >= frames[frames.length - 2] ? frames.length : spine.binarySearch(frames, time, 2)) - 2;
if (frames[frameIndex] < lastTime) return;
bone.flipX = skeleton.bones.get(boneIndex), frames[frameIndex + 1] != 0;
}
};
spine.FlipYTimeline = function (frameCount) {
this.curves = new spine.Curves(frameCount);
this.frames = []; // time, flip, ...
this.frames.length = frameCount * 2;
};
spine.FlipYTimeline.prototype = {
boneIndex: 0,
getFrameCount: function () {
return this.frames.length / 2;
},
setFrame: function (frameIndex, time, flip) {
frameIndex *= 2;
this.frames[frameIndex] = time;
this.frames[frameIndex + 1] = flip ? 1 : 0;
},
apply: function (skeleton, lastTime, time, firedEvents, alpha) {
var frames = this.frames;
if (time < frames[0]) {
if (lastTime > time) this.apply(skeleton, lastTime, Number.MAX_VALUE, null, 0);
return;
} else if (lastTime > time) //
lastTime = -1;
var frameIndex = (time >= frames[frames.length - 2] ? frames.length : spine.binarySearch(frames, time, 2)) - 2;
if (frames[frameIndex] < lastTime) return;
bone.flipY = skeleton.bones.get(boneIndex), frames[frameIndex + 1] != 0;
}
};
spine.SkeletonData = function () { spine.SkeletonData = function () {
this.bones = []; this.bones = [];
this.slots = []; this.slots = [];
this.skins = []; this.skins = [];
this.events = []; this.events = [];
this.animations = []; this.animations = [];
this.ikConstraints = [];
}; };
spine.SkeletonData.prototype = { spine.SkeletonData.prototype = {
defaultSkin: null, defaultSkin: null,
width: 0, height: 0,
version: null, hash: null,
/** @return May be null. */ /** @return May be null. */
findBone: function (boneName) { findBone: function (boneName) {
var bones = this.bones; var bones = this.bones;
@ -727,6 +892,13 @@ spine.SkeletonData.prototype = {
for (var i = 0, n = animations.length; i < n; i++) for (var i = 0, n = animations.length; i < n; i++)
if (animations[i].name == animationName) return animations[i]; if (animations[i].name == animationName) return animations[i];
return null; return null;
},
/** @return May be null. */
findIkConstraint: function (ikConstraintName) {
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++)
if (ikConstraints[i].name == ikConstraintName) return ikConstraints[i];
return null;
} }
}; };
@ -737,7 +909,7 @@ spine.Skeleton = function (skeletonData) {
for (var i = 0, n = skeletonData.bones.length; i < n; i++) { for (var i = 0, n = skeletonData.bones.length; i < n; i++) {
var boneData = skeletonData.bones[i]; var boneData = skeletonData.bones[i];
var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)];
this.bones.push(new spine.Bone(boneData, parent)); this.bones.push(new spine.Bone(boneData, this, parent));
} }
this.slots = []; this.slots = [];
@ -745,10 +917,17 @@ spine.Skeleton = function (skeletonData) {
for (var i = 0, n = skeletonData.slots.length; i < n; i++) { for (var i = 0, n = skeletonData.slots.length; i < n; i++) {
var slotData = skeletonData.slots[i]; var slotData = skeletonData.slots[i];
var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)];
var slot = new spine.Slot(slotData, this, bone); var slot = new spine.Slot(slotData, bone);
this.slots.push(slot); this.slots.push(slot);
this.drawOrder.push(slot); this.drawOrder.push(slot);
} }
this.ikConstraints = [];
for (var i = 0, n = skeletonData.ikConstraints.length; i < n; i++)
this.ikConstraints.push(new spine.IkConstraint(skeletonData.ikConstraints[i], this));
this.boneCache = [];
this.updateCache();
}; };
spine.Skeleton.prototype = { spine.Skeleton.prototype = {
x: 0, y: 0, x: 0, y: 0,
@ -756,13 +935,63 @@ spine.Skeleton.prototype = {
r: 1, g: 1, b: 1, a: 1, r: 1, g: 1, b: 1, a: 1,
time: 0, time: 0,
flipX: false, flipY: false, flipX: false, flipY: false,
updateCache: function () {
var ikConstraints = this.ikConstraints;
var ikConstraintsCount = ikConstraints.length;
var arrayCount = ikConstraintsCount + 1;
var boneCache = this.boneCache;
if (boneCache.length > arrayCount) boneCache.splice(arrayCount, boneCache.length - arrayCount);
for (var i = 0, n = boneCache.length; i < n; i++)
boneCache[i].length = 0;
while (boneCache.length < arrayCount)
boneCache[boneCache.length] = [];
var nonIkBones = boneCache[0];
var bones = this.bones;
outer:
for (var i = 0, n = bones.length; i < n; i++) {
var bone = bones[i];
var current = bone;
do {
for (var ii = 0, nn = bones.length; ii < nn; ii++) {
var ikConstraint = ikConstraints[ii];
var parent = ikConstraint.bones[0];
var child= ikConstraint.bones[ikConstraint.bones.length - 1];
while (true) {
if (current == child) {
boneCache[ii].push(bone);
boneCache[ii + 1].push(bone);
continue outer;
}
if (child == parent) break;
child = child.parent;
}
ii++;
}
current = current.parent;
} while (current != null);
nonIkBones[nonIkBones.length] = bone;
}
},
/** Updates the world transform for each bone. */ /** Updates the world transform for each bone. */
updateWorldTransform: function () { updateWorldTransform: function () {
var flipX = this.flipX;
var flipY = this.flipY;
var bones = this.bones; var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++) for (var i = 0, n = bones.length; i < n; i++) {
bones[i].updateWorldTransform(flipX, flipY); var bone = bones[i];
bone.rotationIK = bone.rotation;
}
var i = 0, last = this.boneCache.length - 1;
while (true) {
var cacheBones = this.boneCache[i];
for (var ii = 0, nn = cacheBones.length; ii < nn; ii++)
cacheBones[ii].updateWorldTransform();
if (i == last) break;
this.ikConstraints[i].apply();
i++;
}
}, },
/** Sets the bones and slots to their setup pose values. */ /** Sets the bones and slots to their setup pose values. */
setToSetupPose: function () { setToSetupPose: function () {
@ -773,6 +1002,13 @@ spine.Skeleton.prototype = {
var bones = this.bones; var bones = this.bones;
for (var i = 0, n = bones.length; i < n; i++) for (var i = 0, n = bones.length; i < n; i++)
bones[i].setToSetupPose(); bones[i].setToSetupPose();
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++) {
var ikConstraint = ikConstraints[i];
ikConstraint.bendDirection = ikConstraint.data.bendDirection;
ikConstraint.mix = ikConstraint.data.mix;
}
}, },
setSlotsToSetupPose: function () { setSlotsToSetupPose: function () {
var slots = this.slots; var slots = this.slots;
@ -871,6 +1107,12 @@ spine.Skeleton.prototype = {
} }
throw "Slot not found: " + slotName; throw "Slot not found: " + slotName;
}, },
findIkConstraint: function (ikConstraintName) {
var ikConstraints = this.ikConstraints;
for (var i = 0, n = ikConstraints.length; i < n; i++)
if (ikConstraints[i].data.name == ikConstraintName) return ikConstraints[i];
return null;
},
update: function (delta) { update: function (delta) {
this.time += delta; this.time += delta;
} }
@ -1081,7 +1323,7 @@ spine.SkinnedMeshAttachment.prototype = {
} }
}, },
computeWorldVertices: function (x, y, slot, worldVertices) { computeWorldVertices: function (x, y, slot, worldVertices) {
var skeletonBones = slot.skeleton.bones; var skeletonBones = slot.bone.skeleton.bones;
var weights = this.weights; var weights = this.weights;
var bones = this.bones; var bones = this.bones;
@ -1386,6 +1628,28 @@ spine.SkeletonJson.prototype = {
skeletonData.bones.push(boneData); skeletonData.bones.push(boneData);
} }
// IK constraints.
var ik = root["ik"];
for (var i = 0, n = ik.length; i < n; i++) {
var ikMap = ik[i];
var ikConstraintData = new spine.IkConstraintData(ikMap["name"]);
var bones = ikMap["bones"];
for (var ii = 0, nn = bones.length; ii < nn; ii++) {
var bone = skeletonData.findBone(bones[ii]);
if (!bone) throw "IK bone not found: " + bones[ii];
ikConstraintData.bones.push(bone);
}
ikConstraintData.target = skeletonData.findBone(ikMap["target"]);
if (!ikConstraintData.target) throw "Target bone not found: " + ikMap["target"];
ikConstraintData.bendDirection = (!ikMap.hasOwnProperty("bendPositive") || ikMap["bendPositive"]) ? 1 : -1;
ikConstraintData.mix = ikMap.hasOwnProperty("mix") ? ikMap["mix"] : 1;
skeletonData.ikConstraints.push(ikConstraintData);
}
// Slots. // Slots.
var slots = root["slots"]; var slots = root["slots"];
for (var i = 0, n = slots.length; i < n; i++) { for (var i = 0, n = slots.length; i < n; i++) {
@ -1649,6 +1913,26 @@ spine.SkeletonJson.prototype = {
} }
} }
var ikMap = map["ik"];
for (var ikConstraintName in ikMap) {
if (!ikMap.hasOwnProperty(ikConstraintName)) continue;
var ikConstraint = skeletonData.findIkConstraint(ikConstraintName);
var values = ikMap[ikConstraintName];
var timeline = new spine.IkConstraintTimeline(values.length);
timeline.ikConstraintIndex = skeletonData.ikConstraints.indexOf(ikConstraint);
var frameIndex = 0;
for (var i = 0, n = values.length; i < n; i++) {
var valueMap = values[i];
var mix = valueMap.hasOwnProperty("mix") ? valueMap["mix"] : 1;
var bendDirection = (!valueMap.hasOwnProperty("bendPositive") || valueMap["bendPositive"]) ? 1 : -1;
timeline.setFrame(frameIndex, valueMap["time"], mix, bendDirection);
this.readCurve(timeline, frameIndex, valueMap);
frameIndex++;
}
timelines.push(timeline);
duration = Math.max(duration, timeline.frames[timeline.frameCount * 3 - 3]);
}
var ffd = map["ffd"]; var ffd = map["ffd"];
for (var skinName in ffd) { for (var skinName in ffd) {
var skin = skeletonData.findSkin(skinName); var skin = skeletonData.findSkin(skinName);