UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-05 06:44:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/3.6-beta' into 3.6-beta

Browse Source
This commit is contained in:
Nathan Sweet 2017-03-31 19:52:28 +09:00
commit 2bf79e8519
36 changed files with 641 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -69,6 +69,25 @@
* `AtasRegionAttacher` and `SpriteAttacher` are now part of `Example Modules`, to reflect that they are meant to be used as sample code rather than production.
* In the unitypackage, the "spine-csharp" and "spine-unity" folders are now inside a "Spine" folder. This change will only affect fresh imports. Importing the unitypackage to update Spine-Unity in your project will update the appropriate files wherever you have moved them.
## Java
* **Breaking changes**
* `Skeleton.getBounds` takes a scratch array as input so it doesn't have to allocate a new array on each invocation itself. Reduces GC activity.
* Removed `Bone.worldToLocalRotationX` and `Bone.worldToLocalRotationY`. Replaced by `Bone.worldToLocalRotation` (rotation given relative to x-axis, counter-clockwise, in degrees).
* Added `stride` parameter to `VertexAttachment.computeWorldVertices`.
* Removed `RegionAttachment.vertices` field. The vertices array is provided to `RegionAttachment.computeWorldVertices` by the API user now.
* Removed `RegionAttachment.updateWorldVertices`, added `RegionAttachment.computeWorldVertices`. The new method now computes the x/y positions of the 4 vertices of the corner and places them in the provided `worldVertices` array, starting at `offset`, then moving by `stride` array elements when advancing to the next vertex. This allows to directly compose the vertex buffer and avoids a copy. The computation of the full vertices, including vertex colors and texture coordinates, is now done by the backend's respective renderer.
* **Additions**
* Added support for local and relative transform constraint calculation, including additional fields in `TransformConstraintData`
* Added `Bone.localToWorldRotation`(rotation given relative to x-axis, counter-clockwise, in degrees).
* Added two color tinting support, including `TwoColorTimeline` and additional fields on `Slot` and `SlotData`.
* Added `PointAttachment`, additional method `newPointAttachment` in `AttachmentLoader` interface.
* Added `ClippingAttachment`, additional method `newClippingAttachment` in `AttachmentLoader` interface.
### libGDX
* Fixed renderer to work with 3.6 changes
* Added support for two color tinting. Use the new `TwoColorPolygonBatch` together with `SkeletonRenderer`
* Added support for clipping. See `SkeletonClipper`. Used automatically by `SkeletonRenderer`. Does not work when using a `SpriteBatch` with `SkeletonRenderer`. Use `PolygonSpriteBatch` or `TwoColorPolygonBatch` instead.
## Lua
* **Breaking changes**
* Removed `Bone:worldToLocalRotationX` and `Bone:worldToLocalRotationY`. Replaced by `Bone:worldToLocalRotation` (rotation given relative to x-axis, counter-clockwise, in degrees).

BIN
spine-as3/spine-as3-example/lib/spine-as3.swc
View File

Binary file not shown.

63
spine-as3/spine-as3/src/spine/animation/AnimationState.as
View File

@ -27,7 +27,6 @@
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
package spine.animation {
import spine.MathUtils;
import spine.Bone;
@ -52,6 +51,7 @@ package spine.animation {
internal var queue : EventQueue;
internal var propertyIDs : Dictionary = new Dictionary();
internal var animationsChanged : Boolean;
public var multipleMixing : Boolean = false;
public var timeScale : Number = 1;
internal var trackEntryPool : Pool;
@ -198,7 +198,9 @@ package spine.animation {
var timelineCount : int = from.animation.timelines.length;
var timelines : Vector.<Timeline> = from.animation.timelines;
var timelinesFirst : Vector.<Boolean> = from.timelinesFirst;
var alpha : Number = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast : Vector.<Boolean> = multipleMixing ? null : from.timelinesLast;
var alphaBase : Number = from.alpha * entry.mixAlpha;
var alphaMix : Number = alphaBase * (1 - mix);
var firstFrame : Boolean = from.timelinesRotation.length == 0;
if (firstFrame) from.timelinesRotation.length = timelineCount << 1;
@ -207,6 +209,7 @@ package spine.animation {
for (var i : int = 0; i < timelineCount; i++) {
var timeline : Timeline = timelines[i];
var setupPose : Boolean = timelinesFirst[i];
var alpha : Number = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline is RotateTimeline)
applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -360,10 +363,30 @@ package spine.animation {
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
var mixingFrom : TrackEntry = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
// A mix was interrupted, mix from the closest animation.
if (!multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
// The interrupted mix will mix out from its current percentage to zero.
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
// End the other animation after it is applied one last time.
if (!multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
// If not completely mixed in, set mixAlpha so mixing out happens from current mix to zero.
if (from.mixingFrom != null && from.mixDuration > 0) current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
from.timelinesRotation.length = 0;
}
queue.start(current);
@ -524,6 +547,36 @@ package spine.animation {
entry = tracks[i];
if (entry != null) checkTimelinesFirst(entry);
}
if (multipleMixing) return;
// Set timelinesLast for mixingFrom entries, from highest track to lowest that has mixingFrom.
for (var key2 : String in propertyIDs) {
delete propertyIDs[key2];
}
var lowestMixingFrom : int = n;
for (i = 0; i < n; i++) { // Find lowest track with a mixingFrom entry.
entry = tracks[i];
if (entry == null || entry.mixingFrom == null) continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) { // Find first non-null entry.
entry = tracks[i];
if (entry == null) continue;
// Store properties for non-mixingFrom entry but don't set timelinesLast, which is only used for mixingFrom entries.
var timelines : Vector.<Timeline> = entry.animation.timelines;
for (var ii : int = 0, nn : int = entry.animation.timelines.length; ii < nn; ii++)
var id : String = timelines[ii].getPropertyId().toString();
propertyIDs[id] = id;
entry = entry.mixingFrom;
while (entry != null) {
checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
}
private function setTimelinesFirst(entry : TrackEntry) : void {

2
spine-as3/spine-as3/src/spine/animation/TrackEntry.as
View File

@ -47,6 +47,7 @@ package spine.animation {
public var delay : Number, trackTime : Number, trackLast : Number, nextTrackLast : Number, trackEnd : Number, timeScale : Number;
public var alpha : Number, mixTime : Number, mixDuration : Number, mixAlpha : Number;
public var timelinesFirst : Vector.<Boolean> = new Vector.<Boolean>();
public var timelinesLast : Vector.<Boolean> = new Vector.<Boolean>();
public var timelinesRotation : Vector.<Number> = new Vector.<Number>();
public function TrackEntry() {
@ -72,6 +73,7 @@ package spine.animation {
onComplete.listeners.length = 0;
onEvent.listeners.length = 0;
timelinesFirst.length = 0;
timelinesLast.length = 0;
timelinesRotation.length = 0;
}

BIN
spine-starling/spine-starling-example/lib/spine-as3.swc
View File

Binary file not shown.

2
spine-starling/spine-starling-example/src/spine/examples/Main.as
View File

@ -45,7 +45,7 @@ package spine.examples {
// example = TankExample;
// example = VineExample;
// example = StretchymanExample;
example = TwoColorExample;
// example = TwoColorExample;
_starling = new Starling(example, stage);
_starling.enableErrorChecking = true;

BIN
spine-starling/spine-starling/lib/spine-as3.swc
View File

Binary file not shown.

2
spine-ts/build/spine-all.d.ts vendored
View File

@ -328,6 +328,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -385,6 +386,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-all.js
View File

@ -1461,6 +1461,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1588,7 +1589,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1596,6 +1599,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1736,9 +1740,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1884,6 +1903,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1941,6 +1984,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1949,6 +1993,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-all.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-canvas.d.ts vendored
View File

@ -328,6 +328,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -385,6 +386,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-canvas.js
View File

@ -1461,6 +1461,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1588,7 +1589,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1596,6 +1599,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1736,9 +1740,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1884,6 +1903,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1941,6 +1984,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1949,6 +1993,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-canvas.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-core.d.ts vendored
View File

@ -235,6 +235,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -292,6 +293,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-core.js
View File

@ -1043,6 +1043,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1170,7 +1171,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1178,6 +1181,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1318,9 +1322,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1466,6 +1485,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1523,6 +1566,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1531,6 +1575,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-core.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-threejs.d.ts vendored
View File

@ -235,6 +235,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -292,6 +293,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-threejs.js
View File

@ -1043,6 +1043,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1170,7 +1171,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1178,6 +1181,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1318,9 +1322,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1466,6 +1485,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1523,6 +1566,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1531,6 +1575,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-threejs.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-webgl.d.ts vendored
View File

@ -235,6 +235,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -292,6 +293,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-webgl.js
View File

@ -1043,6 +1043,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1170,7 +1171,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1178,6 +1181,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1318,9 +1322,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1466,6 +1485,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1523,6 +1566,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1531,6 +1575,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-webgl.js.map
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-widget.d.ts vendored
View File

@ -235,6 +235,7 @@ declare module spine {
queue: EventQueue;
propertyIDs: IntSet;
animationsChanged: boolean;
multipleMixing: boolean;
timeScale: number;
trackEntryPool: Pool<TrackEntry>;
constructor(data: AnimationStateData);
@ -292,6 +293,7 @@ declare module spine {
mixDuration: number;
mixAlpha: number;
timelinesFirst: boolean[];
timelinesLast: boolean[];
timelinesRotation: number[];
reset(): void;
getAnimationTime(): number;

51
spine-ts/build/spine-widget.js
View File

@ -1043,6 +1043,7 @@ var spine;
this.queue = new EventQueue(this);
this.propertyIDs = new spine.IntSet();
this.animationsChanged = false;
this.multipleMixing = false;
this.timeScale = 1;
this.trackEntryPool = new spine.Pool(function () { return new TrackEntry(); });
this.data = data;
@ -1170,7 +1171,9 @@ var spine;
var timelineCount = from.animation.timelines.length;
var timelines = from.animation.timelines;
var timelinesFirst = from.timelinesFirst;
var alpha = from.alpha * entry.mixAlpha * (1 - mix);
var timelinesLast = this.multipleMixing ? null : from.timelinesLast;
var alphaBase = from.alpha * entry.mixAlpha;
var alphaMix = alphaBase * (1 - mix);
var firstFrame = from.timelinesRotation.length == 0;
if (firstFrame)
spine.Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -1178,6 +1181,7 @@ var spine;
for (var i = 0; i < timelineCount; i++) {
var timeline = timelines[i];
var setupPose = timelinesFirst[i];
var alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof spine.RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -1318,9 +1322,24 @@ var spine;
this.queue.interrupt(from);
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
if (from.mixingFrom != null && from.mixDuration > 0)
var mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
};
@ -1466,6 +1485,30 @@ var spine;
if (entry != null)
this.checkTimelinesFirst(entry);
}
if (this.multipleMixing)
return;
propertyIDs.clear();
var lowestMixingFrom = n;
for (i = 0; i < n; i++) {
var entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null)
continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) {
var entry = this.tracks[i];
if (entry == null)
continue;
var timelines = entry.animation.timelines;
for (var ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
};
AnimationState.prototype.setTimelinesFirst = function (entry) {
if (entry.mixingFrom != null) {
@ -1523,6 +1566,7 @@ var spine;
var TrackEntry = (function () {
function TrackEntry() {
this.timelinesFirst = new Array();
this.timelinesLast = new Array();
this.timelinesRotation = new Array();
}
TrackEntry.prototype.reset = function () {
@ -1531,6 +1575,7 @@ var spine;
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
};
TrackEntry.prototype.getAnimationTime = function () {

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

61
spine-ts/core/src/AnimationState.ts
View File

@ -39,6 +39,7 @@ module spine {
queue = new EventQueue(this);
propertyIDs = new IntSet();
animationsChanged = false;
multipleMixing = false;
timeScale = 1;
trackEntryPool = new Pool<TrackEntry>(() => new TrackEntry());
@ -183,7 +184,9 @@ module spine {
let timelineCount = from.animation.timelines.length;
let timelines = from.animation.timelines;
let timelinesFirst = from.timelinesFirst;
let alpha = from.alpha * entry.mixAlpha * (1 - mix);
let timelinesLast = this.multipleMixing ? null : from.timelinesLast;
let alphaBase = from.alpha * entry.mixAlpha;
let alphaMix = alphaBase * (1 - mix);
let firstFrame = from.timelinesRotation.length == 0;
if (firstFrame) Utils.setArraySize(from.timelinesRotation, timelineCount << 1, null);
@ -192,6 +195,7 @@ module spine {
for (let i = 0; i < timelineCount; i++) {
let timeline = timelines[i];
let setupPose = timelinesFirst[i];
let alpha = timelinesLast != null && setupPose && !timelinesLast[i] ? alphaBase : alphaMix;
if (timeline instanceof RotateTimeline)
this.applyRotateTimeline(timeline, skeleton, animationTime, alpha, setupPose, timelinesRotation, i << 1, firstFrame);
else {
@ -348,10 +352,30 @@ module spine {
current.mixingFrom = from;
current.mixTime = 0;
from.timelinesRotation.length = 0;
let mixingFrom = from.mixingFrom;
if (mixingFrom != null && from.mixDuration > 0) {
// A mix was interrupted, mix from the closest animation.
if (!this.multipleMixing && from.mixTime / from.mixDuration < 0.5 && mixingFrom.animation != AnimationState.emptyAnimation) {
current.mixingFrom = mixingFrom;
mixingFrom.mixingFrom = from;
mixingFrom.mixTime = from.mixDuration - from.mixTime;
mixingFrom.mixDuration = from.mixDuration;
from.mixingFrom = null;
from = mixingFrom;
}
// If not completely mixed in, set mixAlpha so mixing out happens from current mix to zero.
if (from.mixingFrom != null && from.mixDuration > 0) current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
// The interrupted mix will mix out from its current percentage to zero.
current.mixAlpha *= Math.min(from.mixTime / from.mixDuration, 1);
// End the other animation after it is applied one last time.
if (!this.multipleMixing) {
from.mixAlpha = 0;
from.mixTime = 0;
from.mixDuration = 0;
}
}
from.timelinesRotation.length = 0;
}
this.queue.start(current);
@ -510,6 +534,33 @@ module spine {
let entry = this.tracks[i];
if (entry != null) this.checkTimelinesFirst(entry);
}
if (this.multipleMixing) return;
// Set timelinesLast for mixingFrom entries, from highest track to lowest that has mixingFrom.
propertyIDs.clear();
let lowestMixingFrom = n;
for (i = 0; i < n; i++) { // Find lowest track with a mixingFrom entry.
let entry = this.tracks[i];
if (entry == null || entry.mixingFrom == null) continue;
lowestMixingFrom = i;
break;
}
for (i = n - 1; i >= lowestMixingFrom; i--) { // Find first non-null entry.
let entry = this.tracks[i];
if (entry == null) continue;
// Store properties for non-mixingFrom entry but don't set timelinesLast, which is only used for mixingFrom entries.
let timelines = entry.animation.timelines;
for (let ii = 0, nn = entry.animation.timelines.length; ii < nn; ii++)
propertyIDs.add(timelines[ii].getPropertyId());
entry = entry.mixingFrom;
while (entry != null) {
this.checkTimelinesUsage(entry, entry.timelinesLast);
entry = entry.mixingFrom;
}
}
}
setTimelinesFirst (entry: TrackEntry) {
@ -578,6 +629,7 @@ module spine {
delay: number; trackTime: number; trackLast: number; nextTrackLast: number; trackEnd: number; timeScale: number;
alpha: number; mixTime: number; mixDuration: number; mixAlpha: number;
timelinesFirst = new Array<boolean>();
timelinesLast = new Array<boolean>();
timelinesRotation = new Array<number>();
reset () {
@ -586,6 +638,7 @@ module spine {
this.animation = null;
this.listener = null;
this.timelinesFirst.length = 0;
this.timelinesLast.length = 0;
this.timelinesRotation.length = 0;
}

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

@ -50,7 +50,7 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
renderer.camera.position.x = offset.x + bounds.x / 2;
@ -139,15 +139,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
renderer.circle(true, bone.worldX, bone.worldY, 20, colorInner);
renderer.circle(false, bone.worldX, bone.worldY, 20, colorOuter);
}
// renderer.drawSkeletonDebug(skeleton, false, ["root"]);
renderer.end();
gl.lineWidth(1);

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

@ -1,8 +1,8 @@
var imageChangesDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var skeleton, bounds;
var timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "Alien";
@ -15,18 +15,18 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("imagechanges-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
}
function load () {
timeKeeper.update();
@ -34,7 +34,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat01"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
loadingComplete(canvas, render);
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
requestAnimationFrame(load);
@ -43,7 +43,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function setupUI() {
playButton = $("#imagechanges-playbutton");
var playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@ -55,7 +55,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
timeLine = $("#imagechanges-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@ -63,11 +63,11 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.playTime = time;
active.playTime = time;
}
};
var list = $("#imagechanges-skeleton");
var list = $("#imagechanges-skeleton");
for (var skeletonName in skeletons) {
var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName);
@ -84,7 +84,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -93,16 +93,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.setSkinByName("default");
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
var anim = skeletonData.findAnimation(animation);
var anim = skeletonData.findAnimation(animation);
state.setAnimation(0, animation, true);
if (name === "alien") {
state.update(anim.duration / 2.5);
state.update(anim.duration / 2.5);
}
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
skeleton.getBounds(offset, size, []);
if (name === "alien") {
state.update(-anim.duration / 2.5);
}
@ -110,16 +110,16 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) {
var slot = sequenceSlots[i];
var index = skeleton.findSlotIndex(slot);
var index = skeleton.findSlotIndex(slot);
for (var name in skeleton.skin.attachments[index]) {
regions.push(skeleton.skin.attachments[index][name]);
regions.push(skeleton.skin.attachments[index][name]);
}
}
return {
atlas: atlas,
skeleton: skeleton,
state: state,
skeleton: skeleton,
state: state,
playTime: 0,
bounds: {
offset: offset,
@ -132,7 +132,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;
@ -159,7 +159,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
active.playTime += delta;
active.playTime += delta;
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
@ -170,15 +170,15 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
}
renderer.begin();
renderer.begin();
renderer.drawSkeleton(skeleton, true);
var y = offsetY;
var slotsWidth = 0, slotsHeight = 0;
var slotSize = size.y / 3;
var maxSlotWidth = 0;
var maxSlotWidth = 0;
var j = 0;
for (var i = 0; i < active.regions.length; i++) {
for (var i = 0; i < active.regions.length; i++) {
var region = active.regions[i].region;
var scale = Math.min(slotSize / region.height, slotSize / region.width);
renderer.drawRegion(region, x, y, region.width * scale, region.height * scale);
@ -187,7 +187,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
for (var ii = 0; ii < active.slots.length; ii++) {
var slotName = active.slots[ii];
var slotIndex = skeleton.findSlotIndex(slotName);
for (var iii = 0; iii < skeleton.drawOrder.length; iii++) {
var slot = skeleton.drawOrder[iii];
if (slot.data.index == slotIndex) {
@ -212,7 +212,7 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
maxSlotWidth = 0;
y = offsetY;
j = 0;
}
}
}
renderer.end();

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

@ -1,6 +1,6 @@
var meshesDemo = function(loadingComplete, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var skeleton, bounds;
var timeKeeper, loadingScreen;
var skeletons = {};
var activeSkeleton = "Orange Girl";
@ -13,19 +13,19 @@ var meshesDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("meshes-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
}
function load () {
timeKeeper.update();
@ -43,7 +43,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function setupUI() {
playButton = $("#meshes-playbutton");
var playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@ -55,7 +55,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
timeLine = $("#meshes-timeline").data("slider");
timeLine.changed = function (percent) {
if (isPlaying) playButton.click();
if (isPlaying) playButton.click();
if (!isPlaying) {
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@ -63,11 +63,11 @@ var meshesDemo = function(loadingComplete, bgColor) {
active.state.update(time - active.playTime);
active.state.apply(active.skeleton);
active.skeleton.updateWorldTransform();
active.playTime = time;
active.playTime = time;
}
};
var list = $("#meshes-skeleton");
var list = $("#meshes-skeleton");
for (var skeletonName in skeletons) {
var option = $("<option></option>");
option.attr("value", skeletonName).text(skeletonName);
@ -96,7 +96,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name, animation, sequenceSlots) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -107,26 +107,26 @@ var meshesDemo = function(loadingComplete, bgColor) {
var state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
state.setAnimation(0, animation, true);
state.apply(skeleton);
skeleton.updateWorldTransform();
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
var size = new spine.Vector2();
skeleton.getBounds(offset, size);
skeleton.getBounds(offset, size, []);
return {
atlas: atlas,
skeleton: skeleton,
state: state,
skeleton: skeleton,
state: state,
playTime: 0,
bounds: {
offset: offset,
size: size
}
}
};
}
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
var delta = timeKeeper.delta;
var active = skeletons[activeSkeleton];
var skeleton = active.skeleton;
@ -145,7 +145,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
active.playTime += delta;
active.playTime += delta;
while (active.playTime >= animationDuration) {
active.playTime -= animationDuration;
}
@ -156,7 +156,7 @@ var meshesDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
}
renderer.begin();
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
renderer.end();

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

@ -47,7 +47,7 @@ var skinsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.getBounds(offset, bounds, []);
setupUI();
setupInput();
loadingComplete(canvas, render);

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

@ -50,7 +50,7 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.getBounds(offset, bounds, []);
skeleton.x -= 60;
skeletonSeq = new spine.Skeleton(skeletonData);

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

@ -5,7 +5,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds, state;
var skeleton, bounds, state;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [];
@ -14,7 +14,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
"front leg controller",
"back arm controller",
"front arm controller",
"head controller",
"head controller",
"hip controller"
];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3();
@ -28,16 +28,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("stretchyman-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
input = new spine.webgl.Input(canvas);
input = new spine.webgl.Input(canvas);
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@ -46,7 +46,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -56,10 +56,10 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.getBounds(offset, bounds, []);
for (var i = 0; i < controlBones.length; i++) hoverTargets.push(null);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
state.setAnimation(0, "idle", true);
state.setAnimation(0, "idle", true);
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@ -77,25 +77,25 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
}
}
function setupUI() {
function setupUI() {
var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function setupInput (){
input.addListener({
down: function(x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
}
}
}
},
up: function(x, y) {
@ -117,16 +117,16 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
}
}
},
moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
}
}
});
}
@ -153,7 +153,7 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
function render () {
timeKeeper.update();
var delta = timeKeeper.delta;
var delta = timeKeeper.delta;
state.update(delta);
state.apply(skeleton);
@ -168,14 +168,14 @@ var stretchymanDemo = function(loadingComplete, 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();
renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);

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

@ -5,12 +5,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var rotateHandle;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var rotateHandle;
var target = null;
var hoverTargets = [null, null, null];
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5;
@ -22,16 +22,16 @@ var transformsDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("transforms-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@ -40,7 +40,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -50,11 +50,11 @@ var transformsDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = new spine.Vector2();
bounds = new spine.Vector2();
skeleton.getBounds(offset, bounds);
skeleton.getBounds(offset, bounds, []);
state = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
skeleton.setToSetupPose();
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
rotateHandle = skeleton.findBone("rotate-handle");
rotateHandle = skeleton.findBone("rotate-handle");
renderer.camera.position.x = offset.x + bounds.x / 2;
renderer.camera.position.y = offset.y + bounds.y / 2;
@ -62,7 +62,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
setupUI();
setupInput();
@ -79,7 +79,7 @@ var transformsDemo = function(loadingComplete, bgColor) {
var val = percent * 360 - 180;
var delta = val - lastOffset;
lastOffset = val;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel2").data.offsetRotation += delta;
skeleton.findTransformConstraint("wheel3").data.offsetRotation += delta;
$("#transforms-rotationoffset-label").text(Math.round(val) + "°");
};
@ -103,21 +103,21 @@ var transformsDemo = function(loadingComplete, bgColor) {
var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
if (v.y < 0) angle = 360 - angle;
if (v.y < 0) angle = 360 - angle;
return angle;
}
input.addListener({
down: function(x, y) {
down: function(x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
if (target === rotateHandle) lastRotation = getRotation(x, y);
}
}
}
}
},
up: function(x, y) {
up: function(x, y) {
target = null;
},
dragged: function(x, y) {
@ -140,10 +140,10 @@ var transformsDemo = function(loadingComplete, bgColor) {
}
}
},
moved: function (x, y) {
moved: function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var bone = skeleton.findBone(controlBones[i]);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
@ -171,12 +171,12 @@ var transformsDemo = function(loadingComplete, bgColor) {
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
renderer.end();

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

@ -1,5 +1,5 @@
var transitionsDemo = function(loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager;
var skeleton, skeletonNoMix, state, stateNoMix, bounds;
@ -17,43 +17,44 @@ var transitionsDemo = function(loadingComplete, bgColor) {
timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas = document.getElementById("transitions-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas1.png");
assetManager.loadText(DEMO_NAME, "atlas1.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
input = new spine.webgl.Input(canvas);
timeKeeper = new spine.TimeKeeper();
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
requestAnimationFrame(load);
}
function load () {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25);
state.multipleMixing = true;
setAnimations(state, 0);
stateNoMix = createState(0);
setAnimations(stateNoMix, -0.25);
state.apply(skeleton);
skeleton.updateWorldTransform();
bounds = { offset: new spine.Vector2(), size: new spine.Vector2() };
skeleton.getBounds(bounds.offset, bounds.size);
skeleton.getBounds(bounds.offset, bounds.size, []);
setupInput();
$("#transitions-overlay").removeClass("overlay-hide");
$("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render);
$("#transitions-overlay").addClass("overlay");
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
loadingScreen.draw();
requestAnimationFrame(load);
}
}
@ -86,7 +87,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
state.addAnimation(0, "run", true, mix);
state.addAnimation(0, "jump", true, 0.5);
state.addAnimation(0, "run", true, mix).listener = {
start: function (trackIndex) {
start: function (trackIndex) {
setAnimations(state, mix);
}
};
@ -94,7 +95,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
function loadSkeleton(name) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas1.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -111,7 +112,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
var oldValue = timeSliderLabel.textContent;
var newValue = Math.round(timeSlider.get() * 100) + "%";
if (oldValue !== newValue) timeSliderLabel.textContent = newValue;
}
}
var offset = bounds.offset;
var size = bounds.size;
@ -123,7 +124,7 @@ var transitionsDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
state.update(delta);

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

@ -5,7 +5,7 @@ var vineDemo = function(loadingComplete, bgColor) {
var COLOR_OUTER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.8);
var canvas, gl, renderer, input, assetManager;
var skeleton, state, bounds;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var target = null;
var hoverTargets = [null, null, null, null, null, null];
@ -20,16 +20,16 @@ var vineDemo = function(loadingComplete, bgColor) {
function init () {
canvas = document.getElementById("vine-canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
gl = canvas.getContext("webgl", { alpha: false }) || canvas.getContext("experimental-webgl", { alpha: false });
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager = spineDemos.assetManager;
var textureLoader = function(img) { return new spine.webgl.GLTexture(gl, img); };
assetManager.loadTexture(DEMO_NAME, textureLoader, "atlas2.png");
assetManager.loadText(DEMO_NAME, "atlas2.atlas");
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
assetManager.loadJson(DEMO_NAME, "demos.json");
timeKeeper = new spine.TimeKeeper();
loadingScreen = new spine.webgl.LoadingScreen(renderer);
requestAnimationFrame(load);
}
@ -38,7 +38,7 @@ var vineDemo = function(loadingComplete, bgColor) {
timeKeeper.update();
if (assetManager.isLoadingComplete(DEMO_NAME)) {
var atlas = new spine.TextureAtlas(assetManager.get(DEMO_NAME, "atlas2.atlas"), function(path) {
return assetManager.get(DEMO_NAME, path);
return assetManager.get(DEMO_NAME, path);
});
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
var skeletonJson = new spine.SkeletonJson(atlasLoader);
@ -48,7 +48,7 @@ var vineDemo = function(loadingComplete, bgColor) {
skeleton.updateWorldTransform();
var offset = 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.setAnimation(0, "animation", true);
state.apply(skeleton);
@ -65,14 +65,14 @@ var vineDemo = function(loadingComplete, bgColor) {
loadingComplete(canvas, render);
} else {
loadingScreen.draw();
loadingScreen.draw();
requestAnimationFrame(load);
}
}
function setupUI() {
playButton = $("#vine-playbutton");
var playButtonUpdate = function () {
var playButtonUpdate = function () {
isPlaying = !isPlaying;
if (isPlaying)
playButton.addClass("pause").removeClass("play");
@ -87,11 +87,11 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) playButton.click();
if (!isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
time = animationDuration * percent;
time = animationDuration * percent;
state.update(time - playTime);
state.apply(skeleton);
skeleton.updateWorldTransform();
playTime = time;
playTime = time;
}
};
@ -100,19 +100,19 @@ var vineDemo = function(loadingComplete, bgColor) {
var checkbox = $("#vine-drawbones");
checkbox.change(function() {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function setupInput() {
input.addListener({
down: function(x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
target = bone;
}
}
}
},
up: function(x, y) {
@ -132,15 +132,15 @@ var vineDemo = function(loadingComplete, bgColor) {
}
},
moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
hoverTargets[i] = bone;
} else {
hoverTargets[i] = null;
}
}
}
}
});
}
@ -151,14 +151,14 @@ var vineDemo = function(loadingComplete, bgColor) {
if (isPlaying) {
var animationDuration = state.getCurrent(0).animation.duration;
playTime += delta;
playTime += delta;
while (playTime >= animationDuration) {
playTime -= animationDuration;
}
timeLine.set(playTime / animationDuration);
state.update(delta);
state.apply(skeleton);
state.apply(skeleton);
}
skeleton.updateWorldTransform();
@ -168,18 +168,18 @@ var vineDemo = function(loadingComplete, bgColor) {
renderer.resize(spine.webgl.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);
var colorInner = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_INNER : spineDemos.NON_HOVER_COLOR_INNER;
var colorOuter = hoverTargets[i] !== null ? spineDemos.HOVER_COLOR_OUTER : spineDemos.NON_HOVER_COLOR_OUTER;
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
}
gl.lineWidth(1);
renderer.end();

62
spine-unity/Assets/Examples/Scripts/Sample Components/AtlasRegionAttacher.cs
View File

@ -29,11 +29,13 @@
*****************************************************************************/
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using Spine;
using Spine.Unity.Modules.AttachmentTools;
namespace Spine.Unity.Modules {
/// <summary>
/// Example code for a component that replaces the default attachment of a slot with an image from a Spine atlas.</summary>
public class AtlasRegionAttacher : MonoBehaviour {
[System.Serializable]
@ -45,8 +47,9 @@ namespace Spine.Unity.Modules {
public string region;
}
public AtlasAsset atlasAsset;
public SlotRegionPair[] attachments;
[SerializeField] protected AtlasAsset atlasAsset;
[SerializeField] protected bool inheritProperties = true;
[SerializeField] protected List<SlotRegionPair> attachments = new List<SlotRegionPair>();
Atlas atlas;
@ -58,15 +61,56 @@ namespace Spine.Unity.Modules {
atlas = atlasAsset.GetAtlas();
float scale = skeletonRenderer.skeletonDataAsset.scale;
var enumerator = attachments.GetEnumerator();
while (enumerator.MoveNext()) {
var entry = (SlotRegionPair)enumerator.Current;
var slot = skeletonRenderer.skeleton.FindSlot(entry.slot);
foreach (var entry in attachments) {
var slot = skeletonRenderer.Skeleton.FindSlot(entry.slot);
var region = atlas.FindRegion(entry.region);
slot.Attachment = region.ToRegionAttachment(entry.region, scale);
ReplaceAttachment(slot, region, scale, inheritProperties);
}
}
static void ReplaceAttachment (Slot slot, AtlasRegion region, float scale, bool inheritProperties) {
var originalAttachment = slot.Attachment;
// Altas was empty
if (region == null) {
slot.Attachment = null;
return;
}
// Original was MeshAttachment
if (inheritProperties) {
var originalMeshAttachment = originalAttachment as MeshAttachment;
if (originalMeshAttachment != null) {
var newMeshAttachment = originalMeshAttachment.GetLinkedClone(); // Attach the region as a linked mesh to the original mesh.
newMeshAttachment.SetRegion(region);
slot.Attachment = newMeshAttachment;
return;
}
}
// Original was RegionAttachment or empty
{
var originalRegionAttachment = originalAttachment as RegionAttachment;
var newRegionAttachment = region.ToRegionAttachment(region.name, scale);
if (originalRegionAttachment != null && inheritProperties) {
newRegionAttachment.X = originalRegionAttachment.X;
newRegionAttachment.Y = originalRegionAttachment.Y;
newRegionAttachment.Rotation = originalRegionAttachment.Rotation;
newRegionAttachment.ScaleX = originalRegionAttachment.ScaleX;
newRegionAttachment.ScaleY = originalRegionAttachment.ScaleY;
newRegionAttachment.UpdateOffset();
newRegionAttachment.R = originalRegionAttachment.R;
newRegionAttachment.G = originalRegionAttachment.G;
newRegionAttachment.B = originalRegionAttachment.B;
newRegionAttachment.A = originalRegionAttachment.A;
}
slot.Attachment = newRegionAttachment;
return;
}
}
}
}